Selected Blocks one

by cintia_rodrigues

HTML

<div class="wrapper">
	<div class="article one">
		<img src="http://lorempixel.com/100/100/">
		<h2>Header</h2>
		<p>
		"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		<div class="btn">Click me</div>
	</div>

	<div class="article two">
		<img src="http://lorempixel.com/120/120/">
		<h2>Header</h2>
		<p>
		"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		<div class="btn">Click me</div>
	</div>

	<div class="article three">
		<img src="http://lorempixel.com/110/110/">
		<h2>Header</h2>
		<p>
		"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		<div class="btn">Click me</div>
	</div>

</div>

SCSS

$animationTime = .8s;
$btn-color: #ff4081;
$selected-color: #3f51b5;

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.btn{
	background: $btn-color;
	color: #fff;
	padding:10px;
	border-radius: 5px;
	margin-top: 10px;
	
	&:hover {
		cursor: pointer; 
		animation:bounceOut .6s linear;
	}
}

.wrapper{
	width; 100%;
	padding: 20px 10px;
}

.article{
  width: 32%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  font-family: sans-serif;
  padding: 20px;
	margin: 0;
	background-color: #fff;
	opacity: 0;
	box-shadow: 0 0 20px 2px rgba(0,0,0,.05);
	transition: $animationTime opacity,
							$animationTime/2 transform;
  
  img,
  h2,
  p {
    opacity: 0;
  }
  
  img{
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-top: -20px;	
    transition: $animationTime margin,
                $animationTime opacity,
                $animationTime width,
                $animationTime height;
  }
  
  h2{
    margin-bottom: 10px;
    margin-top: -10px;
		font-size: 20px;
    transition: $animationTime margin $animationTime/3,
                $animationTime opacity $animationTime/3;
  }
  
  p{
    font-size: 14px;
		text-align: left;
    margin-top: -10px;
    transition: $animationTime margin $animationTime/2,
                $animationTime opacity $animationTime/2;   
  }
  
  &.visible{
    opacity: 1;
		
		h2,
    p{
      opacity: 1;
      margin-top: 0;
    }
    
    img{
      width: 100px;
      height: 100px;
      opacity: 1;
      margin-top: 0;
    }
  }
	
	&:hover{
				background: $selected-color;
        transform:scale(1.1);
				color: #fff;
				cursor: pointer;				
	}
}

@keyframes bounceOut {
        0%{ box-shadow: 0 0 0 4px $btn-color; opacity:1;}
        25%{ box-shadow: 0 0 0 1px $btn-color; opacity:1;}
        50%{ box-shadow: 0 0 0 7px $btn-color; opacity:1; }
        75%{ box-shadow: 0 0 0 4px $btn-color; opacity:1;}
        100%{ box-shadow: 0 0 0 1px $btn-color; opacity:1;}
}

JavaScript

$(function(){
  var el = $('.article');
  var index = 0;
  var timer = window.setInterval(function(){
    if  (index < el.length) {
      el.eq(index++).addClass('visible');
    } else {
      window.clearInterval(timer);
    }
  }, 700);
});