下载鸥 > 网站下载 > 开发教程 > JS/JQuery

全屏散落樱花/雪花的js特效

35 2024-06-26 18:00:02

收藏
全屏散落樱花/雪花的js特效
很多人看腻了平平无奇的站点,想要给网站加点动画。但加动画,又不希望占用太多资源,那么可以试试这款樱花特效。
 

html部分

<!--樱花开始-->
<canvas id="Snow" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;background: rgba(125,137,95,0.1);pointer-events: none;" width="1920" height="873"></canvas>
 

js部分


if (true) {
    (function () {
        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
        window.requestAnimationFrame = requestAnimationFrame;
    })();

    (function () {
        var flakes = [],
            canvas = document.getElementById("Snow"),
            ctx = canvas.getContext("2d"),
            flakeCount = 200,
            mX = -100,
            mY = -100;

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        function snow() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (var i = 0; i < flakeCount; i++) {
                var flake = flakes[i],
                    x = mX,
                    y = mY,
                    minDist = 150,
                    x2 = flake.x,
                    y2 = flake.y;

                var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                    dx = x2 - x,
                    dy = y2 - y;

                if (dist < minDist) {
                    var force = minDist / (dist * dist),
                        xcomp = (x - x2) / dist,
                        ycomp = (y - y2) / dist,
                        deltaV = force / 2;

                    flake.velX -= deltaV * xcomp;
                    flake.velY -= deltaV * ycomp;

                } else {
                    flake.velX *= .98;
                    if (flake.velY <= flake.speed) {
                        flake.velY = flake.speed
                    }
                    flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
                }

                ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
                flake.y += flake.velY;
                flake.x += flake.velX;

                if (flake.y >= canvas.height || flake.y <= 0) {
                    reset(flake);
                }

                if (flake.x >= canvas.width || flake.x <= 0) {
                    reset(flake);
                }

                ctx.beginPath();
                ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
                ctx.fill();
            }
            requestAnimationFrame(snow);
        };

        function reset(flake) {
            flake.x = Math.floor(Math.random() * canvas.width);
            flake.y = 0;
            flake.size = (Math.random() * 3) + 2;
            flake.speed = (Math.random() * 1) + 0.5;
            flake.velY = flake.speed;
            flake.velX = 0;
            flake.opacity = (Math.random() * 0.5) + 0.3;
        }

        function init() {
            for (var i = 0; i < flakeCount; i++) {
                var x = Math.floor(Math.random() * canvas.width),
                    y = Math.floor(Math.random() * canvas.height),
                    size = (Math.random() * 3) + 2,
                    speed = (Math.random() * 1) + 0.5,
                    opacity = (Math.random() * 0.5) + 0.3;

                flakes.push({
                    speed: speed,
                    velY: speed,
                    velX: 0,
                    x: x,
                    y: y,
                    size: size,
                    stepSize: (Math.random()) / 30 * 1,
                    step: 0,
                    angle: 180,
                    opacity: opacity
                });
            }

            snow();
        };

        document.addEventListener("mousemove", function (e) {
            mX = e.clientX,
                mY = e.clientY
        });
        window.addEventListener("resize", function () {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
        init();
    })();
}

完成以上两步,如果是静态站点刷新页面,动态站点清理缓存,就可以看到樱花/雪花缓缓下落的效果。

本文地址:https://xzo.com.cn/develop/js/1325.html

有帮助,很赞!

信息来源:下载鸥
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
JS怎样做倒计时效果?
JS怎样做倒计时效果?

在各种盛大的节日、活动前,网站制作倒计时特效可有效给活动页引流。那么,怎样...

1 397
JavaScript过滤XSS攻击方法
JavaScript过滤XSS攻击方法

什么是XSS?XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个...

1 320
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 502
$(window).height() 和 $(document).height()有什么不同?
$(window).height() 和 $(document).height()有什么不同?

我们常用$(window).height() 和 $(document).height()来监听当前高度,但这个...

1 330
JS点击复制data-*属性(支持多个元素)
JS点击复制data-*属性(支持多个元素)

分享一段js原生点击复制data-*属性的源码,根据onclick事件触发,复制当前元素...

0 337
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 519
js网站视频播放器ckplayer和dplayer优缺点分析
js网站视频播放器ckplayer和dplayer优缺点分析

dplayer和ckplayer都是非常流行的web视频播放器,二者都占有相当大的用户市场...

0 1454
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 414
推荐插件
帝国cms网站会员登录与退出历史记录日志插件
帝国cms网站会员登录与退出历史记录日志插件

帝国cms默认只有上次登录时间与ip,没有一个记录清单,所以今天,我们分享这个帝...

0 279
帝国cms联想词搜索高级搜索插件下载
帝国cms联想词搜索高级搜索插件下载

帝国CMS自带的搜索功能虽然强大,但也有很强的局限性 -- 必须关键词完全匹配...

0 628
帝国CMS内网用户静态站点文章访客统计插件
帝国CMS内网用户静态站点文章访客统计插件

本插件适用于内网用户,可查看单篇文章访问者ip地址。如果添加访问者ip组,可查...

0 459
帝国cms智能自动审核按星期几审核指定栏目带推送插件
帝国cms智能自动审核按星期几审核指定栏目带推送插件

采集站的必备资源是自动审核,要做到日收录也离不开定时发布。而本插件的自动...

0 1147
帝国cms自动给正文关键词添加tag内链
帝国cms自动给正文关键词添加tag内链

帝国cms有自带的给关键词添加内链功能,但需要手动添加关键词,容易出现疏漏和...

0 669
帝国cms多栏目多数据表自动审核推送插件
帝国cms多栏目多数据表自动审核推送插件

本插件基于帝国cms帝国cms每日自动审核插件,在自动审核指定条数信息的基础上...

0 797
帝国cms百度文字识别ocr接口对接插件
帝国cms百度文字识别ocr接口对接插件

许多网站会做一些小功能小插件给客户使用以增强用户黏性,比如图片转文字,这种...

0 376
帝国cms百度AI图像清晰度增强api接口对接插件
帝国cms百度AI图像清晰度增强api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...

0 417
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入