984| 1
|
修改完善了一个可互动的动态背景-几何粒子星空连线 |
[i=s] 本帖最后由 TRIM 于 2024-3-8 12:04 编辑 [/i]使用效果这个帖子就是其中一个最好的效果! 如果你想看浅色主题下的效果,请移步至 浅色主题应用效果
这个背景起初是我在CSDN上看到的:javascript实现几何粒子星空连线背景效果但是,在使用过程中,发现了以下问题: 1.在原代码中,粒子在鼠标一定范围内会被吸引,但当鼠标悬停过长时间,粒子会聚集在鼠标周围“鬼畜”想出了一个办法:在drawLine函数中传入粒子运动的dx和dy(xy方向位移变化量),计算出角度,若粒子与鼠标连线和这个角度的夹角大于90度,则不吸引(修改后代码第111~123行) 这样一来,粒子在飞向鼠标时会与鼠标互动,飞出鼠标方向后便不会被一直“拽着”,互动的效果更好了 2.作者设置粒子碰到边缘反弹,我认为不反弹,将粒子显现出飞入飞出的效果会更好但发现如果碰到边缘后粒子马上消失,连线也会瞬间断掉,更加生硬了...... 只好“扩展”了画布,大小往两边100。并且在y轴的出现消失位移上做了优化,同时也方便了对第3点的改进(修改后代码第77~93行) 这样,粒子可以自由飞出屏幕,移动至另一边相对位置再飞入,“广阔”的感觉就出来了 3.在滚动页面时背景不会动,略显单调添加了页面滚动时粒子在y方向的位移,移动距离为页面滚动距离的1/5,凸显层次感 另外,还修了一些原有的小bug,随机粒子大小等...... 不管怎么说,这东西在修改后可以直接拿去用啦!效果超级棒! ↓ 在下面下载修改后的文件和代码 ↓ |
效果
7.58 KB, 下载次数: 2382
© 2013-2024 Comsenz Inc. Powered by Discuz! X3.4 Licensed