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

我有一个很长的登录页。我想应用动画使汽车在路上移动。道路背景的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});
});

使用TweenMax动画使汽车快速移动。参考JSFIDLE代码。希望能有帮助

HTML:

---

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

这里有一个粗略的例子。请注意，我改变了汽车的动画方式；你可以用你的函数来代替它。还有两件事：我的代码只为汽车设置一次动画，当用户滚动离开元素时，它不会停止动画。你可以根据需要调整这些东西

函数animateIfuserHassenCar{ 如果$window.scrollTop+$window.height>$car.position.top{ $car.addClassgo；//将其替换为创建anitmation的方式 } } $document.ready animateifuserhassencar； $document.scroll animateIfuserHasserEncar； /*所有这些CSS规则对您来说都是不必要的。它们要么用于动画，要么用于设置汽车的位置*/ .垫片{ 高度：1000px； } 汽车{ 转变：转变2s； 高度：120px； 宽度：150px； } 汽车img{ 宽度：100%； } 汽车，加油{ 转换：translatex400px； }

---

我想你需要在窗户上听一下这件事，然后用它来看看路是否在视野之内。

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

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