飘落动画效果插件引用:
<script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>
注意:需要引用jQuery,要在插件之前引用安装。
// 当窗口尺寸改变时重新执行函数,避免出现不好的用户体验
// 因比较消耗cpu,本站没有采用这种方式
function floated(){
$(document).snowfall('clear');
$(document).snowfall({
image: "imageURL",
flakeCount: 66, // 展示飘落数目
minSize: 6, // 最小尺寸
maxSize: 24 // 最大尺寸
});
}
floated();
$(window).resize(function(){ // 监听页面尺寸
floated();
})
效果图:(可参考本站效果图)