CSS3 + JQuery FX RINGS

CSS3 + JQuery FX RINGS

by Andrew Pougher

HTML

<div class="drews_ring"></div>

CSS

body{background:purple}
    .drews_ring {
    border: 13px solid #999;
    -webkit-border-radius: 50%;
    height: 90px;
    width: 90px;
    position: absolute;
    left:20px;
    top:14px;
    -webkit-animation: pulsate 3s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.9, 1.9); opacity: 0.0;}
}

JavaScript

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function dup(){
$('.drews_ring').each(function(){
    $(this).css(
        {'marginTop' : getRandomInt(-100,600), 'marginLeft': getRandomInt(-100,600)}
    );
});
}
var e = $('.drews_ring');
    for (var i = 0; i < 51; i++) {
      e.clone().insertAfter(e);dup()
    }
    

	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');