请选择 进入手机版 | 继续访问电脑版

网页UI--花瓣飘落效果

发表于 05-22 21:45 显示全部楼层 44 817

本帖最后由 赵延明老师 于 2017-5-22 21:56 编辑

简介:

我们常常看到空间里面鼠标滑过花瓣纷飞的效果,经常能激起大家的少女心。今天我们分享一款花瓣纷飞的特效。

效果:


660_400.jpg


动图效果:

ezgif.gif

视频:

技巧:

第一步:在网页文档的body结束标签之前通过script的src属性引入jquery文件。

第二步:再新建一对script标签引入jquery-mousestrom.min.js文件。

第三步:再新打一对script标签在标签内部进行书写js如下。

$(function(){    
    $('.container').mousestorm({
        images: ['shubiao/01.png', 'shubiao/02.png', 'shubiao/03.png', 'shubiao/04.png', 'shubiao/05.png'], 
        //粒子图片数组。
        opacity: [0.3, 0.96], //粒子透明度范围0.2-0.96。粒子随机透明度范围
        time: [2000, 3000], //粒子运动的时间2000-3000毫秒
        rotate: [360, 1080], //旋转度数,随机旋转
        scale: [0.4, 0.8], //粒子缩放范围 原图片的倍数0.3-0.7。粒子的随机大小范围
        diepresent: 0.2, //粒子生长到消失的范围,屏幕宽度取0.4的倍数。 数值越大粒子运动的越远,数值越小粒子运动的越近 建议0.4
        numpresent: 0.04 //粒子产生数量限制比例 数值越小 创建 的也越小,数值越大创建的也越多建议0.03
    });
})

详细代码及技巧笔记:

回复可查看全部代码演示地址和笔记: 

游客,如果您要查看本帖隐藏内容请回复

想了解更多内容,可以点击以下链接:

小码哥官网:http://www.520it.com/

网页UI学院:http://www.520it.com/special/ui


回复 使用道具
举报
跳马

发表于 09-27 10:38 显示全部楼层

回复 支持 反对 使用道具
举报
DAXIAN

发表于 08-15 22:38 显示全部楼层

666,动效好好看

回复 支持 反对 使用道具
举报
稀饭呐

发表于 08-05 16:03 显示全部楼层


回复 支持 反对 使用道具
举报
scj麦子

发表于 07-20 14:06 显示全部楼层

不错的效果极其讲解

回复 支持 反对 使用道具
举报
15015574373

发表于 07-15 18:45 显示全部楼层

要回复啥内容

回复 支持 反对 使用道具
举报
李晓芹

发表于 07-13 19:53 显示全部楼层

再新建一对script标签引入jquery-mousestrom.min.js文件。这个文件在哪里
回复 支持 反对 使用道具
举报
收起回复 展开
赵延明老师 李晓芹   发表于 07-14 08:53

回复后看隐藏的内容里面有个代码及视频。请打开并进行下载即可。

无书chen

发表于 07-13 16:44 显示全部楼层

小明老师,来拿素材的~~

回复 支持 反对 使用道具
举报
小一

发表于 07-11 20:23 显示全部楼层

666

回复 支持 反对 使用道具
举报
小一

发表于 07-11 20:23 显示全部楼层

666

回复 支持 反对 使用道具
举报
1234下一页

发表新文章
赵延明老师

小码哥名师团队

0

学分

2303

学币

2573

积分

小码哥名师团队

Rank: 5Rank: 5

积分
2573

签到周冠军勋章小码哥一周年勋章关注小码哥教育公众号意见领袖勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育