<samp id="0l9hf"></samp>
<td id="0l9hf"><option id="0l9hf"></option></td>

  • HTML5-Canvas炫酷粒子鼠標跟隨動畫特效插件

    這是一個基于畫布的基于氣泡??的酷炫鼠標動畫效果。粒子通過js代碼跟隨動畫效果,在畫布上隨機生成粒子效果,并使粒子在鼠標移動后移動。

    使用方法

    在頁面中引入stopExecutionOnTimeout.js文件。

    <script src="js/stopExecutionOnTimeout.js" type="text/javascript"></script>
    HTML

    在頁面中創建一個canvas。

    <canvas></canvas>
    CSS

    為canvas添加下面的CSS樣式。

    html{
      margin: 0;
      padding: 0;
      border: 0;
      font-family:  sans-serif;
    }
    
    canvas{
      margin: 0;
      padding: 0;
      display: block;
      touch-action: none;
    }
    JavaScript

    在頁面DOM元素加載完畢之后,通過下面方法來制作粒子跟隨鼠標效果。

    var canvas = document.querySelector('canvas');
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    c = canvas.getContext('2d');
    
    window.addEventListener('resize', function () {
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
    
        initCanvas();
    });
    
    var mouse = {
        x: undefined,
        y: undefined };
    
    window.addEventListener('mousemove',
    function (event) {
        mouse.x = event.x;
        mouse.y = event.y;
        drawCircles();
    });
    
    window.addEventListener("touchmove",
    function (event) {
        let touch = event.touches[0];
        mouse.x = touch.clientX;
        mouse.y = touch.clientY;
        drawCircles();
    });
    
    function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.minRadius = radius;
        this.vx = vx;
        this.vy = vy;
        this.birth = birth;
        this.life = life;
        this.opacity = opacity;
    
        this.draw = function () {
            c.beginPath();
            c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
            c.fillStyle = 'rgba(' + rgb + ',' + this.opacity + ')';
            c.fill();
        };
    
        this.update = function () {
            if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
                this.vx = -this.vx;
            }
    
            if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
                this.vy = -this.vy;
            }
    
            this.x += this.vx;
            this.y += this.vy;
    
            this.opacity = 1 - (frame - this.birth) * 1 / this.life;
    
            if (frame > this.birth + this.life) {
                for (let i = 0; i < circleArray.length; i++) {
                    if (this.birth == circleArray[i].birth && this.life == circleArray[i].life) {
                        circleArray.splice(i, 1);
                        break;
                    }
                }
            } else {
                this.draw();
            }
        };
    
    }
    
    var circleArray = [];
    
    function initCanvas() {
        circleArray = [];
    }
    
    var colorArray = [
    '355,85,80',
    '9,80,100',
    '343,81,45'];
    
    function drawCircles() {
        for (let i = 0; i < 6; i++) {
            let radius = Math.floor(Math.random() * 4) + 2;
            let vx = Math.random() * 2 - 1;
            let vy = Math.random() * 2 - 1;
            let spawnFrame = frame;
            let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
            let life = 100;
            circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));
    
        }
    }
    
    var frame = 0;
    function animate() {
        requestAnimationFrame(animate);
        frame += 1;
        c.clearRect(0, 0, innerWidth, innerHeight);
        for (let i = 0; i < circleArray.length; i++) {
            circleArray[i].update();
        }
    
    }
    
    initCanvas();
    animate();
    
    // This is just for demo purposes :
    for (let i = 1; i < 110; i++) {
        (function (index) {
            setTimeout(function () {
                mouse.x = 100 + i * 10;
                mouse.y = 100;
                drawCircles();
            }, i * 10);
        })(i);
    }

    原文地址:https://codepen.io/sedran/pen/oaOyvK

    在線預覽 網盤下載

    查看如下隱藏內容里的“提取碼”:

    關注公眾號關注公眾號
    關注公眾號,發送消息“查看密碼”,輸入系統回復的“查看密碼”,點擊“確定”按鈕,即可看到“提取碼”。

    鄭重聲明:

    1 本資源來源于互聯網,資源的版權歸資源原作者所持有,受《中華人民共和國著作權法》等相關法律保護。

    2 由于無法和原作者取得聯系,所以上傳的部分資源無法先通過原作者的同意就分享給大家了,如本資源侵犯了您(原作者)的權益,請聯系我們(微信號 wenyan90s),我們會立馬刪除您的資源,并向您表達誠摯的歉意!

    3 本站是一個公益型網站,分享資源的目的在于傳播知識,分享知識,收取一點點打賞的辛苦費是用于網站的日常運營開支,并非用于商業用途。

    4 本站資源只提供學習和參考研究使用,使用過后請在第一時間內刪除。本站不承擔資源被單位或個人商用帶來的法律責任。

    發表評論

    電子郵件地址不會被公開。

    Captcha Code

    国产精品午夜福利在线观看,av色片在线观看,男生看的黄色网站在线,黄片a片视频黄色
    <samp id="0l9hf"></samp>
    <td id="0l9hf"><option id="0l9hf"></option></td>