声之形编写


声之形这个官网是我没事点开看到的,风格我也感觉不错,其中有几处用到了JS,正好我也在学习JS,我便以声之形官网作为实战练习。最开始页面布局什么的一切顺利,但小毛病不少,然后把布局这些毛病排除后,就正式搞JS了。在编写JS过程中,我就开始晕头转向,不知从何下手,就连思路也很混乱。当时给我的感觉就是,JS学了当没有学一样,好在身边有一位会码代码的朋友在。
最开始做的是让第一张图片自动渐变为0,然后是导航栏,导航栏中有一个自动获取当前时间,然后是自动获取窗口高度和长度,就这三个JS就把我难住了,学得时候没认真和写得太少。

然后是人物渐变为1的效果,原理和第一张图是一样的,接下来是返回首页效果,在这个网页中,我认为这个效果是最难的,首先要获取滚动条的滚动距离,然后渐变为0或1,然后抵达脚步蓝色区域时,要变成白色效果。在这里又要计算一次,用当前窗口减去脚步高度再加返回顶部自身的高度。

接着是第二个导航栏,这里的效果是一直浮在窗口固定位置,这里和返回顶部效果差不多,也是先获取滚动次数,然后用整个页面减去一个窗口再加自身高度,再判断小于固定高度时,就停止执行。

经过一个多月的时间,在朋友的帮助下,页面总算是完成了,下面就是效果图,点击图片进入网页。