js 落叶动效

web H5 落叶动效js代码

$(function() {
    var d = "<div class='maple'>*<div>";
    setInterval(function() {
        var f = $(document).width();
        var e = Math.random() * f - 300; // 枫叶的定位left值
        var o = 0.2 + Math.random(); // 枫叶的透明度
        var fon = 20 + Math.random() * 40; // 枫叶大小
        var l = e - 100 + 200 * Math.random(); // 枫叶的横向位移
        var k = 2000 + 5000 * Math.random();
        var deg = Math.random() * 360; // 枫叶的方向
        $(d).clone().appendTo(".maplebg").css({
            left: e + "px",
            opacity: o,
            transform: "rotate(" + deg + "deg)",
            "font-size": fon,
        }).animate({
            top: "150px",
            left: l + "px",
            opacity: 0.1,
        }, k, "linear", function() {
            $(this).remove()
        })
    }, 1000)
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 随着技术革新,市场上产品日益成熟,并且趋于同质化,同时用户对于产品细节的感知度和挑剔程度也日益剧增,越来越多的产品...
    rizzaliang阅读 1,722评论 0 4
  • 历时两个月断断续续终于整理完了这篇文章,希望能对大家工作中遇到的一些问题有所帮助(多图慎点)* 部分素材来源网络(...
    Jadon7阅读 2,171评论 6 8
  • Orgami 2.0 发布已经有一段时间了,其中最让我关注的,就是它 Code Export 的功能:按照官方的说...
    镇雷阅读 1,324评论 2 7
  • 现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用。我一般...
    南波万的学分阅读 524评论 0 1
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,566评论 16 22