parallax.js-视差滚动

发布于 15 天前  82 次阅读


parallax

parallax是一个轻级量视差滚动脚本,为什么我来钻研他呢?因为我看到了白猫大佬最新做出来的一个开源项目“H5 复刻版明日方舟游戏主界面 ”https://ak.2heng.xin/,鼠标移动时所有div都会随机移动,于是我开始了钻研,百度到"传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的,而视差滚动则是在滚动的时候,内容和多层次的背景实现或不同速度,或不同方向的运动。有的时候也可以加上一些透明度、大小的动画来优化显示。"----嗯,找对了,应该就是这个,在看看其他的,找到真正的使用方法:

使用步骤:
只需创建一个列表,给每个项目要内移动您的视差场景一类层和数据深度属性指定场景内的深度的元素。深度0,将导致层保持静止,深度为1,将导致层移动至所计算的运动的总效应。值插图中0和1,会造成层移动相对于所提供的比例。

唉,我看看他的代码里有没有!
(以下是一部分代码)

<div id="char-arts-layer" class="layer" data-depth="0.01">
<div class="char perspective box">
<img src="img/char_010_chen_2b_merged.png">
</div>
</div>
<div id="left-menu-layer" class="layer" data-depth="0.2">
<div class="left menu box">
<div class="container" id="left-mune-adapter">
<div class="top">
<div class="dialog">
<span>博士?睡着了?哼,真没紧张感。</span>
</div>
</div>

<script>
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);
</script>

对了,就是这样用的,只要把0~1想浮动的程度写上去就ok了,如:data-depth="0.2"
所以,并不难,(感觉又可以开坑了,我也想来做一个 Skr~)
实际操作还是忒难了,因为CSS精灵得原因让我放弃了,做了五分之一awa(素材都找好了)
看来我挖的这个坑是能填上了


一个渣渣,但还是向往着折腾