Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
// http://codepen.io/otsukatomoya/pen/gbDxF/ var w = window.innerWidth, h = window.innerHeight, canvas = document.getElementById('sand'), ctx = canvas.getContext('2d'), rate = 50, arc = 500, time, count, size = 2, speed = 10, lights = new Array, colors = ['#33261a']; canvas.setAttribute('width',w); canvas.setAttribute('height',h); function init() { time = 0; count = 0; for(var i = 0; i < arc; i++) { lights[i] = { x: Math.ceil(Math.random() * w), y: Math.ceil(Math.random() * h), toX: Math.random() * 5 + 1, toY: Math.random() * 5 + 1, c: colors[Math.floor(Math.random()*colors.length)], size: Math.random() * size } } } function bubble() { ctx.clearRect(0,0,w,h); for(var i = 0; i < arc; i++) { var li = lights[i]; ctx.beginPath(); ctx.arc(li.x,li.y,li.size,0,Math.PI*2,false); ctx.fillStyle = li.c; ctx.fill(); li.x = li.x + li.toX * (time * 0.05); li.y = li.y + li.toY * (time * 0.05); if(li.x > w) { li.x = 0; } if(li.y > h) { li.y = 0; } if(li.x < 0) { li.x = w; } if(li.y < 0) { li.y = h; } } if(time < speed) { time++; } timerID = setTimeout(bubble,1000/rate); } init(); bubble();
CSS
* { margin: 0; padding: 0; box-sizing: border-box; } :before, :after { content: ''; display: block; position: absolute; box-sizing: border-box; } html, body { height: 100%; background: #33261a; overflow: hidden; } .landscape { position: relative; height: 600px; background: #864; overflow: hidden; } .landscape * { position: absolute; bottom: 0; } .sun { left: 60%; bottom: 350px; width: 120px; height: 120px; border-radius: 50%; background: #ff9; box-shadow: 0 0 150px #ff9; } .hills { left: 50%; } .hills div { overflow: hidden; border-radius: 2%; transform: rotate(45deg); } .hills div:nth-child(1), .hills div:nth-child(2) { bottom: -450px; width: 700px; height: 700px; background: #77593c; } .hills div:nth-child(1) { left: -600px; } .hills div:nth-child(2) { left: 0; } .hills div:nth-child(3), .hills div:nth-child(4), .hills div:nth-child(5) { bottom: -350px; width: 500px; height: 500px; background: #664d33; } .hills div:nth-child(3) { left: -750px; } .hills div:nth-child(4) { left: -250px; } .hills div:nth-child(5) { left: 250px; } .hills div:nth-child(6), .hills div:nth-child(7) { bottom: -400px; left: -600px; width: 500px; height: 500px; background: #55402b; } .hills div:nth-child(6) { left: -500px; } .hills div:nth-child(7) { left: 0; } .building { left: 50%; width: 250px; height: 520px; margin-left: -125px; } .tower { background: linear-gradient(to bottom, #55402b 0%, #3a2b1d 100%); box-shadow: inset 0 5px 0 #443322, inset 0 -1px 0 #443322, inset 0 -5px 0 #33261a, inset 1px 0 0 #443322, inset -1px 0 0 #443322; overflow: hidden; } .t1 { left: 110px; width: 30px; height: 520px; } .t2 { left: 80px; width: 60px; height: 380px; } .t3 { left: 120px; width: 60px; height: 230px; } .t4 { left: 60px; width: 60px; height: 140px; } .t5 { left: 250px; width: 55px; height: 150px; } .t6 { left: 175px; width: 80px; height: 30px; } .t7 { left: -50px; width: 125px; height: 55px; } .t8 { left: -160px; width: 80px; height: 200px; } .t9 { left: -300px; width: 100px; height: 30px; } .t10 { left: 350px; width: 120px; height: 50px; } .tower:before { top: 5px; left: 0; width: 1px; height: calc(100% - 11px); box-shadow: 0px 0px #6d5236, 5px 0 #6d5236, 10px 0 #6d5236, 15px 0 #6d5236, 20px 0 #6d5236, 25px 0 #6d5236, 30px 0 #6d5236, 35px 0 #6d5236, 40px 0 #6d5236, 45px 0 #6d5236, 50px 0 #6d5236, 55px 0 #6d5236, 60px 0 #6d5236, 65px 0 #6d5236, 70px 0 #6d5236, 75px 0 #6d5236, 80px 0 #6d5236, 85px 0 #6d5236, 90px 0 #6d5236, 95px 0 #6d5236, 100px 0 #6d5236, 105px 0 #6d5236, 110px 0 #6d5236, 115px 0 #6d5236, 120px 0 #6d5236, 125px 0 #6d5236; } .tower:after { bottom: 5px; left: 0; width: 100%; height: 1px; box-shadow: 0px 0px #4b3825, 0 -10px #4b3825, 0 -20px #4b3825, 0 -30px #4b3825, 0 -40px #4b3825, 0 -50px #4b3825, 0 -60px #4b3825, 0 -70px #4b3825, 0 -80px #4b3825, 0 -90px #4b3825, 0 -100px #4b3825, 0 -110px #4b3825, 0 -120px #4b3825, 0 -130px #4b3825, 0 -140px #4b3825, 0 -150px #4b3825, 0 -160px #4b3825, 0 -170px #4b3825, 0 -180px #4b3825, 0 -190px #4b3825, 0 -200px #4b3825, 0 -210px #4b3825, 0 -220px #4b3825, 0 -230px #4b3825, 0 -240px #4b3825, 0 -250px #4b3825, 0 -260px #4b3825, 0 -270px #4b3825, 0 -280px #4b3825, 0 -290px #4b3825, 0 -300px #4b3825, 0 -310px #4b3825, 0 -320px #4b3825, 0 -330px #4b3825, 0 -340px #4b3825, 0 -350px #4b3825, 0 -360px #4b3825, 0 -370px #4b3825, 0 -380px #4b3825, 0 -390px #4b3825, 0 -400px #4b3825, 0 -410px #4b3825, 0 -420px #4b3825, 0 -430px #4b3825, 0 -440px #4b3825, 0 -450px #4b3825, 0 -460px #4b3825, 0 -470px #4b3825, 0 -480px #4b3825, 0 -490px #4b3825, 0 -500px #4b3825; } .d { left: 50%; z-index: 1; margin-left: -5px; width: 11px; height: 12px; border: 1px solid #33261a; border-bottom: 0; background: #443322; } .d:before { left: 4px; width: 1px; height: 12px; background: #33261a; } .d:after { top: 4px; left: 2px; width: 5px; height: 3px; border-left: 1px solid #33261a; border-right: 1px solid #33261a; } .radio { width: 2px; background: #443322; } .r1 { left: 124px; height: 70px; bottom: 520px; } .r2 { left: 95px; height: 40px; bottom: 380px; } .radio:after { left: -4px; bottom: 0; width: 10px; height: 4px; background: #443322; } /* Codepen Preview Mode */ @media only screen and (height: 300px) { .landscape { margin-top: -320px; } .sun { bottom: 180px; } } canvas { position: absolute; top: 0; left: 0; z-index: 1; }
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