Scroll Animations

Developer

Size

3,466 Kb

Views

44,528

Scroll Animations Previews
Scroll Animations HTML Codes
Scroll Animations CSS Codes
Scroll Animations JS Codes

How do I make an scroll animations?

Trigger CSS animations on scroll. Detailed explanation can be found at http://www.bram.us/2013/11/20/scroll-animations/. What is a scroll animations? How do you make a scroll animations? This script and codes were developed by Bramus on 23 July 2022, Saturday.

Scroll Animations Previews

Scroll Animations - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll Animations</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="block animatable bounceIn">bounceIn</div> <div class="block animatable bounceInLeft">bounceInLeft</div> <div class="block animatable bounceInRight">bounceInRight</div> <div class="block animatable fadeIn">fadeIn</div> <div class="block animatable fadeInDown">fadeInDown</div> <div class="block animatable fadeInUp">fadeInUp</div> <div class="block animatable moveUp">moveUp</div> <div class="block animatable fadeBgColor">fadeBgColor</div> <div class="block animatable bounceIn">bounceIn</div> <div class="block animatable bounceInLeft">bounceInLeft</div> <div class="block animatable bounceInRight">bounceInRight</div> <div class="block animatable fadeIn">fadeIn</div> <div class="block animatable fadeInDown">fadeInDown</div> <div class="block animatable fadeInUp">fadeInUp</div> <div class="block animatable moveUp">moveUp</div> <div class="block animatable fadeBgColor">fadeBgColor</div> <div class="block animatable bounceIn">bounceIn</div> <div class="block animatable bounceInLeft">bounceInLeft</div> <div class="block animatable bounceInRight">bounceInRight</div> <div class="block animatable fadeIn">fadeIn</div> <div class="block animatable fadeInDown">fadeInDown</div> <div class="block animatable fadeInUp">fadeInUp</div> <div class="block animatable moveUp">moveUp</div> <div class="block animatable fadeBgColor">fadeBgColor</div> <div class="block animatable bounceIn">bounceIn</div> <div class="block animatable bounceInLeft">bounceInLeft</div> <div class="block animatable bounceInRight">bounceInRight</div> <div class="block animatable fadeIn">fadeIn</div> <div class="block animatable fadeInDown">fadeInDown</div> <div class="block animatable fadeInUp">fadeInUp</div> <div class="block animatable moveUp">moveUp</div> <div class="block animatable fadeBgColor">fadeBgColor</div> <div class="block animatable bounceIn">bounceIn</div> <div class="block animatable bounceInLeft">bounceInLeft</div> <div class="block animatable bounceInRight">bounceInRight</div> <div class="block animatable fadeIn">fadeIn</div> <div class="block animatable fadeInDown">fadeInDown</div> <div class="block animatable fadeInUp">fadeInUp</div> <div class="block animatable moveUp">moveUp</div> <div class="block animatable fadeBgColor">fadeBgColor</div> <div class="block animatable bounceIn">bounceIn</div> <div class="block animatable bounceInLeft">bounceInLeft</div> <div class="block animatable bounceInRight">bounceInRight</div> <div class="block animatable fadeIn">fadeIn</div> <div class="block animatable fadeInDown">fadeInDown</div> <div class="block animatable fadeInUp">fadeInUp</div> <div class="block animatable moveUp">moveUp</div> <div class="block animatable fadeBgColor">fadeBgColor</div> </div> <script src='https://code.jquery.com/jquery-1.10.1.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scroll Animations - Script Codes CSS Codes

