Skip to content

Instantly share code, notes, and snippets.

@magadanskiuchen
Last active Dec 15, 2015
Embed
What would you like to do?
Google+ Default Cover Photo Effect
Array.prototype.shuffle = function () {
for (var i = this.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = this[i];
this[i] = this[j];
this[j] = tmp;
}
return this;
}
jQuery(function ($) {
// number of items config
var minItems = 200;
var maxItems = 300;
// dimentions config
var minDimensions = 10;
var maxDimensions = 120;
// color channels array
var cc = [];
for (var i = 0; i < 3; ++i) {
cc.push(parseInt(Math.random() * 255));
}
function getColor() {
return cc.shuffle().join(', ');
}
$(document.body).css({ background: 'linear-gradient(to right, rgb(' + getColor() + ') 0%, rgb(' + getColor() + ') 100%)' });
var itemsNum = parseInt(minItems + Math.random() * (maxItems - minItems));
var items = $(null);
for (var i = 0; i < itemsNum; ++i) {
var div = $('<div />');
var dimensions = parseInt(minDimensions + Math.random() * (maxDimensions - minDimensions));
var left = (Math.random() * ($(document).width() + dimensions)) - dimensions;
var top = (Math.random() * ($(document).height() + dimensions)) - dimensions;
var circleColor = getColor();
var borderOpacity = Math.random();
var blur = Math.random() * (dimensions/10);
var zIndex = parseInt((dimensions/10) - blur);
div.css({
width: dimensions,
height: dimensions,
backgroundColor: 'rgba(' + circleColor + ', ' + Math.random() + ')',
opacity: Math.random(),
zIndex: zIndex,
boxShadow: '0 0 1px 1px rgba(' + circleColor + ', ' + borderOpacity + '), 0 0 1px 1px rgba(' + circleColor + ', ' + borderOpacity + ') inset',
transform: 'translate(' + left + 'px, ' + top + 'px)',
'-webkit-filter': 'blur(' + blur + 'px)'
});
items = items.add(div);
}
$(document.body).append(items);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Partition</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="func.js"></script>
</head>
<body>
</body>
</html>
@charset "utf-8";
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body { overflow: hidden; background: #000; color: #FFF; font: normal 12px Arial, Helvetica, sans-serif; }
div { position: absolute; border-radius: 50%; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment