这是一款效果非常炫酷的jQuery和CSS3网页背景粒子动画特效。该背景特效中粒子可以使用鼠标来进行互动,并且在粒子运动的过程中带有一些视觉差特效。
制作方法
HTML结构
这个背景粒子动画特效的HTML结构使用的是一个无序列表。每一个列表元素是一个层,在每一个层中放置一张粒子图片。data-depth
属性设置了各个图层的深度。
CSS样式
这个背景粒子动画特效的CSS样式非常简单。整个用于制作背景粒子动画的无序列表被设置为100vw和100vh,使它和视口宽度和高度相同。z-index
设置为999,如果你要在背景上放置元素,z-index
要比999高。
#specks { position: absolute; z-index: 999; height: 100vh; width: 100vw; }
.speck
是用于动画的粒子,它的样式如下:
.speck { opacity: 0; height: 4px; width: 4px; background: url('../img/speck_zpsu9xym9zl.png'); background-size: cover; position: absolute; border-radius: 10px; z-index: 99; }
所有的图片都被设置了非常大的宽度和高度,开始时,top
和left
分别为-8500px和-8000px,然后它们被执行float
动画,使用transform:translate(8000px, 4000px);
使图片从左上角向右下角运动。
.img { position: absolute; height: 100000px; width: 100000px; top: -8500px; left: -8000px; animation-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); animation-name: float; animation-iteration-count: infinite; } @keyframes float { 0% { transform: translate(0px, 0px); } 100% { transform:translate(8000px, 4000px); } }
JAVASCRIPT
背景粒子的视觉差效果使用的是parallax.js
来完成。在jQuery代码中,使用twinkle()
函数来随机生成一些闪烁的粒子。这些粒子生成后或执行twinkle
CSS动画,它们会由透明变为75%透明度,在变为完全透明,在这个过程中会移动一段距离,形成以淡入,移动一段距离,在淡出的效果。
function twinkleLoop(i) { var duration = Math.random() * 5 + 3; duration = duration - (495 - speed) / 100; twinkle(i, duration); setTimeout(function () { twinkleLoop(i); }, duration * 1000); } function twinkle(id, duration) { var top = Math.floor(Math.random() * 85) + 0 + '%'; var left = Math.floor(Math.random() * 85) + 0 + '%'; $('#speck' + id).remove(); $('#specks').append(''); $('#speck' + id).css({ 'top': top, 'left': left, 'animation-duration': duration + 's', 'animation-timing-function': 'cubic-bezier(0.250, 0.250, 0.750, 0.750)', 'animation-name': 'twinkle' }); }
具体js代码前参考下载文件。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!