Ken Burns effect with Vegas 2

Developer
Jay Salvat
Size
3,334 Kb
Views
58,696
  1. Ken Burns effect with Vegas 2 Previews
  2. Ken Burns effect with Vegas 2 HTML Codes
  3. Ken Burns effect with Vegas 2 CSS Codes
  4. Ken Burns effect with Vegas 2 JS Codes

How do I make an ken burns effect with vegas 2?

Ken Burns effects with Vegas Background SlideShow V2, a jQuery/Zepto plugin.. What is a ken burns effect with vegas 2? How do you make a ken burns effect with vegas 2? This script and codes were developed by Jay Salvat on 13 July 2022, Wednesday.

Ken Burns effect with Vegas 2 Previews
IQ Test

Ken Burns effect with Vegas 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ken Burns effect with Vegas 2</title> <link rel='stylesheet prefetch' href='http://jaysalvat.github.io/vegas/releases/latest/vegas.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Raleway:400,900'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Vegas <strong>2</strong></h1> <h2>Background slideshow</h2> <p>Ken Burns effect</p>
</div>
<a href="http://vegas.jaysalvat.com"> Download VEGAS
</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://jaysalvat.github.io/vegas/releases/latest/vegas.js'></script> <script src="js/index.js"></script>
</body>
</html>

Ken Burns effect with Vegas 2 - Script Codes CSS Codes

body { font-family: Raleway; font-weight: 900; color: #fff; background: #000;
}
h1, h2, p, strong { margin: 5px 0; padding: 0; margin-right: 130px; line-height: 1em; text-align: right; text-transform: uppercase; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3), 1px 1px 1px rgba(0, 0, 0, 0.3), 0 0 10px #000;
}
h1 { font-size: 5.5em; letter-spacing: -10px; margin-bottom: -10px;
}
h1 strong { position: absolute; top: -50px; right: 0; font-size: 235px; opacity: .5; margin: 0;
}
h2 { opacity: .6; font-size: 1.7em;
}
p { font-size: 2em;
}
a { position: absolute; left: 1em; bottom: 3em; border: 3px solid #fff; border-radius: 8px; box-shadow: 0 0 10px #000; padding: 20px 40px; text-align: center; text-decoration: none; text-shadow: 0 0 5px #000; font-size: 13px; color: #fff; -webkit-animation: pulse 4s infinite; animation: pulse 4s infinite;
}
@media screen and (max-width: 720px) { a { display: none; }
}
.container { position: absolute; bottom: 2em; right: 2em;
}
.vegas-overlay { opacity: .2;
}
.vegas-timer-progress { background: #fff;
}
@-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); transform: scale(0.8); }
}
@keyframes pulse { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); transform: scale(0.8); }
}

Ken Burns effect with Vegas 2 - Script Codes JS Codes

// VEGAS
// Background SLideShow
// Codepen Demo
// http://vegas.jatysalvat.com
// Pictures from Unsplash
// http://unsplash.com/
$('body').vegas({ overlay: true, transition: 'fade', transitionDuration: 4000, delay: 10000, color: 'red', animation: 'random', animationDuration: 20000, slides: [ { src: 'https://ununsplash.imgix.net/reserve/RONyPwknRQOO3ag4xf3R_Kinsey.jpg?fit=crop&fm=jpg&h=700&q=75&w=1600' }, { src: 'https://unsplash.imgix.net/photo-1414438992182-69e404046f80?fit=crop&fm=jpg&h=625&q=75&w=1600' }, { src: 'https://unsplash.imgix.net/photo-1414490929659-9a12b7e31907?fit=crop&fm=jpg&h=800&q=75&w=1600' }, { src: 'https://unsplash.imgix.net/uploads/14129863345840df499fc/0165574c?fit=crop&fm=jpg&h=600&q=75&w=1600' } ]
});
Ken Burns effect with Vegas 2 - Script Codes
Ken Burns effect with Vegas 2 - Script Codes
Home Page Home
Developer Jay Salvat
Username jaysalvat
Uploaded July 13, 2022
Rating 4.5
Size 3,334 Kb
Views 58,696
Do you need developer help for Ken Burns effect with Vegas 2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jay Salvat (jaysalvat) Script Codes
Name
JQuery like selection helper
Apple watch like Mickey watch
Pure CSS Animated Clock
Ezdz quick demo
Blobs test
3 state pure CSS animated 3D button
HTML5 Breakout
A Pen by Jay Salvat
Buzz - react 2
Buzz - react 1
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!