Selected Blocks Two

by cintia_rodrigues

HTML

<div class="article one">
<img src="https://placehold.it/100x100">
<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="https://placehold.it/100x100">
<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="https://placehold.it/100x100">
<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 four">
<img src="https://placehold.it/100x100">
<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>

SCSS

$animationTime = .8s;
$color: #0080ff;

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

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

.article{
  width: 22%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  font-family: sans-serif;
  padding: 10px;
	margin: 50px 1%;
	background-color: #fff;
	opacity: 0;
	box-shadow: 0 0 20px 2px rgba(0,0,0,.05);
	transition: $animationTime opacity;
  
  img,
  h2,
  p {
    opacity: 0;
  }
  
  img{
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-top: -70px;	
    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;
    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: -50px;
    }
  }
}

@keyframes bounceOut {
        0%{ box-shadow: 0 0 0 4px $color; opacity:1;}
        25%{ box-shadow: 0 0 0 1px $color; opacity:1;}
        50%{ box-shadow: 0 0 0 7px $color; opacity:1; }
        75%{ box-shadow: 0 0 0 4px $color; opacity:1;}
        100%{ box-shadow: 0 0 0 1px $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);
});