Geek Answers Handbook

Start animation while scrolling to

I spent all day finding an easy way to start my animation after scrolling to a specific place on the page.

My css

.animation { width: 50%; float: left; position: relative; -webkit-animation-name: test; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 3; -webkit-animation-fill-mode: forwards; animation-name: test; animation-duration: 4s; animation-iteration-count: 1; animation-fill-mode: forwards; }

And my HTML

 <div class="container"> <div class="animation"> Content goes here... </div> </div>

I wonder how to start the animation when I go to the class container.

+10
javascript jquery css scroll animation
source share
6 answers

Javascript

 var $window = $(window); var $elem = $(".animation") function isScrolledIntoView($elem, $window) { var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } $(document).on("scroll", function () { if (isScrolledIntoView($elem, $window)) { $elem.addClass("animate") } });

HTML

 <div class="container"> <div class="animation">Content goes here...</div> </div>

CSS

 .animation.animate { animation: pulse 5s infinite;//change this to whatever you want }

JSFiddle to play with (don't forget to scroll)

+11
source share

@WebWeb, you can try this simple formula:

 $(window).on('scroll' , function(){ scroll_pos = $(window).scrollTop() + $(window).height(); element_pos = $(yourelement).offset().top + $(yourelement).height() ; if (scroll_pos > element_pos) { $(yourelement).addClass('add-anim'); }; })

It basically checks to see if the scroll position of the windows is higher than for elements offset from the top of the document (plus the height of the element). This is an age old formula.

Violin and demo here

If you're as lazy as me, you can find waypoints.js a terrific library.

+3
source share

No need to wonder about it ... just use it

Github

download animate.css and implement this in

 <script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script> <link rel="stylesheet" href="css/animate.css"> <script> new WOW().init(); </script> <div class="wow bounceInLeft animated"> <h2>animated heading</h2> </div>

try this code ...

this link for more

(these classes can be used)

 bounce flash pulse rubberBand shake headShake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp
+3
source share

You can try wow.js quickly and simply to integrate the animation while scrolling when the element is visible on the page. I am creating a simple demo.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css"> <style> body { padding-bottom: 200px; } </style> </head> <body> <div style="height: 110vh"> </div> <div class="wow bounceInLeft"> Animation start when Visible </div> <div data-wow-delay=".5s" class="wow bounceInLeft"> Animation start when Visible after .5s delay </div> <div data-wow-delay="1s" class="wow bounceInLeft"> Animation start when Visible after 1s delay </div> <div data-wow-delay="2s" class="wow bounceInLeft"> Animation start when Visible after 2s delay </div> <div style="text-align: center; margin-top: 300px;"> <span data-wow-delay="" class="wow bounceInDown">Link 1</span> <span data-wow-delay=".1s" class="wow bounceInDown">Link 3</span> <span data-wow-delay=".2s" class="wow bounceInDown">Link 3</span> <span data-wow-delay=".3s" class="wow bounceInDown">Link 4</span> </div> <script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script> <script> new WOW().init(); </script> </body> </html>
+2
source share

If someone wants to use this for an animation that should start when you open the page, hover it when you scroll and start again when you scroll back , this is how I solved it.

I used what @robert used and added some refinement.

I made this fiddle for this https://jsfiddle.net/hassench/rre4qxhf/

So you go:

 var $window = $(window); var $elem = $(".my-image-container"); var $gotOutOfFrame = false; function isScrolledIntoView($elem, $window) { var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && $gotOutOfFrame); } function isScrolledOutView($elem, $window) { var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom < docViewBottom) && (elemTop < docViewTop)); } $(document).on("scroll", function() { if (isScrolledIntoView($elem, $window)) { $gotOutOfFrame = false; $elem.addClass("animate"); $(function() { setTimeout(function() { $elem.removeClass("animate"); }, 1500); }); } if (isScrolledOutView($elem, $window)) { $gotOutOfFrame = true; $elem.removeClass("animate"); } }); 
 .my-image-container { top: 50px; max-width: 22%; } .my-image-container:hover { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } .my-image-container .my-image { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; -moz-animation-delay: 1s; -webkit-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; width: 100%; } .animate { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> The animation will run when you firt open the page,<br> and when you hover it,<br> and when you scroll out then in. <br> <div class="my-image-container"> <img class="my-image" src="http://www.lifeofpix.com/wp-content/uploads/2017/05/img-5831.jpg"> </div> <br> Scroll down then back up <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> scroll up
0
source share

Is it possible to do this without JavaScript?

0
source share

More articles:


All Articles