Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
var div = document.createElement('div'); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var w; var h; var msTimer = 0.0; var rainArr = [50]; var rainSpeed = 4; var x = 0; var y = 0; function init() { document.body.appendChild(canvas); updatePosition(); createRain(); setInterval(mainLoop, 30); } init(); function createRain() { var length = 500; rainArr = []; for (var i = length - 1; i >= 0; i--) { rainArr.push({ x: 1, y: 0, z: 0 }); } for (var j = 0; j < 500; j++) { rainArr[j].x = Math.floor((Math.random() * 820) - 9); rainArr[j].y = Math.floor((Math.random() * 520) - 9); rainArr[j].z = Math.floor((Math.random() * 2) + 1); rainArr[j].w = Math.floor((Math.random() * 3) + 2); } } function updatePosition() { var bodyWidth = document.documentElement.clientWidth, bodyHeight = document.documentElement.clientHeight; w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; div.style.left = div.style.right = div.style.top = div.style.bottom = '0'; } function mainLoop() { updatePosition(); msTimer += 30; ctx.fillStyle = '#202426'; ctx.fillRect(0, 0, w, h); glow(); rain(); } function glow() { var sinGlowMod = 5 * Math.sin(msTimer / 200); var cosGlowMod = 5 * Math.cos((msTimer + 0.5 * sinGlowMod) / 200); var grdGlow = ctx.createRadialGradient(50 + x, 50 - y, 0, 160 + y + sinGlowMod, 160 - x, 400 + cosGlowMod); grdGlow.addColorStop(0.000, 'rgba(220, 240, 160, 1)'); grdGlow.addColorStop(0.2, 'rgba(180, 240, 160, 0.4)'); grdGlow.addColorStop(0.4, 'rgba(140, 240, 160, 0.2)'); grdGlow.addColorStop(1, 'rgba(140, 240, 160, 0)'); ctx.fillStyle = grdGlow; ctx.fillRect(0, 0, w, h); } function rain() { for (var i = 0; i < 500; i++) { if (rainArr[i].y >= 482) { rainArr[i].y -= 500; } if (rainArr[i].x < -10) { rainArr[i].x += w; } else { rainArr[i].y += rainArr[i].w * rainSpeed; rainArr[i].x -= 5 + Math.floor(rainArr[i].y / 250) - rainArr[i].w; } var grd = ctx.createRadialGradient(250, 450, 140, 250, 300, 600); grd.addColorStop(0.000, 'rgba(100, 170, 160, 0.2)'); grd.addColorStop(0.1, 'rgba(100, 160, 160, 0.12)'); grd.addColorStop(0.2, 'rgba(100, 150, 150, 0.1)'); grd.addColorStop(1, 'rgba(100, 140, 140, .08)'); ctx.fillStyle = grd; ctx.fillRect(rainArr[i].x * 2, rainArr[i].y * 2, rainArr[i].z * 2, 9); } } document.querySelector('body').addEventListener('mousemove', function(e) { x = (e.pageX * -1 / 2) / 5; y = (e.pageY * -1 / 2) / 5; });
CSS
body { overflow: hidden; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email