body { background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEX4+Pj09PQf/c7fAAAAGklEQVR4Xq3MIQEAAADDIPqX/kvMIMEWEm8O7b0/wewc/NcAAAAASUVORK5CYII=) repeat;
}
.block { height: 5em; line-height: 5em; width: 10em; background: #464646; color: #fdfdfd; text-align: center; margin: 1em auto; text-shadow: 0 0 1px #333; /* so one can see fadeBgColor properly */
}
.animatable { /* initially hide animatable objects */ visibility: hidden; /* initially pause animatable objects their animations */ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
/* show objects being animated */
.animated { visibility: visible; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-play-state: running; -moz-animation-play-state: running; -ms-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running;
}
/* CSS Animations (extracted from http://glifo.uiparade.com/) */
@-webkit-keyframes fadeInDown {	0% {	opacity: 0;	-webkit-transform: translateY(-20px);	}	100% {	opacity: 1;	-webkit-transform: translateY(0);	}
}
@-moz-keyframes fadeInDown {	0% {	opacity: 0;	-moz-transform: translateY(-20px);	}	100% {	opacity: 1;	-moz-transform: translateY(0);	}
}
@-o-keyframes fadeInDown {	0% {	opacity: 0;	-o-transform: translateY(-20px);	}	100% {	opacity: 1;	-o-transform: translateY(0);	}
}
@keyframes fadeInDown {	0% {	opacity: 0;	transform: translateY(-20px);	}	100% {	opacity: 1;	transform: translateY(0);	}
}
@-webkit-keyframes fadeIn {	0% {	opacity: 0;	}	20% {	opacity: 0;	}	100% {	opacity: 1;	}
}
@-moz-keyframes fadeIn {	0% {	opacity: 0;	}	20% {	opacity: 0;	}	100% {	opacity: 1;	}
}
@-o-keyframes fadeIn {	0% {	opacity: 0;	}	20% {	opacity: 0;	}	100% {	opacity: 1;	}
}
@keyframes fadeIn {	0% {	opacity: 0;	}	60% {	opacity: 0;	}	20% {	opacity: 0;	}	100% {	opacity: 1;	}
}
@-webkit-keyframes bounceInLeft {	0% {	opacity: 0;	-webkit-transform: translateX(-2000px);	}	60% {	-webkit-transform: translateX(20px);	}	80% {	-webkit-transform: translateX(-5px);	}	100% {	opacity: 1;	-webkit-transform: translateX(0);	}
}
@-moz-keyframes bounceInLeft {	0% {	opacity: 0;	-moz-transform: translateX(-2000px);	}	60% {	-moz-transform: translateX(20px);	}	80% {	-moz-transform: translateX(-5px);	}	100% {	opacity: 1;	-moz-transform: translateX(0);	}
}
@-o-keyframes bounceInLeft {	0% {	opacity: 0;	-o-transform: translateX(-2000px);	}	60% {	opacity: 1;	-o-transform: translateX(20px);	}	80% {	-o-transform: translateX(-5px);	}	100% {	opacity: 1;	-o-transform: translateX(0);	}
}
@keyframes bounceInLeft {	0% {	opacity: 0;	transform: translateX(-2000px);	}	60% {	transform: translateX(20px);	}	80% {	transform: translateX(-5px);	}	100% {	opacity: 1;	transform: translateX(0);	}
}
@-webkit-keyframes bounceInRight {	0% {	opacity: 0;	-webkit-transform: translateX(2000px);	}	60% {	-webkit-transform: translateX(-20px);	}	80% {	-webkit-transform: translateX(5px);	}	100% {	opacity: 1;	-webkit-transform: translateX(0);	}
}
@-moz-keyframes bounceInRight {	0% {	opacity: 0;	-moz-transform: translateX(2000px);	}	60% {	-moz-transform: translateX(-20px);	}	80% {	-moz-transform: translateX(5px);	}	100% {	opacity: 1;	-moz-transform: translateX(0);	}
}
@-o-keyframes bounceInRight {	0% {	opacity: 0;	-o-transform: translateX(2000px);	}	60% {	-o-transform: translateX(-20px);	}	80% {	-o-transform: translateX(5px);	}	100% {	opacity: 1;	-o-transform: translateX(0);	}
}
@keyframes bounceInRight {	0% {	opacity: 0;	transform: translateX(2000px);	}	60% {	transform: translateX(-20px);	}	80% {	transform: translateX(5px);	}	100% {	opacity: 1;	transform: translateX(0);	}
}
@-webkit-keyframes fadeInUp {	0% {	opacity: 0;	-webkit-transform: translateY(20px);	}	100% {	opacity: 1;	-webkit-transform: translateY(0);	}
}
@-moz-keyframes fadeInUp {	0% {	opacity: 0;	-moz-transform: translateY(20px);	}	100% {	opacity: 1;	-moz-transform: translateY(0);	}
}
@-o-keyframes fadeInUp {	0% {	opacity: 0;	-o-transform: translateY(20px);	}	100% {	opacity: 1;	-o-transform: translateY(0);	}
}
@keyframes fadeInUp {	0% {	opacity: 0;	transform: translateY(20px);	}	100% {	opacity: 1;	transform: translateY(0);	}
}
@-webkit-keyframes bounceIn {	0% {	opacity: 0;	-webkit-transform: scale(.3);	}	50% {	-webkit-transform: scale(1.05);	}	70% {	-webkit-transform: scale(.9);	}	100% {	opacity: 1;	-webkit-transform: scale(1);	}
}
@-moz-keyframes bounceIn {	0% {	opacity: 0;	-moz-transform: scale(.3);	}	50% {	-moz-transform: scale(1.05);	}	70% {	-moz-transform: scale(.9);	}	100% {	opacity: 1;	-moz-transform: scale(1);	}
}
@-o-keyframes bounceIn {	0% {	opacity: 0;	-o-transform: scale(.3);	}	50% {	-o-transform: scale(1.05);	}	70% {	-o-transform: scale(.9);	}	100% {	opacity: 1;	-o-transform: scale(1);	}
}
@keyframes bounceIn {	0% {	opacity: 0;	transform: scale(.3);	}	50% {	transform: scale(1.05);	}	70% {	transform: scale(.9);	}	100% {	opacity: 1;	transform: scale(1);	}
}
@-webkit-keyframes moveUp {	0% {	opacity: 1;	-webkit-transform: translateY(40px);	}	100% {	opacity: 1;	-webkit-transform: translateY(0);	}
}
@-moz-keyframes moveUp {	0% {	opacity: 1;	-moz-transform: translateY(40px);	}	100% {	opacity: 1;	-moz-transform: translateY(0);	}
}
@-o-keyframes moveUp {	0% {	opacity: 1;	-o-transform: translateY(40px);	}	100% {	opacity: 1;	-o-transform: translateY(0);	}
}
@keyframes moveUp {	0% {	opacity: 1;	transform: translateY(40px);	}	100% {	opacity: 1;	transform: translateY(0);	}
}
@-webkit-keyframes fadeBgColor {	0%{	background:none;	} 70%{	background:none;	}	100%{	background:#464646;	}
}
@-o-keyframes fadeBgColor {	0%{	background:none;	} 70%{	background:none;	}	100%{	background:#464646;	}
}
@keyframes fadeBgColor {	0%{	background:none;	} 70%{	background:none;	}	100%{	background:#464646;	}
}
.animated.animationDelay{	animation-delay:.4s;	-webkit-animation-delay:.4s;
}
.animated.animationDelayMed{	animation-delay:1.2s;	-webkit-animation-delay:1.2s;
}
.animated.animationDelayLong{	animation-delay:1.6s;	-webkit-animation-delay:1.6s;
}
.animated.fadeBgColor {	-webkit-animation-name: fadeBgColor;	-moz-animation-name: fadeBgColor;	-o-animation-name: fadeBgColor;	animation-name: fadeBgColor;
}
.animated.bounceIn {	-webkit-animation-name: bounceIn;	-moz-animation-name: bounceIn;	-o-animation-name: bounceIn;	animation-name: bounceIn;
}
.animated.bounceInRight {	-webkit-animation-name: bounceInRight;	-moz-animation-name: bounceInRight;	-o-animation-name: bounceInRight;	animation-name: bounceInRight;
}
.animated.bounceInLeft {	-webkit-animation-name: bounceInLeft;	-moz-animation-name: bounceInLeft;	-o-animation-name: bounceInLeft;	animation-name: bounceInLeft;
}
.animated.fadeIn {	-webkit-animation-name: fadeIn;	-moz-animation-name: fadeIn;	-o-animation-name: fadeIn;	animation-name: fadeIn;
}
.animated.fadeInDown {	-webkit-animation-name: fadeInDown;	-moz-animation-name: fadeInDown;	-o-animation-name: fadeInDown;	animation-name: fadeInDown;
}
.animated.fadeInUp {	-webkit-animation-name: fadeInUp;	-moz-animation-name: fadeInUp;	-o-animation-name: fadeInUp;	animation-name: fadeInUp;
}
.animated.moveUp {	-webkit-animation-name: moveUp;	-moz-animation-name: moveUp;	-o-animation-name: moveUp;	animation-name: moveUp;
}

Scroll Animations - Script Codes JS Codes

// Trigger CSS animations on scroll.
// Detailed explanation can be found at http://www.bram.us/2013/11/20/scroll-animations/
// Looking for a version that also reverses the animation when
// elements scroll below the fold again?
// --> Check https://codepen.io/bramus/pen/vKpjNP
jQuery(function($) { // Function which adds the 'animated' class to any '.animatable' in view var doAnimations = function() { // Calc current offset and get all animatables var offset = $(window).scrollTop() + $(window).height(), $animatables = $('.animatable'); // Unbind scroll handler if we have no animatables if ($animatables.size() == 0) { $(window).off('scroll', doAnimations); } // Check all animatables and animate them if necessary	$animatables.each(function(i) { var $animatable = $(this);	if (($animatable.offset().top + $animatable.height() - 20) < offset) { $animatable.removeClass('animatable').addClass('animated');	} });	}; // Hook doAnimations on scroll, and trigger a scroll	$(window).on('scroll', doAnimations); $(window).trigger('scroll');
});

Home Page	Home
Developer	Bramus
Username	bramus
Uploaded	July 23, 2022
Rating	4.5
Size	3,466 Kb
Views	44,528

Do you need developer help for Scroll Animations?

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!

Bramus (bramus) Script Codes

Name	Size
Skrollr basic implementation	2,467 Kb
Canvas multiline fillText	1,875 Kb
Simplest CSS Slideshow	1,994 Kb
Pythagoras	3,197 Kb
Skrollr basic implementation, alternative	2,611 Kb
CSS Glitch	2,699 Kb
Simple Flexbox Grid System	7,705 Kb
CSS Revolving Door	2,312 Kb
CSS block formatting context	2,057 Kb
Scrolling Horizontal Isotope	2,017 Kb

Create amazing love letters 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!

Similar Scripts & Codes

Name	Username	Size
Local Weather App - FreeCodeCamp	TrevorWelch	4,134 Kb
Particle Motion trajectories	Sniejadlik	5,899 Kb
Ghost Buttons with CSS3	Mithicher	2,509 Kb
Vue.js Lazy Loading	Kjbrum	3,620 Kb
CSS Google Now	Jackmoran	3,196 Kb
Slide like Mailbox	Hmps	3,758 Kb
Resize image	Happyhj	1,892 Kb
Drag and Drop Quiz	Cgspicer	3,837 Kb
Bubble animation	Ftabor	6,565 Kb
Background-blend-mode Test	0x04	4,744 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!