To make this simple effect, I used TweenMax, to learn more http://greensock.com/tweenmax
A Pen by Maicol Santos on CodePen.
<section class="maps"> | |
<div class="pins um"></div> | |
<div class="pins dois"></div> | |
<div class="pins tres"></div> | |
<div class="pins quatro"></div> | |
<div class="pins cinco"></div> | |
</section> |
To make this simple effect, I used TweenMax, to learn more http://greensock.com/tweenmax
A Pen by Maicol Santos on CodePen.
var maps = $('.maps'); | |
TweenMax.set(maps.find('.pins'), { css: { transform: 'scale(0)' } }); | |
TweenMax.staggerTo(maps.find('.pins'), 0.5, { | |
css: { transform: 'scale(1)' }, | |
ease: Expo.easeOut, | |
delay: 0.2 | |
}, 0.1); |
.maps{ | |
width: 842px; | |
height: 336px; | |
background: url(http://maicolsantos.com/code/img/maps.png) no-repeat; | |
position: relative; | |
.pins{ | |
position: absolute; | |
background: url(http://maicolsantos.com/code/img/pins.png); | |
width: 43px; | |
height: 140px; | |
} | |
.um{left: 60px;top: 10px;} | |
.dois{left: 170px;top: 120px;} | |
.tres{left: 350px;top: 60px;} | |
.quatro{right: 100px;top: 170px;} | |
.cinco{right: 190px;top: 30px;} | |
} |