Awesome HTML5 Ribbon Background Effect
Use the canvas ribbon effect generated by HTML5, and use the native canvas to generate the final effect
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ribbon</title> <style type="text/css"> body{ width:100%; margin:0; overflow:hidden; user-select:none; } #info { border-radius: 3px; margin: 0; position: fixed; top: 0; right: 0; width:25em; padding:1em; text-align:center; line-height:1.3em; transition: right 0.3s cubic-bezier(.65,.18,.79,.3); font-family: 'microsoft yahei',Arial,sans-serif; color: orange; font-size:14px; } </style> </head> <body> <canvas id = 'canv'></canvas> <div id = 'info'> Click on the screen to change the background color~~~ </div> <script> window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var c = document.getElementById ('canv'), $ = c.getContext('2d'), w = c.width = window.innerWidth, h = c.height = window.innerHeight, arr = [], u = 0; o = 0, $.fillStyle = '#FEFAE6'; $.fillRect(0,0,w,h); $.globalCompositeOperation = "source-over"; var inv = function () { $.restore(); $.fillStyle = "#" + (o ? "FEFAE6" : "000000"); $.fillRect(0, 0, w, h); $.fillStyle = "#" + (o ? "000000" : "FEFAE6"); $.save() }; window.addEventListener("touchstart", function(e){ e.preventDefault(); o =! o; inv() }, false); window.addEventListener("mousedown", function(e){ o =! o; inv() }, false); window.addEventListener("keydown", function(keydn) { if (keydn.keyCode == 32) { o =! o; inv() } }, false); window.addEventListener('resize', function(){ c.width = window.innerWidth; c.height = window.innerHeight; }, false); var ready = function() { arr = []; for (var i = 0; i < 20; i++) { set(); } } var set = function() { arr.push({ x1: w, y1: h, _x1: w - Math.random() * w, _y1: h - Math.random() * h, _x2: w - Math.random() * w, _y2: h - Math.random() * h, x2: -w + Math.random() * w, y2: -h + Math.random() * h, rot: Math.random() * 180, a1: Math.random() * 10, a2: Math.random() * 10, a3: Math.random() * 10 }); } var pretty = function() { u - = .2; for (var i in arr) { var b = arr[i]; b._x1 *= Math.sin(b.a1 -= 0.001); b._y1 *= Math.sin(b.a1); b._x2 -= Math.sin(b.a2 += 0.001); b._y1 += Math.sin(b.a2); b.x1 -= Math.sin(b.a3 += 0.001); b.y1 += Math.sin(b.a3); b.x2 -= Math.sin(b.a3 -= 0.001); b.y2 += Math.sin(b.a3); $.save(); $.globalAlpha = 0.03; $.beginPath(); $.strokeStyle = 'hsla('+ u + ', 85%, 60%, .7)'; $.moveTo(b.x1, b.y1); $.bezierCurveTo(b._x1, b._y1, b._x2, b._y2, b.x2, b.y2); $.stroke(); $.restore(); } window.requestAnimFrame(pretty); } ready(); pretty(); setTimeout(function() { var info= document.getElementById('info'); info.style.right = '-500px'; }, 5500); </script> </body> </html>
.