Javascript 创造动人的风景

正在测试前端以创建我自己的交互式投资组合网站：

我正试图创造一个我自己的故事，用建筑物和移动的汽车固定在集装箱上，所有的工作都基于滚动位置。我使用的是香草JS、JQuery、GSAP和ScrollMagic

那么，您将如何解决这个问题（考虑到我是一名低技能到中等技能的程序员）

---

<>谢谢。

< P>我相信在我们的时代开发任何东西时，首先要考虑移动优先的方法，尤其是“酷的设计应用程序”。

此外，您可能希望在一些在线代码编辑器中进行开发，您可以共享这些编辑器，并就个别问题征求他人的意见或帮助

下面是一个活生生的例子，你的工作嵌入在一个剪报

欢迎您清理被剪掉的代码，然后纠正您的问题，并适当引用您尝试过但可能失败的代码，或者寻求第二种意见

$（'body'）.css（{'overflow'：'hidden'}）；
$（文档）.bind（'scroll'，函数（）{
滚动到（0,0）；
});
//控制器初始化
var controller=new ScrollMagic.controller（）；
//Var声明
const vw=window.innerWidth；
//const vh=窗内高度；
const menu=document.querySelector（“#menu”）；
const hello=document.querySelector（'#hello'）；
const mouse=document.getElementsByClassName（'mouse'）；
const about=document.querySelector（“#about”）；
const deskItems=document.getElementsByClassName（'desk-items'）；
const deskImac=document.querySelector（“#deskImac”）；
const deskKeyboard=document.querySelector（“#deskKeyboard”）；
const deskMouse=document.querySelector（“#deskMouse”）；
const deskBook=document.querySelector（“#deskBook”）；
const deskPen=document.querySelector（“#deskPen”）；
const deskPhone=document.querySelector（“#deskPhone”）；
const deskCoffee=document.querySelector（“#deskCoffee”）；
const story=document.querySelector（“#story”）；
const roadItems=document.getElementsByClassName（'road-items'）；
const roadSky=document.querySelector（“#road_sky”）；
设roadSkyWidth=roadSky.offsetWidth；
//初始动画
TweenMax.set（大约，{autoAlpha:0}）；
TweenMax.set（deskItems，{autoAlpha:0}）；
TweenMax.set（hello，{opacity:0}）；
//时间线
var menu_tween=新的TimelineMax（）；
菜单（您好，2，{xPercent:-20，yPercent:50，比例：0.94}）
.to（大约，2，{autoAlpha:1}）
.fromTo（deskImac，2，{xPercent:140，yPercent:-100，rotation:-7}{
经验：162，
yPercent:-10，
轮换：11，
ease:Power1.easeOut，
自动阿尔法：1
}, "-=1.6")
.fromTo（桌面键盘，2，{xPercent:0，yPercent:-100，旋转：-15}{
X百分比：128，
yPercent:38，
轮换：4，
ease:Power3.easeOut，
自动阿尔法：1
}, "-=1.4")
.fromTo（桌面鼠标，2，{xPercent:260，yPercent:-100，旋转：0}{
经验：195，
yPercent:68，
轮换：20，
ease:Power3.easeOut，
自动阿尔法：1
}, "-=1.5")
.fromTo（deskBook，1.5，{xPercent:20，yPercent:-100，旋转：0}{
经验：32，
yPercent:-10，
轮调：-6，
ease:Power1.easeOut，
自动阿尔法：1
}, "-=2.2")
.fromTo（桌面笔，1.5，{X百分比：50，Y百分比：-100，旋转：199}{
经验：34，
yPercent:-16，
轮换：192，
ease:Power2.easeOut，
自动阿尔法：1
}, "-=1.8")
.fromTo（桌面电话，1.5，{xPercent:280，yPercent:24，轮换：0}{
X百分比：230，
yPercent:32，
轮调：-9，
ease:Power3.easeOut，
自动阿尔法：1
}, "-=1.4")
.fromTo（桌面咖啡，1.5，{X百分比：75，Y百分比：-100，轮换：-12}{
经验：87，
yPercent:-2，
轮换：4，
ease:Power2.easeOut，
自动阿尔法：1
}, "-=1.3")
.to（menu，0.8，{delay:0.8}）；
var story_tween=新的TimelineMax（）；
to之间的故事（roadSky，5{
ease:Linear.ease无，
x:“-=”+vw，
修改器：{
x：功能（x）{
返回x%的路宽；
}
},
重复：-1
});
//动画的运动
var sub_tween=TweenMax.to（鼠标，0.5，{yPercent:-25，autoAlpha:0，不透明度：0}）；
$（文档）.ready（函数（）{
$（“.preload”）.fadeOut（'slow'，function（）{
//动画初始化
TweenMax.to（你好，3，{opacity:1}）；
TweenMax.to（鼠标，1.6，{yPercent:-50，不透明度：1，延迟：0.5，自动α：1}）；
$（文档）。解除绑定（“滚动”）；
$（'body'）.css（{'overflow'：'visible'}）；
});
});
//滚动动画
新的ScrollMagic.Scene（{offset:1，duration:850，reverse:true}）
.setPin（菜单，{pushFollowers:false}）
.setTween（菜单\u tween）
.addIndicators（{name:“Menu”}）
.addTo（控制员）；
新的ScrollMagic.Scene（{offset:1，duration:50}）
.setTween（sub_tween）
.addIndicators（{name:“Sub tween”}）
.addTo（控制员）；
新的ScrollMagic.Scene（{偏移量：1600，持续时间：500}）
.setPin（故事，{pushFollowers:false}）
.setTween（故事情节）
.addIndicators（{name:“Story”}）
.addTo（控制员）
导入url（'//fonts.googleapis.com/css？family=Roboto:100300400500700900'）；
html，正文{
背景色：#2196F3；
身高：100%；
}
.mouse{
/*隐藏鼠标*/
不透明度：0；
}
.预载机*{
-webkit转换：无！重要；
-moz转换：无！重要；
-ms过渡：无！重要；
-o-过渡：无！重要；
}
.预载机{
溢出：隐藏；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
嗨