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.

Animate Images on Page Scroll - jQuery & CSS

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!

View Live Demo Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2014/02/Animate-Images-on-Page-Scroll.pnghttp://w3lessons.info/wp-content/uploads/2014/02/Animate-Images-on-Page-Scroll-150x150.pngKarthikeyan KCSS3jqueryCSS3,Jquery,new techniques
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 &...