Question

我有一个很长的着陆页。我想应用动画（让汽车在路上移动）。道路背景的div大约在我的着陆页的中间（我必须向下滚动页面9次）我找到了在GSAP JS的帮助下为汽车的运动制作动画的方法。但我不知道如何只在我的视口将div与道路聚焦时才能使我的动画工作。我试图搜索特定的＆＃34;事件＆＃34;，但我找不到它。你能帮我找到问题的解决方案吗？

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

使用TweenMax动画快速移动jsFiddle。请参阅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();
});

Answer 2

正如评论中所提到的，一种方法是收听scroll事件并比较窗口和元素的位置。

这是一个粗略的例子。请注意，我改变了汽车的动画方式;你可以用你的功能代替它。还有两件事：我的代码只为汽车设置一次动画，一旦用户滚动离开元素，它就不会停止动画。您可以根据需要调整这些内容。

＆＃13;

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

＆＃13;

/* 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);
}

＆＃13;

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

＆＃13;

如何在某个div上应用动画？

2 个答案: