0

I am trying to add the animation of animated.css (http://daneden.github.io/animate.css/). But when I add the animated class and my desired effects on my page images and other elements, the animation just finish immediately on page load simultaneously everywhere on the page. I can't even see them function. Its so quick.

I know it can be done using jQuery.

Basically what I want is to make the animation function one by one only when the user scroll the window. So that only the element which is currently visible on the screen its animation will function, rest animations will function when the user scrolls the window.

Improve this question
3
  • 1
    Please show your codes with jsfiddle.net Commented Jun 10, 2014 at 5:05
  • this looks like a story rather than a question really asked for help. Commented Jun 10, 2014 at 5:13
  • I want to have the animation effect the way its done here demos.codexcoder.com/biz-demo/image-parallax Commented Jun 10, 2014 at 5:16

2 Answers 2

Reset to default
1

If you want to do animation when the user scoll the window, you need to check the visiblity of particular element using jquery and apply the animation class.

For example, you have image under the div name "disimage". Then you need to write your code like below.

  $(document).ready(function(){

    if($("#disimage").visible())
      {
        $("#disimage").toggleClass("myanimationclass");
      }

    });

myanimationclass should have the animation styles for your element.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks this worked for particular element .. But In general I was asking for the whole site.
wrap all your div inside one parent div then refer like this $("#parentdiv div")
1

You can use these snippets to check the working functionality. You can choose animation styles from animate.css and then use them to animate your elements.

$(document).ready(function(){
  initScrollAnim();
});

function initScrollAnim() {
  // add this .anim-block class to every block that needs animation
  var targetBlock = $('.anim-block');

  targetBlock.each(function() {
    var item = $(this);
    var win = $(window);
    // make transition when this class is added
    var activeClass = ('anim-active');

    var addOffset = 20;

    var animate = function() {
      if ((win.scrollTop() + win.height()/1.5)  >= item.offset().top) {
        item.addClass(activeClass);
      }
    };

    win.on('load scroll', animate);
  });
}
#wrapper {
	overflow: hidden;
}

.anim-block {
	display: block;
	width: 100%;
	height: 100px;
	background: blue;
}

.slide-from-right {
	transform: translate(100%, 0);
	transition: transform 0.4s ease-in-out;
}

.anim-active {
	transform: translate(0, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, excepturi?</p>
  <div class="anim-block slide-from-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, similique!</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In omnis possimus saepe! Qui reiciendis deserunt iure, quod magnam mollitia eius?</p>
</div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.