Skip to content

Cloudtq/bilibili-banner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

bilibili-banner

偶然看到 b 站 首图的动画效果,觉得很有趣,网上找资料仿写了一下,打算把四季的都收集起来,目前只有春、秋、冬,缺一个夏,应该快来了吧(2021-4-20)

spring

spring

spring

实现原理

简单说一下实现原理: 首先这种效果是通过多个图层的不同速度的移动,造成的视觉差效果,看起来非常好看。

一、通过调整不同图层的前后层级,还有初始位置。

二、通过监听鼠标进入,移动,移出事件,对图层的tranlateX(offset)与透明度进行修改。

三、修改tranlate与透明度的方式有两种:
    1、通过在js使用变量保存到css中,用css的calc计算得出偏移量。
    2、直接通过js计算,然后用js操作对象的css属性。

四、春、冬的樱花与雪花效果网上的具体实现有很多。

五、鼠标在移出时,需要将图层恢复到移动前的初始状态,因此需要加上一个过渡效果,让其平滑的恢复。

六、由于鼠标移出添加的过渡效果,在下一次鼠标进入时需要清除掉,不然会因此过渡效果出现卡顿。

七、秋的效果还需要添加高斯模糊的效果,通过一个二次函数,使其移动到两边时,blur的值变大,模糊加深,在中间blur小,清晰。

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published