Начать анимацию при прокрутке до

Я потратил весь день на поиск простого способа начать мою анимацию после того, как прокрутил ее до определенного места на странице.Начать анимацию при прокрутке до

Мой 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; }

И мой HTML

<div class="container"> 

<div class="animation"> 

Content goes here... 

</div> 

</div>

Интересно, как сделать анимацию начала, когда я прокручиваю в классе контейнера.

источник

2015-06-12 WeBWeB

использовать JS и добавить класс Div, когда она видна на экране: HTTP://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – krzysiej

Вы можете использовать библиотеку, например https://github.com/customd/jquery-visible, вместо того, чтобы пытаться понять это самостоятельно –

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 играть (не забудьте прокрутить)

источник

2015-06-12 11:27:14 trebor

@WebWeb, вы можете попробовать это si mple формула:

$(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'); 
    }; 

})

Его в основном проверка, если окно прокрутки положение highter, чем элементы офсетных из верхней части документа (плюс высоты элементов). Его старая формула.

FIDDLE AND DEMO HERE

Если ваш ленивый, как я, хотя, вы можете пойти на waypoints.js удивительные библиотеки.

источник

2015-06-12 11:38:28

Вы можете попробовать wow.js Это быстро и просто для интеграции анимации при прокрутке, когда элемент виден на странице. Я создаю простое демо.

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

источник

2015-06-12 11:40:49

нет необходимости задумываться об этом ... просто использовать его

GITHUB

загрузить animate.css и реализовать это в

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

попробовать этот код ...

this link for more

(можно использовать эти классы)

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

источник

2016-01-10 04:12:41

Если кто-то хочет использовать это для анимации, которые должны выполняться, когда вы открыть страницу, наведите его, при прокрутке и снова запустите, когда вы прокрутите назад, вот как я его решил.

Я использовал то, что использовал @robert, и добавил некоторые уточнения.

Я сделал эту скрипку для этого https://jsfiddle.net/hassench/rre4qxhf/

Так там вы идете:

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

источник

2017-06-14 10:30:35

Начать анимацию при прокрутке до

ответ

Смежные вопросы