Avvia l'animazione quando si scorre su

Ho passato tutto il giorno alla ricerca di un modo semplice per avviare l'animazione dopo averlo spostato in un punto specifico della pagina.Avvia l'animazione quando si scorre su

mio 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; }

E il mio HTML

<div class="container"> 

<div class="animation"> 

Content goes here... 

</div> 

</div>

mi chiedo come fare l'animazione inizia quando ho scorrere al contenitore di classe.

fonte

2015-06-12 WeBWeB

uso js e aggiungere classe a div quando è visibile sullo schermo: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – krzysiej

Potresti usare una libreria come https://github.com/customd/jquery-visible invece di cercare di capirlo da solo –

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 per giocare con (non dimenticare di scorrere)

fonte

2015-06-12 11:27:14 trebor

@WebWeb, si può provare questo si mple 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'); 
    }; 

})

sua fondamentalmente controllare se le finestre posizione di scorrimento è superiore anche quella degli elementi di offset dalla parte superiore del documento (più l'altezza elementi). È una formula vecchiaia.

FIDDLE AND DEMO HERE

Se il vostro pigri come me, però, si può andare per waypoints.js una libreria stupefacente.

fonte

2015-06-12 11:38:28

Puoi provare wow.js è semplice e veloce integrare l'animazione sullo scorrimento quando l'elemento è visibile sulla pagina. Creo una demo semplice.

<!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>

fonte

2015-06-12 11:40:49

non c'è bisogno di chiedersi a questo proposito ... basta usarlo

GITHUB

scaricare animate.css e implementare questo 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>

prova questo codice ...

this link for more

(queste classi possono essere utilizzati)

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

fonte

2016-01-10 04:12:41

Se c'è qualcuno vuole usare questo per un'animazione che dovrebbe funzionare quando si apre la pagina, librarsi, quando si scorre e corri di nuovo quando scorri indietro, ecco come ho risolto.

Ho usato ciò che @robert ha utilizzato e aggiunto alcuni perfezionamenti.

Ho fatto questo violino per questo https://jsfiddle.net/hassench/rre4qxhf/

Così ci si va:

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

fonte

2017-06-14 10:30:35

Avvia l'animazione quando si scorre su

risposta

Problemi correlati