In this tutorial, I am going to explain you how to animate images on Page Scroll using jQuery & CSS3.
If you have a page with few images, as you scroll down each image in that page will animate from top to bottom, bottom to top, left to right & right to left.
I have used pure CSS3 for animation & little jQuery code to trigger animation on scrolling.
Contents
CSS3 Code for Animation
.animated {
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-o-transform: scale(0.3);
-ms-transform: scale(0.3);
transform: scale(0.3);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-ms-transition-duration:0.3s;
transition-duration: 0.3s;
transition-property:scale;
-moz-transition-property: scale; /* Firefox 4 */
-webkit-transition-property: scale; /* Safari and Chrome */
-o-transition-property:scale; /* Opera */
}
.animated.left-to-right,
.animated.right-to-left,
.animated.bottom-to-top {
-webkit-transition-duration: 1.2s;
-moz-transition-duration: 1.2s;
-o-transition-duration: 1.2s;
-ms-transition-duration:1.2s;
transition-duration: 1.2s;
}
.animation_started.animated {
-webkit-transform: scale(1) translate3d(0,0,0);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity:1;
}
.left-to-right {
-webkit-transform: scale(1) translate3d(-50%,0,0);
opacity:0;
}
.right-to-left {
-webkit-transform: scale(1) translate3d(50%,0,0);
opacity:0;
}
.bottom-to-top {
-webkit-transform: scale(1) translate3d(0,50%,0);
opacity:0;
}
JQuery Code to Trigger Animation on Scrolling
jQuery(document).ready(function ($) {
var animated_element = $('.animated');
function image_animation() {
animated_element.each(function () {
var get_offset = $(this).offset();
if ($(window).scrollTop() + $(window).height() > get_offset.top + $(this).height() / 2) {
$(this).addClass('animation_started');
setTimeout(function () {
$(this).removeClass('animated').removeAttr('style');
}, 300);
}
});
}
$(window).scroll(function () {
image_animation();
});
$(window).load(function () {
setInterval(image_animation, 300);
});
});
The function name is image_animation(), It will be called on page scroll & after entire page loads to start animate images. After 3 seconds I have removed the animate style to prevent infinite animation.
HTML Usage
<img class="animated right-to-left" alt="Karthikeyan K - w3lessons.info" src="jaipur.jpg" />
I hope you will like this tutorial. You can use this code in your live projects.
Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!
Thanks!
