CodePen Embed - Raphael animation example


<a href="" id="start">Click here tto start</a>

<div id="wrap">
  
<section id="sec2">
  <div class="pad">
    <p class="titolo">UrbanDevice</p>
    
    <div class="devices">
      <div class="box box1">
        <div class="graph">
          <p>There were<br>quite <br>popular</p>
          <span class="si">yes</span>
          <span class="no">no</span>
          <div class="canvas" id="sec2_graph_1"></div>
        </div>
        <div class="thumb"><img src="http://www.urbangap.com/urban12/assets/maggio/i/sec2_thumb_tv.jpg" alt="TV"></div>
      </div>
      <div class="box box2">
        <div class="graph">
          <p>New life with<br/>streaming</p>
          <span class="si">yes</span>
          <span class="no">no</span>
          <div class="canvas" id="sec2_graph_2"></div>
        </div>
        <div class="thumb"><img src="http://www.urbangap.com/urban12/assets/maggio/i/sec2_thumb_radio.jpg" alt="Radio"></div>
      </div>
      <div class="box box3">
        <div class="graph">
          <p>Slide to unlock<br>(happiness)</p>
          <span class="si">yes</span>
          <div class="canvas" id="sec2_graph_3"></div>
        </div>
        <div class="thumb"><img src="http://www.urbangap.com/urban12/assets/maggio/i/sec2_thumb_phone.jpg" alt="phone"></div>
      </div>
      <div class="box box4">
        <div class="graph">
          <p>There was once <br> a newspaper <br> printed</p>
          <span class="si">yes</span>
          <span class="no">no</span>
          <div class="canvas" id="sec2_graph_4"></div>
        </div>
        <div class="thumb"><img src="http://www.urbangap.com/urban12/assets/maggio/i/sec2_thumb_tablet.jpg" alt="tablet"></div>
      </div>
      <div class="box box5">
        <div class="graph">
          <p>Desktop, <br>the mirror <br>of the soul</p>
          <span class="si">yes</span>
          <div class="canvas" id="sec2_graph_5"></div>
        </div>
        <div class="thumb"><img src="http://www.urbangap.com/urban12/assets/maggio/i/sec2_thumb_mac.jpg" alt="computer"></div>
      </div>
    </div>
  </div>
</section>
  
</div>

body {
  background-color: #e4ddcb;
  font-family: tahoma, sans-serif;
}


h1,h2,h3{ font-weight: normal;}
.clear{clear: left}
.spaceTop{height: 34px;}
.pad{width: 968px; padding-left: 20px; margin: 0 auto; position: relative}


/* intestazione */
#wrap {width: 100%; overflow: hidden;font-family: 'font'; }
section{position: relative; overflow: visible;}

#start {
  display: block;
  width: 200px;
  text-align: center;
  background-color: #e44601;
  color: #fff;
  margin: 0 auto;
  padding: 15px;
  border-radius: 6px;
  text-decoration: none;
}


