Cách làm khoảng trống biệt danh facebook ! - Blogger Minh Tuấn Đẹp Trai

body { overflow: hidden; } canvas { left: 0; position: absolute; top: 0; } p { background: rgba(0, 0, 0, 0.5); color: #fff; left: 0; font-family: sans-serif; font-size: 14px; line-height: 1.5; margin: 0; padding: 20px 30px; position: absolute; top: 0; } Linh hồn cho bài viết này nằm ở đoạn JavaScript dưới đây: var canvas, ctx, width, height, xGravity, yGravity, friction, dots, palettes, paletteCount, paletteCurrent, colorCount, tick, mx, my, PI, TWOPI; function rand( min, max ) { return Math.random() * ( max - min ) + min; } function randInt( min, max ) { return Math.floor( min + Math.random() * ( max - min + 1 ) ); }; function Dot() { this.x = width / 2; this.y = height / 2; this.vx = rand( -2, 2 ); this.vy = rand( -2, 2 ); this.radius = rand( 5, 15 ); this.color = randInt( 1, colorCount - 1 ); } Dot.prototype.step = function( i ) { // apply forces this.x += this.vx; this.y += this.vy; // handle bounce if( this.vx > 0 && this.x + this.radius >= width ) { this.vx *= -0.6; } if( this.vx < 0 && this.x - this.radius <= 0 ) { this.vx *= -0.6; } if( this.vy > 0 && this.y + this.radius >= height ) { this.vy *= -0.6; } if( this.vy < 0 && this.y - this.radius <= 0 ) { this.vy *= -0.6; } // handle bounds and friction if( this.x + this.radius > width ) { this.x = width - this.radius; this.vy *= friction; } if( this.x - this.radius < 0 ) { this.x = this.radius; this.vy *= friction; } if( this.y + this.radius > height ) { this.y = height - this.radius; this.vx *= friction; } if( this.y - this.radius < 0 ) { this.y = this.radius; this.vx *= friction; } // handle gravity this.vx += xGravity; this.vy += yGravity; }; Dot.prototype.collide = function( otherDot ) { // still working on understanding this // lots of help from http://lamberta.github.io/html5-animation/ var dx = otherDot.x - this.x, dy = otherDot.y - this.y, dist = Math.sqrt( dx * dx + dy * dy ), minDist = this.radius + otherDot.radius; if( dist < minDist ) { var tx = this.x + dx / dist * minDist, ty = this.y + dy / dist * minDist, ax = ( tx - otherDot.x ) * 0.6, ay = ( ty - otherDot.y ) * 0.6; this.vx -= ax; this.vy -= ay; otherDot.vx += ax; otherDot.vy += ay; this.vx *= friction * 0.9; this.vy *= friction * 0.9; otherDot.vx *= friction * 0.9; otherDot.vy *= friction * 0.9; } }; Dot.prototype.draw = function() { ctx.beginPath(); ctx.arc( this.x, this.y, this.radius, 0, TWOPI ); ctx.fillStyle = palettes[ paletteCurrent ][ this.color ]; ctx.fill(); }; function init() { canvas = document.getElementById( 'canvas' ); ctx = canvas.getContext( '2d' ); xGravity = 0; yGravity = 1; friction = 0.99; dots = []; // palette credits: // https://color.adobe.com/Friends-and-foes-color-theme-1175537/ // https://color.adobe.com/Ocean-Sunset-color-theme-46355/ // https://color.adobe.com/Gettysburg-color-theme-209416/ // https://color.adobe.com/vintage-card-color-theme-3165833/ palettes = [ [ '#2e2932', '#01a2a6', '#37d8c2', '#bdf271', '#ffffa6' ], [ '#405952', '#9c9b7a', '#ffd393', '#ff974f', '#f35033' ], [ '#962d3e', '#343641', '#979c9c', '#f2ebc9', '#388898' ], [ '#f2ebbf', '#5c4b51', '#8dbeb2', '#f2b468', '#ee6163' ] ]; paletteCount = palettes.length; paletteCurrent = 3; colorCount = palettes[ 0 ].length; PI = Math.PI; TWOPI = PI * 2; reset(); loop(); } function reset() { width = window.innerWidth; height = window.innerHeight; dots.length = 0; tick = 0; mx = width / 2; my = height / 2; canvas.width = width; canvas.height = height; } function create() { if( tick && dots.length < 500 ) { dots.push( new Dot() ); } } function step() { var i = dots.length; while( i-- ) { dots[ i ].step( i ); } i = dots.length; while( i-- ) { dot = dots[ i ]; var j = i; if( j > 0 ) { while( j-- ) { dot.collide( dots[ j ] ); } } } } function draw() { ctx.fillStyle = palettes[ paletteCurrent ][ 0 ]; ctx.fillRect( 0, 0, width, height ); var i = dots.length; while( i-- ) { dots[ i ].draw(); } } function loop() { requestAnimationFrame( loop ); create(); step(); draw(); tick++; } function onmousemove( e ) { mx = e.pageX; my = e.pageY; xGravity = ( mx - width / 2 ) / ( width / 2 ); yGravity = ( my - height / 2 ) / ( height / 2 ); } function onmousedown() { var i = dots.length; while( i-- ) { dots[ i ].vx += rand( -10, 10 ); dots[ i ].vy += rand( -10, 10 ); } if( paletteCurrent < paletteCount - 1 ) { paletteCurrent++; } else { paletteCurrent = 0; } } window.addEventListener( 'resize', reset ); window.addEventListener( 'mousemove', onmousemove ); window.addEventListener( 'mousedown', onmousedown ); init();