效果展示
整体效果类似 Wallpaper Engine
的粒子特效,实现生成随机大小、位置、速度以及透明度的粒子飘落效果
使用
复制脚本到网站的js
脚本或者能随时加载到的页面文件中(比如header
或者footer
)
if (typeof snow_interval !== 'undefined') clearInterval(snow_interval);
var $flake = $('<div id="snowbox" />').css({
'position': 'absolute',
'top': '-50px'
}).html('.')
documentHeight = $(document).height()
documentWidth = $(document).width()
minSize = 15 // 粒子最小尺寸
maxSize = 25 // 粒子最大尺寸
flakeColor = "#ffffff" // 粒子颜色
var snow_interval = setInterval(function() {
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = minSize + Math.random() * maxSize,
endPositionTop = documentHeight - 100,
endPositionLeft = startPositionLeft - 100 + Math.random() * 100,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('#banner').css({ // 特效作用于#banner
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
}, durationFall, 'linear', function() {
$(this).remove()
});
}, 1000);
若不想在一些位置显示,加入以下脚本即可
if(typeof snow_interval !== 'undefined') clearInterval(snow_interval);
大佬请问void主题的js脚本文件是哪一个呀?头图随着鼠标动是怎么设置的呢?
我这几天写个文章说一下实现
我记得有个叫snow的下雪插件,效果差不多
那个插件的雪花样式确实不错