/* urban device */
#sec2{background: url(http://www.urbangap.com/urban12/assets/maggio/i/sec2.jpg) top center no-repeat; z-index: 1}
#sec2 .pad{height: 459px; padding-top: 0}
#sec2 .titolo{font-size: 60px; color: #b4afa1; position: absolute; top: 0; right: 0; opacity: 1}
#sec2 .devices{ position: absolute; top: 115px; left: 20px}
#sec2 .devices .box{width: 183px; float: left;}
#sec2 .devices .box .graph{ width: 183px; height: 183px; position: relative; background: url(http://www.urbangap.com/urban12/assets/maggio/i/sec2_bg_graph.jpg) center no-repeat; padding:2px 0 0 1px}
#sec2 .devices .box p{font-size: 14px; text-align: center; position: relative; z-index: 3; padding-top: 60px; color: #434343} 
#sec2 .devices .box span{ position: absolute; display: block; width: 33px; font-size: 16px; z-index: 2}
#sec2 .devices .box .si{ left:85px; top: -30px; height: 39px; padding-top: 5px; 
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAsCAYAAADretGxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1NkQ5RkY0RDg3QTcxMUUxQTJDREE0QzVEQjM1QkY4MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1NkQ5RkY0RTg3QTcxMUUxQTJDREE0QzVEQjM1QkY4MiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU2RDlGRjRCODdBNzExRTFBMkNEQTRDNURCMzVCRjgyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU2RDlGRjRDODdBNzExRTFBMkNEQTRDNURCMzVCRjgyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+chEPoAAAAdFJREFUeNrsmE1Og0AUx6dzAo9Qb4CJe+sN6tpFywka1ppoE/e2JyhNdM8NmK41kRu0N5Ab4BvySqZAYb6Y6cJ/8hZNYfjxePM+ZlQUBTnq8/uZdGgMNgW7Awvwd10HsAxsB5Y83r4diIRGEhATsAUCqCoBWwMM04W4AnsHmxNzxWARwORtf9IzN3F37y0BEFxnDy8ZyELwG1L0hE3x9VIAmfdBcNLNAAAiyKbuESrEwxg94EIpPq/hiSE90OqREwigmuJWdKkJPrfyxAvxo0WZJz6+nniQ/BB/uuGemBG/mlHclj4VUA8B2QhQSi5A/xAXB5F7ZsgptmM+xSj2gz614xDMM0RS9phQzX4dlvGT7hz6zmsqdMU+tBW36NITRFxB4JDiOjaq4UhMVq69sW5kTJySXHmDiVNZPW278sayq3awY7AMHAusr4BFA9aTHNfvraL8wnCoYGw7LqAdI73tBJYBwKtqPxFa/Cyd3qU9Nz7Y2g3ghUy3s2JtgaSamgFgZdrerQy2bSbzErI9ZqTRgZWf89wRkQ4EX+heIVDL62VP76jim8mChF2BaNryZxIgHEApx1DLwcYBlINYd/iJW5KPFoDpBCaChCbV90+AAQBblY4svRviuwAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;  color: #fff; text-align: center}
#sec2 .devices .box .no{ color: #9d9886; text-transform: uppercase; left: -20px; top: 80px}
#sec2 .devices .box .canvas{z-index: 1; position: absolute; top: 0; left: 0;}
#sec2 .devices .box .thumb{ width: 183px; height: 90px; text-align: center}

#sec2 .devices .box2 .si{top: 5px; left: 130px}
#sec2 .devices .box2 .no{top: 150px; left: 0}
#sec2 .devices .box3 .si{top: 125px; left: 75px}
#sec2 .devices .box4 .si{top: 5px; left: 130px}
#sec2 .devices .box4 .no{top: 10px; left: 10px}
#sec2 .devices .box5 .si{top: 5px; left: 130px}


