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

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

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

javascript animation jquery css gsap
person Ruslan Doronichev    schedule 10.12.2014    source источник
comment
Я думаю, вам нужно прослушать событие scroll в окне, а затем использовать position(), чтобы узнать, находится ли дорога в поле зрения.   -  person Rhumborl    schedule 10.12.2014

Ответы (2)


arrow_upward
0
arrow_downward

Как упоминалось в комментариях, один из подходов состоит в том, чтобы прослушивать событие 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>

person Marcelo    schedule 10.12.2014

arrow_upward
0
arrow_downward

Быстрое движение автомобиля jsFiddle с использованием анимации TweenMax. См. код 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();
});
person Dave    schedule 10.12.2014