Skip to content

Instantly share code, notes, and snippets.

@jbeuckm
Last active December 19, 2015 07:59
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jbeuckm/5922491 to your computer and use it in GitHub Desktop.
CSS Position Particles (500)
<html>
<head>
<style>
body {
margin: 0
}
#container {
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
/*-webkit-backface-visibility: hidden;*/
/*-webkit-perspective: 1000;*/
}
.sprite {
background-image: url(globe.png);
position: absolute;
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<div id="container">
</div>
<script>
var sprites = [];
var count = 0;
function addSprite() {
var sprite = document.createElement('div');
sprite.vx = Math.random();
sprite.vy = Math.random();
sprite.x = Math.random() * 300;
sprite.y = Math.random() * 300;
sprite.theta = 0;
sprite.omega = Math.random() * 20 - 10;
sprite.setAttribute('class', 'sprite');
document.getElementById('container').appendChild(sprite);
sprites.push(sprite);
count++;
}
for ( i = 0; i < 500; i++) {
addSprite();
}
var transformProperty;
function setupBrowser() {
if (window.requestAnimationFrame) {
window.requestAnimFrame = window.requestAnimationFrame;
transformProperty = 'transform';
} else if (window.webkitRequestAnimationFrame) {
window.requestAnimFrame = window.webkitRequestAnimationFrame;
transformProperty = 'webkitTransform';
} else if (window.mozRequestAnimationFrame) {
window.requestAnimFrame = window.mozRequestAnimationFrame;
transformProperty = 'MozTransform';
} else {
window.requestAnimFrame = function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}
}
var s, t, i;
function render() {
for ( i = 0, l = count; i < l; i++) {
s = sprites[i];
s.x += s.vx;
s.y += s.vy;
dx = clientX - s.x;
dy = clientY - s.y;
dist = Math.sqrt(dx * dx + dy * dy);
if (dist > 0) {
co = .3 / dist;
s.vx += co * dx;
s.vy += co * dy;
}
// drag
s.vx *= .995;
s.vy *= .995;
s.style.top = ~~s.y + 'px';
s.style.left = ~~s.x + 'px';
}
}
var clientX = 50, clientY = 50;
document.addEventListener('mousemove', function(e) {
clientX = e.clientX;
clientY = e.clientY;
});
setupBrowser();
(function animloop() {
window.requestAnimFrame(animloop);
render();
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment