| 1 |
(function () { |
| 2 |
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; |
| 3 |
|
| 4 |
var field = document.getElementById( 'bbp-badge' ), |
| 5 |
bee = document.getElementById( 'bbp-bee' ), |
| 6 |
|
| 7 |
max_x = field.clientWidth - bee.offsetWidth, |
| 8 |
max_y = field.clientHeight - bee.offsetHeight, |
| 9 |
angle = 95, |
| 10 |
offset = 95, |
| 11 |
|
| 12 |
duration = 4, |
| 13 |
canvas = 50, |
| 14 |
start = null, |
| 15 |
variance = 1; |
| 16 |
|
| 17 |
function step( timestamp ) { |
| 18 |
var progress, x, y; |
| 19 |
|
| 20 |
if ( start === null ) { |
| 21 |
start = timestamp; |
| 22 |
variance = 1; |
| 23 |
angle = 95; |
| 24 |
} |
| 25 |
|
| 26 |
progress = ( timestamp - start ) / duration / 1000; |
| 27 |
angle = ( 360 * progress ) + offset; |
| 28 |
|
| 29 |
x = variance * Math.sin( progress * 2 * Math.PI ); |
| 30 |
y = Math.cos( progress * 2 * Math.PI ); |
| 31 |
|
| 32 |
bee.style.left = max_x / 2 + ( canvas * x ) + 'px'; |
| 33 |
bee.style.bottom = max_y / 2 + ( canvas * y ) + 'px'; |
| 34 |
bee.style.transform = 'rotate(' + angle + 'deg)'; |
| 35 |
bee.style.webkitTransform = 'rotate(' + angle + 'deg)'; |
| 36 |
|
| 37 |
// Reset |
| 38 |
if ( progress >= 1 ) { |
| 39 |
start = null; |
| 40 |
} |
| 41 |
|
| 42 |
requestAnimationFrame( step ); |
| 43 |
} |
| 44 |
|
| 45 |
requestAnimationFrame( step ); |
| 46 |
})(); |
| 47 |
|