var Dev = {
  r : new Array(),
  f : new Array(),
  box : $('#sec2 .box'),  
  obj:null,
  x:91.5,
  y:91.5,
  ra:75,
  max:100,
  create_arc: function(arch) {
    arch.customAttributes.arc = function (xloc, yloc, value, total, R) {
      var alpha = 360 / total * value,
      a = (90 - alpha) * Math.PI / 180,
      x = xloc + R * Math.cos(a),
      y = yloc - R * Math.sin(a),
      path;
      if (total == value) {
        path = [["M", xloc, yloc - R], ["A", R, R, 0, 1, 1, xloc - .01, yloc - R]];
      } else {
        path = [["M", xloc, yloc - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
      }
      return {path: path};
    }
  },

  get_arc_radius: function() {
    return ((($('#timer ul li:last em').text()) * 1.66666667));
  },  

  reset: function(){
    Dev.box.find('p').css({'opacity':0})
    Dev.box.find('.si,.no,.thumb').css({'opacity':0})
  },
  init: function(){
    Dev.r[0] = Raphael('sec2_graph_1',183,183)
    Dev.create_arc(Dev.r[0])
    Dev.f[0] = Dev.r[0].path().attr({"stroke": "#81a5b8", "stroke-width": 24,  arc: [Dev.x, Dev.y, 0, Dev.max, Dev.ra]});

    Dev.r[1] = Raphael('sec2_graph_2',183,183)
    Dev.create_arc(Dev.r[1])
    Dev.f[1] = Dev.r[1].path().attr({"stroke": "#81a5b8", "stroke-width": 24,  arc: [Dev.x, Dev.y, 0, Dev.max, Dev.ra]});

    Dev.r[2] = Raphael('sec2_graph_3',183,183)
    Dev.create_arc(Dev.r[2])
    Dev.f[2] = Dev.r[2].path().attr({"stroke": "#81a5b8", "stroke-width": 24,  arc: [Dev.x, Dev.y, 0, Dev.max, Dev.ra]});
  
    Dev.r[3] = Raphael('sec2_graph_4',183,183)
    Dev.create_arc(Dev.r[3])
    Dev.f[3] = Dev.r[3].path().attr({"stroke": "#81a5b8", "stroke-width": 24,  arc: [Dev.x, Dev.y, 0, Dev.max, Dev.ra]});

    Dev.r[4] = Raphael('sec2_graph_5',183,183)
    Dev.create_arc(Dev.r[4])
    Dev.f[4] = Dev.r[4].path().attr({"stroke": "#81a5b8", "stroke-width": 24,  arc: [Dev.x, Dev.y, 0, Dev.max, Dev.ra]});
  },
  anim : function(){
    Dev.box.eq(0).find('p').animate({'opacity':1},500,function(){
      Dev.f[0].animate({arc: [Dev.x, Dev.y, 5, Dev.max, Dev.ra]}, 700, '<>',function(){
        Dev.box.eq(0).find('.si,.no').animate({'opacity':1},400)
        Dev.box.eq(0).find('.thumb').animate({'opacity':1},400)
      });  
    })
    Dev.box.eq(1).find('p').delay(400).animate({'opacity':1},500,function(){
      Dev.f[1].animate({arc: [Dev.x, Dev.y, 40, Dev.max, Dev.ra]}, 700, '<>',function(){ 
        Dev.box.eq(1).find('.si,.no').animate({'opacity':1},400)
        Dev.box.eq(1).find('.thumb').animate({'opacity':1},400)
      });  
    })
    Dev.box.eq(2).find('p').delay(800).animate({'opacity':1},500,function(){
      Dev.f[2].animate({arc: [Dev.x, Dev.y, 100, Dev.max, Dev.ra]}, 700, '<>',function(){ 
        Dev.box.eq(2).find('.si,.no').animate({'opacity':1},400)
        Dev.box.eq(2).find('.thumb').animate({'opacity':1},400)
      });  
    })

    Dev.box.eq(3).find('p').delay(1200).animate({'opacity':1},500,function(){
      Dev.f[3].animate({arc: [Dev.x, Dev.y, 75, Dev.max, Dev.ra]}, 700, '<>',function(){
        Dev.box.eq(3).find('.si,.no').animate({'opacity':1},400)
        Dev.box.eq(3).find('.thumb').animate({'opacity':1},400)
      });  
    })

    Dev.box.eq(4).find('p').delay(1600).animate({'opacity':1},500,function(){
      Dev.f[4].animate({arc: [Dev.x, Dev.y, 100, Dev.max, Dev.ra]}, 700, '<>',function(){
        Dev.box.eq(4).find('.si,.no').animate({'opacity':1},400)
        Dev.box.eq(4).find('.thumb').animate({'opacity':1},400)
      });  
    })
      
  },
  crea : function(){
    Dev.f[0].attr({arc: [Dev.x, Dev.y, 5, Dev.max, Dev.ra]})
    Dev.f[1].attr({arc: [Dev.x, Dev.y, 40, Dev.max, Dev.ra]})
    Dev.f[2].attr({arc: [Dev.x, Dev.y, 100, Dev.max, Dev.ra]})
    Dev.f[3].attr({arc: [Dev.x, Dev.y, 75, Dev.max, Dev.ra]})
    Dev.f[4].attr({arc: [Dev.x, Dev.y, 100, Dev.max, Dev.ra]})
  }
}
    
    
    
    
 
jQuery(document).ready(function(){


  Dev.init();
  Dev.reset();
  
  $("#start").on("click", function(e) {
    e.preventDefault();
    Dev.anim();
  });
  
  })

This Pen is owned by orhan on CodePen.

See more by @orhanveli on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript