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

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

RIUS GREY IT@riusgrey đã đăng
Hiện có lượt xem và 2 bình luận

Chi tiết

Liên quan

Nhận xét

Điều hướng

Hướng dẫn

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
<3 @@ ^_^ ^^ :) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) (p) :-s (m) 8-) :-t :-b b-( :-# (y) x-) (k) (h) cheer (li) :v :3 (c) (s) (pl) (f)
Bài đăng mới hơn Bài đăng cũ hơn
Pass giải nén mặc định: riusgrey
Chắc bạn cũng đã nhiều lần gặp những link của 123link dạng 123link.co tại những trang web chia sẻ nội dung số. Nhưng bạn không biết cách nào để truy cập vào đúng link gốc của nội dung mà mình muốn truy cập. Bài viết này sẽ giúp bạn làm điều đó.
Đầu tiên bạn truy cập vào một link 123link. Khi bạn truy cập xong thì nội dung bạn thấy sẽ tựa như hình ở dưới.
Trang 123link
Trang 123link
Đánh dấu check vào vô “I’m not a robot”. Sau đó sẽ có một bảng captcha hiện ra. Bạn trả lời theo câu hỏi của captcha rồi bấm Verify để xác nhận.
I’m not a robot
I’m not a robot
Verify
Verify
Sau khi xác nhận captcha thành công thì bấm chọn nút “Click here to continue” để sang bước tiếp theo.
Click here to continue
Click here to continue
Ở trang tiếp theo, bạn sẽ thấy một đồng hồ đếm ngược, thường thì nhiều nhất sẽ là 7 giây. Bạn đợi cho thời gian đếm ngược chạy hết.
Bạn đợi cho thời gian đếm ngược chạy hết
Bạn đợi cho thời gian đếm ngược chạy hết
Khi thời gian đếm ngược chạy hết, bạn sẽ thấy nút Get Link hiện ra. Bạn bấm vào nút đó để truy cập đến đường link đã được rút gọn bởi 123link.
Get Link
Get Link
Bạn cứ yên tâm là link từ 123link sẽ không có ẩn chứa những mối nguy hiểm như virus, các pop-up quảng cáo không lành mạnh và phiền toái khi bạn đang thao tác các bước để tới link đích.
Like
Rê chuột vào nút Like để chọn biểu tượng cảm xúc
https://www.riusgrey.cf/2019/01/code-hieu-ung-ban-phao-hoa-cho-blogspot.html

Không ngừng học hỏi, tìm tòi tri thức mới. Tôi luôn mang đến cho bạn những gì tốt nhất bạn cần...

2 nhận xét:
Xếp theo

Về Rius Grey

Được thành lập ngày 20/06/2017,Rius Grey là một website chủ yếu chuyên chia sẻ về mảng Photoshop như : PSD, Thủ Thuật PTS,..Ngoài ra chúng tôi còn chia sẻ một số thử thuật về Máy Tính, Blogger, Facebook,..vv

Ngoài ra Blog chúng tôi cũng chia sẻ những thứ linh tinh khác nữa...

Hiện tại có bài viết và bình luận trên Blog.

Liên hệ, góp ý hoặc hợp tác, quảng cáo tại đây

Bình Luận Mới

Blog Bạn Bè

Thông Báo

Mọi người hãy ủng hộ Blog thường xuyên để Ad có động lực đăng bài nhiều bài hay nhé. Rip Tony Stark. I love U 3000 !

Xong

ĐĂNG NHẬP

Chưa có tài khoản ?Đăng ký ngay!

ĐĂNG KÝ

Lưu ý: Tên đăng nhập và Email không được viết hoa
Đã có tài khoản ? Đăng nhập