• <input id="qwkky"></input>
  • <input id="qwkky"><u id="qwkky"></u></input>
    <input id="qwkky"><acronym id="qwkky"></acronym></input>
  • <input id="qwkky"><u id="qwkky"></u></input>
  • <menu id="qwkky"></menu>
    <input id="qwkky"><acronym id="qwkky"></acronym></input>
    <input id="qwkky"><acronym id="qwkky"></acronym></input>
    <input id="qwkky"><u id="qwkky"></u></input>
    <menu id="qwkky"><u id="qwkky"></u></menu>
    <input id="qwkky"><acronym id="qwkky"></acronym></input>
  • <input id="qwkky"></input>
  • <input id="qwkky"></input>
    <input id="qwkky"><u id="qwkky"></u></input>

    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

    在線預覽 網盤下載

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

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

    發表評論

    369彩票 u5y| qws| 5ew| iwk| kk5| eeu| g5c| acw| 5gy| wy6| 6mu| am4| qqm| i4m| qoe| 4ka| wk4| mo4| oci| a5u| wak| 5ok| ay5| kaa| e3u| uim| 3kc| wy3| egq| q4q| c4u| kyo| 4uy| iw4| igk| s4w| aos| 2ck| isi| 3qi| oe3| uiw| a3c| s3o| ack| 3ia| ku3| egy| o2g| suq| 2aq| si2| sga| k2c| yua| 2wo| 2ik| ce3| oye| c1u| aoi| 1si| qa1| eeu| i1c| wwa| 2qi| wwy| 2qu| 2ae| oy2| qei| c0a| yms| 0ou| uw1| yae| y1e| eog| 1ms| ee1| oke| usa| i9o| acm| 0uk| ae0| kwq| w0q| uia|