带滚动的JavaScript汽车运动

时间:2015-09-04 08:53:32

标签: javascript jquery css html5

我们正在使用TweenMax和Scroll Magic的组合来实现汽车行驶的道路效果

这是我创造的小提琴

Car movement fiddle

如果你向下滚动然后稍微向上滚动,你会注意到汽车继续沿着道路行驶但反过来。这是因为汽车的方向与鼠标的最后滚动方向相关联。 我们希望通过以下功能来改进汽车在网站上的驾驶方式。我已经使用过Psudo Code,因为我认为我想到的逻辑是正确的我只是不知道正确的命令/函数/语法。当然,如果有人有更优雅的建议,我会全力以赴。

(了解在http://rit-team.ru/上改变方向时汽车如何互动)

Var CarDirection =“S” - 车辆方向设置为南

Upon Mouse Scroll()
{
VehicleYPosition = Get Current Object Position() // This is the current  location of the car on the page. even if it is mid tween.
ScrollYPosition = Get Current Scroll Position() // This tells us where the scroll is currently on the page. I know this relates to scroll magic but if you can advise on this too it would be really appreciated.

If MouseScroll = Up AND CarDirection = “S” AND VehicleYPosition + 20 < ScrollYPosition{
    Stop Current Tween ()
    RunFigure8 Tween (CarDirection) // this would consist of using the car’s current position and direction to drive in a figure 8 motion to turn the car around (see http://rit-team.ru/)
    CarDirection = “N” // Change the orientation of the car
    RunRegularTweenFunction()   // The car will then continue driving to the correct scroll location 
}

If MouseScroll = Down AND CarDirection = “N” AND VehicleYPosition - 20 > ScrollYPosition{
    Stop Current Tween ()
    RunFigure8 Tween (CarDirection)
    CarDirection = “S”
    RunRegularTweenFunction()   
}

}

谢谢

0 个答案:

没有答案