RIUS GREY Blog


BLOG CHIA SẼ THỦ THUẬT - ẢNH BÌA MIỄN PHÍ

Code Tạo Hiệu Ứng Pháo Hoa Cho Blogspot Trang Trí Tết 2019 | RIUSGREY

Tết cổ truyền (Tết âm lịch) đang ngày một đến gần. Bạn đã chuẩn bị được những gì cho Blog/Website của mình để chào đón Tết cổ truyền (Tết âm lịch) 2019 này? Khoác cho Blog/Website một bộ cánh mới có chủ đề về Tết cổ truyền (Tết âm lịch) là việc mà nhiều người thường làm.
Tuy nhiên, việc thay Template mới sẽ khá tốn thời gian, công sức và có thể khiến Blog/Website của bạn rớt hạng trên bảng kết quả tìm kiếm. Trong trường hợp này, tạo hiệu ứng bắn pháo hoa ngay trên giao diện mà bạn đang sử dụng để mang một chút không khí Tết cổ truyền (Tết âm lịch) vào Blog/Website là một ý tưởng không hề tồi. Hãy cùng RIUSGREY đóng tết 2019 nhiều thành công



HƯỚNG DẪN CÁCH LÀM:

Bước 1: Dán css này vào trước thẻ </head>

<style type='text/css'>
canvas{
cursor:crosshair;
position:fixed;
width:100%;
height:100%;
background:none;
display:block

</style>

BƯỚC 2: DÁN ĐOẠN html NÀY VÀO sauTHẺ <BODY>

<canvas height='900' id='canvas' style='position:fixed;width:100%;pointer-events:none;z-index:9999;' width='1440'/>

BƯỚC 3: DÁN đoạn javascript NÀY VÀO TRƯỚC THẺ </body>

<script type='text/javascript'>
      //<![CDATA[
      window.requestAnimFrame = ( function() {
        return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          function( callback ) {
          window.setTimeout( callback, 1000 / 60 );
        };
      })();
var canvas = document.getElementById( 'canvas' ),
    ctx = canvas.getContext( '2d' ),
    cw = window.innerWidth,
    ch = window.innerHeight,
    fireworks = [],
    particles = [],
    hue = 120,
    limiterTotal = 5,
    limiterTick = 0,
    timerTotal = 30,
    timerTick = 0,
    mousedown = false,
    mx,
    my;
      canvas.width = cw;
      canvas.height = ch;
      function random( min, max ) {
        return Math.random() * ( max - min ) + min;
      }
      function calculateDistance( p1x, p1y, p2x, p2y ) {
        var xDistance = p1x - p2x,
            yDistance = p1y - p2y;
        return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
      }
      function Firework( sx, sy, tx, ty ) {
        this.x = sx;
        this.y = sy;
        this.sx = sx;
        this.sy = sy;
        this.tx = tx;
        this.ty = ty;
        this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
        this.distanceTraveled = 0;
        this.coordinates = [];
        this.coordinateCount = 3;
        while( this.coordinateCount-- ) {
          this.coordinates.push( [ this.x, this.y ] );
        }
        this.angle = Math.atan2( ty - sy, tx - sx );
        this.speed = 2;
        this.acceleration = 1.05;
        this.brightness = random( 50, 70 );
        this.targetRadius = 1;
      }
      Firework.prototype.update = function( index ) {
        this.coordinates.pop();
        this.coordinates.unshift( [ this.x, this.y ] );
        if( this.targetRadius < 8 ) {
          this.targetRadius += 0.3;
        } else {
          this.targetRadius = 1;
        }
        this.speed *= this.acceleration;
        var vx = Math.cos( this.angle ) * this.speed,
            vy = Math.sin( this.angle ) * this.speed;
        this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
        if( this.distanceTraveled >= this.distanceToTarget ) {
          createParticles( this.tx, this.ty );
          fireworks.splice( index, 1 );
        } else {
          this.x += vx;
          this.y += vy;
        }
      }
      Firework.prototype.draw = function() {
        ctx.beginPath();
        ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
        ctx.lineTo( this.x, this.y );
        ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
        ctx.stroke();
        ctx.beginPath();
        ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
        ctx.stroke();
      }
      function Particle( x, y ) {
        this.x = x;
        this.y = y;
        this.coordinates = [];
        this.coordinateCount = 5;
        while( this.coordinateCount-- ) {
          this.coordinates.push( [ this.x, this.y ] );
        }
        this.angle = random( 0, Math.PI * 2 );
        this.speed = random( 1, 10 );
        this.friction = 0.95;
        this.gravity = 1;
        this.hue = random( hue - 50, hue + 50 );
        this.brightness = random( 50, 80 );
        this.alpha = 1;
        this.decay = random( 0.015, 0.03 );
      }
      Particle.prototype.update = function( index ) {
        this.coordinates.pop();
        this.coordinates.unshift( [ this.x, this.y ] );
        this.speed *= this.friction;
        this.x += Math.cos( this.angle ) * this.speed;
        this.y += Math.sin( this.angle ) * this.speed + this.gravity;
        this.alpha -= this.decay;
        if( this.alpha <= this.decay ) {
          particles.splice( index, 1 );
        }
      }
      Particle.prototype.draw = function() {
        ctx. beginPath();
        ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
        ctx.lineTo( this.x, this.y );
        ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
        ctx.stroke();
      }
      function createParticles( x, y ) {
        var particleCount = 30;
        while( particleCount-- ) {
          particles.push( new Particle( x, y ) );
        }
      }
      function loop() {
        requestAnimFrame( loop );
        hue= random(0, 360 );
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect( 0, 0, cw, ch );
        ctx.globalCompositeOperation = 'lighter';
        var i = fireworks.length;
        while( i-- ) {
          fireworks[ i ].draw();
          fireworks[ i ].update( i );
        }
        var i = particles.length;
        while( i-- ) {
          particles[ i ].draw();
          particles[ i ].update( i );
        }
        if( timerTick >= timerTotal ) {
          if( !mousedown ) {
            fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
            timerTick = 0;
          }
        } else {
          timerTick++;
        }
        if( limiterTick >= limiterTotal ) {
          if( mousedown ) {
            fireworks.push( new Firework( cw / 2, ch, mx, my ) );
            limiterTick = 0;
          }
        } else {
          limiterTick++;
        }
      }
      canvas.addEventListener( 'mousemove', function( e ) {
        mx = e.pageX - canvas.offsetLeft;
        my = e.pageY - canvas.offsetTop;
      });
      canvas.addEventListener( 'mousedown', function( e ) {
        e.preventDefault();
        mousedown = true;
      });
      canvas.addEventListener( 'mouseup', function( e ) {
        e.preventDefault();
        mousedown = false;
      });
      window.onload = loop;
      //]]>
    </script>
cre: thuthuatms
Like Comment Share Rê chuột vào nút Like để chọn biểu tượng cảm xúc

2 nhận xét:


Cùng tham gia bình luận bài viết này nhé!

Giới Thiệu

Untitled-2
RIUS GREY là một trang web phi lợi nhuận, chuyên chia sẻ những thủ thuật máy tính, windows, phần mềm, blogger/blogspot, và một số thứ khác!
Hà Nội - Việt Nam
wWw.RIUSGREY.CF
vuminhthinh271@gmail.com
fb.com/riusgrey
  • bình luận
  • bài viết
  • Hợp tác Fanpage

    Nhận xét mới

    Bạn bè