Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How can I make an animation after Pageload

How can I make an animation after Pageload

Problem

I want to create a page where the Animations will be seen while scrolling down the page, not at once.

I've already created a page with four css3 animations. It's animating now at once while the pages loads. I want it to animate when scrolling down the page.

I've heard that jquery can do it, But i can't implement there.

I've tried jquery but not working. kindly help.

Here is my faulty codes:

The divs #one, #two, #three and #four each has an animation. It's animating at once. But i want it to load when scrolling down. just like: http://knockknockfactory.com . The codes are available at Github. see above please.

Problem courtesy of: Ebrahim Khalil

Solution

Answer to Edited Question

This is the same principle as before, just triggered when you scroll down a number of px rather than to a specific div

Animations

  • Animate.css -Wicked cool plug and play CSS animations

API Documentation

  • .scroll()
  • .scrollTop()
  • .fadeIn()
  • .fadeOut()

Example

$(document).scroll(function () {

    var y = $(this).scrollTop();

    if (y > (200)) {
        $(".magic").fadeIn('fast').addClass("fadeInDown").removeClass("fadeOutUp");
    }
    if ((y  (300)) {
        $(".magic2").fadeIn('fast').addClass("fadeInRight").removeClass("fadeOutRight");
    }
    if ((y  (400)) {
        $(".magic3").fadeIn('fast').addClass("fadeInLeft").removeClass("fadeOutLeft");
    }
    if ((y  (500)) {
        $(".magic4").fadeIn('fast').addClass("fadeInUp").removeClass("fadeOutDown");
    }
    if ((y 

Answer to Original Question

Page load animations are completely do-able in css alone. Just set up a keyframe animation and attach it to an element and when that element loads the animation will do its thing.

Animations triggered by the user scrolling down to an element will require a little jquery.

$(document).scroll(function () {
var y = $(this).scrollTop();
var x = $("#myDiv").position();

if (y > (x.top - 28)) {
    $(".magic").addClass(
        "bounceInRight");
}
else {
    $(".magic").removeClass(
        "bounceInRight");
}
});

Example

Solution courtesy of: apaul34208

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How can I make an animation after Pageload

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×