Really beautiful iOS 7 background. (my version is without blur)
A Pen by cesardanielhg on CodePen.
<canvas id="canvas"></canvas> |
var canvas = document.getElementById("canvas"), | |
width = canvas.width = getWidth(), | |
height = canvas.height = outerHeight - 185, | |
ctx = canvas.getContext("2d"), | |
aBubbleX = [], | |
aBubbleY = [], | |
aBubbleLR = [], | |
aBubbleTB = [], | |
iBubbleSpeed = 1, | |
aBubbleSize = [], | |
colors = [ | |
"rgba(158, 190, 223, 0.65)", | |
"rgba(154, 225, 241, 0.65)", | |
"rgba(175, 186, 232, 0.65)" | |
], | |
aBubbleColor = [], | |
iBubbles = 21; | |
function getWidth() { | |
return parseInt(window.getComputedStyle(document.body).getPropertyValue("width")); | |
} | |
window.addEventListener("resize", function(){ | |
width = canvas.width = getWidth(); | |
}, false); | |
for(i = 0; i < iBubbles; i++) { | |
aBubbleX[i] = fnRandom(0, width); | |
aBubbleY[i] = fnRandom(0, height); | |
aBubbleLR[i] = fnRandom(-iBubbleSpeed, iBubbleSpeed) / 40; | |
if(aBubbleLR[i] == 0) aBubbleLR[i] += 0.2; | |
aBubbleTB[i] = fnRandom(-iBubbleSpeed, 0) / 5; | |
if(aBubbleTB[i] == 0) aBubbleTB[i] += 0.2; | |
aBubbleSize[i] = fnRandom(25, 60); | |
} | |
for(i = 0; i < iBubbles; i++) { | |
aBubbleColor[i] = colors[fnRandom(0, colors.length)]; | |
} | |
function fnDraw() { | |
canvas.width = canvas.width; | |
fnBubbles(); | |
fnIncrement(); | |
fnControllBubble(); | |
window.requestAnimationFrame(fnDraw); | |
} | |
fnDraw(); | |
function fnRandom(min, max) { | |
return Math.floor(Math.random() * (max - min) + min); | |
} | |
function fnBubbles() { | |
for(i = 0; i < iBubbles; i++) { | |
ctx.beginPath(); | |
ctx.arc(aBubbleX[i], aBubbleY[i], aBubbleSize[i], 0, Math.PI * 2); | |
ctx.fillStyle = aBubbleColor[i]; | |
ctx.fill(); | |
} | |
} | |
function fnIncrement() { | |
for(i = 0; i < iBubbles; i++) { | |
aBubbleX[i] += aBubbleLR[i]; | |
aBubbleY[i] += aBubbleTB[i]; | |
} | |
} | |
function fnControllBubble() { | |
for(i = 0; i < iBubbles; i++) { | |
if(aBubbleX[i] < -60) { | |
aBubbleX[i] += width + 120; | |
} | |
if(aBubbleX[i] > width + 60) { | |
aBubbleX[i] -= width + 120; | |
} | |
if(aBubbleY[i] < -60) { | |
aBubbleY[i] += height + 120; | |
} | |
if(aBubbleY[i] > height + 60) { | |
aBubbleY[i] -= height + 120; | |
} | |
} | |
} |
Really beautiful iOS 7 background. (my version is without blur)
A Pen by cesardanielhg on CodePen.
body { | |
margin: 0 auto; | |
height: 100%; | |
text-align: center; | |
background: #333; | |
height: 100%; | |
} | |
#canvas { | |
background: | |
linear-gradient(#4B82A9, #90BBDB 40%, #90BBDB 60%, #284580); | |
} |