Как применить анимацию к определенному div?

Question

У меня очень длинная целевая страница. Я хочу применить анимацию (чтобы автомобиль двигался по дороге). Div на фоне дороги примерно посередине моей целевой страницы (мне нужно прокручивать страницу по 9 раз). Я нашел способ оживить движение автомобиля с помощью GSAP JS. Но я понятия не имею, как сделать анимацию только тогда, когда мой видовой экран фокусирует div на дороге. Я попытался найти конкретное «событие», но я не смог его найти. Можете ли вы помочь мне найти soluton моей проблемы?

$(document).ready(function(){ 
TweenMax.to(document.getElementById("car"), 5, {bezier:{type:"cubic", values: 
[{x:100, y:250}, {x:400, y:0}, {x:300, y:500}, {x:500, y:400}], 
autoRotate:["x","y","rotation", 0, true]}, ease:Power1.easeInOut}); 
}); 

Answer 1

Как уже было упомянуто в комментариях, один подход слушать scroll события и сравнить положение окна и элемента.

Вот пример. Обратите внимание, что я изменил способ анимации автомобиля; вы можете заменить его своей функцией. Еще две вещи: мой код только анимирует автомобиль один раз, и он не останавливает анимацию, как только пользователь прокручивается от элемента. Вы можете настроить эти вещи в соответствии с вашими потребностями.

function AnimateIfUserHasSeenCar() { 
 
    if ($(window).scrollTop() + $(window).height() > $("#car").position().top) { 
 
     $("#car").addClass("go"); //Replace this with how you create the anitmation 
 
    } 
 
} 
 

 
$(document).ready(AnimateIfUserHasSeenCar); 
 
$(document).scroll(AnimateIfUserHasSeenCar);

/* All these CSS rules should be unnecesary for you. They are either for the animation or to set up the position of the car */ 
 
.spacer { 
 
    height:1000px; 
 
} 
 
#car { 
 
    transition: transform 2s; 
 
    height:120px; 
 
    width:150px; 
 
} 
 
#car img { 
 
    width:100%; 
 
} 
 
#car.go { 
 
    transform:translatex(400px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="spacer"></div> <!-- This is just to cause the #car to be offscreen at first --> 
 
<div id="car"> 
 
    <img src="http://fc06.deviantart.net/fs70/f/2010/321/d/e/my_lego_car_side_veiw_by_kotetsuninja-d332j6f.png" /> 
 
</div>

Answer 2

Сделано быстрый автомобиль движущийся jsFiddle используя TweenMax animation.Refer jsFiddle код. Надеюсь, поможет.

HTML:

<div id="car"> <img src="http://fc06.deviantart.net/fs70/f/2010/321/d/e/my_lego_car_side_veiw_by_kotetsuninja-d332j6f.png" style="height:200px;width:250px;"/></div> 

<button id="chk">play</button> 

JS:

$("#chk").on('click',function(){ 
    carplay(); 
});