Animated Card Stacks

In this example below you will see how to do a Animated Card Stacks with some HTML / CSS and Javascript

Testing some simple animations to separate stacks of cards

Thumbnail
This awesome code was written by chrishutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrishutchinson ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Animated Card Stacks</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<header class="hero">
  <h1>Animated Card Stacks</h1>
  <p>Click each stack to toggle it open and closed</p>
</header>
<ul class="cards">
  <li class="title">
    <h2>Slide right</h2>
  </li>
  <li class="card card-1"><img src="http://lorempixel.com/400/250/city"/>
    <div class="content">
      <h1>Card 1 Title</h1>
      <p>Card description</p>
    </div>
  </li>
  <li class="card card-2"><img src="http://lorempixel.com/400/250/food"/>
    <div class="content">
      <h1>Card 2 Title</h1>
      <p>Card description</p>
    </div>
  </li>
  <li class="card card-3"><img src="http://lorempixel.com/400/250/animals"/>
    <div class="content">
      <h1>Card 3 Title</h1>
      <p>Card description</p>
    </div>
  </li>
</ul>
<hr/>
<ul class="card-stacks">
  <li class="title">
    <h2>Expand to grid</h2>
  </li>
  <li class="stack stack-1">
    <ul class="cards-down">
      <li class="card card-1"><img src="http://lorempixel.com/401/250/city"/>
        <div class="content">
          <h1>Card 1 Title</h1>
          <p>Stack 1</p>
        </div>
      </li>
      <li class="card card-2"><img src="http://lorempixel.com/401/250/food"/>
        <div class="content">
          <h1>Card 2 Title</h1>
          <p>Stack 1</p>
        </div>
      </li>
      <li class="card card-3"><img src="http://lorempixel.com/401/250/animals"/>
        <div class="content">
          <h1>Card 3 Title</h1>
          <p>Stack 1</p>
        </div>
      </li>
    </ul>
  </li>
  <li class="stack stack-2">
    <ul class="cards-down">
      <li class="card card-1"><img src="http://lorempixel.com/402/250/city"/>
        <div class="content">
          <h1>Card 1 Title</h1>
          <p>Stack 2</p>
        </div>
      </li>
      <li class="card card-2"><img src="http://lorempixel.com/402/250/food"/>
        <div class="content">
          <h1>Card 2 Title</h1>
          <p>Stack 2</p>
        </div>
      </li>
      <li class="card card-3"><img src="http://lorempixel.com/402/250/animals"/>
        <div class="content">
          <h1>Card 3 Title</h1>
          <p>Stack 2</p>
        </div>
      </li>
    </ul>
  </li>
  <li class="stack stack-3">
    <ul class="cards-down">
      <li class="card card-1"><img src="http://lorempixel.com/403/250/city"/>
        <div class="content">
          <h1>Card 1 Title</h1>
          <p>Stack 3</p>
        </div>
      </li>
      <li class="card card-2"><img src="http://lorempixel.com/403/250/food"/>
        <div class="content">
          <h1>Card 2 Title</h1>
          <p>Stack 3</p>
        </div>
      </li>
      <li class="card card-3"><img src="http://lorempixel.com/403/250/animals"/>
        <div class="content">
          <h1>Card 3 Title</h1>
          <p>Stack 3</p>
        </div>
      </li>
    </ul>
  </li>
</ul>
<hr/>
<ul class="cards-split">
  <li class="title">
    <h2>Split from middle</h2>
  </li>
  <li class="card card-1"><img src="http://lorempixel.com/400/250/city"/>
    <div class="content">
      <h1>Card 1 Title</h1>
      <p>Card description</p>
    </div>
  </li>
  <li class="card card-2"><img src="http://lorempixel.com/400/250/food"/>
    <div class="content">
      <h1>Card 2 Title</h1>
      <p>Card description</p>
    </div>
  </li>
  <li class="card card-3"><img src="http://lorempixel.com/400/250/animals"/>
    <div class="content">
      <h1>Card 3 Title</h1>
      <p>Card description</p>
    </div>
  </li>
</ul>
<hr/>
<ul class="cards-split-delay">
  <li class="title">
    <h2>Delayed split from middle</h2>
  </li>
  <li class="card card-1"><img src="http://lorempixel.com/400/250/city"/>
    <div class="content">
      <h1>Card 1 Title</h1>
      <p>Card description</p>
    </div>
  </li>
  <li class="card card-2"><img src="http://lorempixel.com/400/250/food"/>
    <div class="content">
      <h1>Card 2 Title</h1>
      <p>Card description</p>
    </div>
  </li>
  <li class="card card-3"><img src="http://lorempixel.com/400/250/animals"/>
    <div class="content">
      <h1>Card 3 Title</h1>
      <p>Card description</p>
    </div>
  </li>
</ul>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrishutchinson/animated-card-stacks-nafEp */
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  font-size: 14px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  margin: 20px;
  height: 2000px;
  background: linear-gradient(to left top, #F5A1D5 0%, #CDD3E9 100%);
}

h1, h2, h3, h4, h5, h6, p {
  font-weight: 300;
  margin: 0;
  padding: 0;
}

header.hero {
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 20px 0;
  border-bottom: 4px solid rgba(255, 255, 255, 0.6);
  margin: 0 0 20px;
}
header.hero h1 {
  font-size: 3em;
  color: #555;
  margin: 0 0 5px;
}

hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  padding: 0 0 20px;
}

ul.cards {
  width: 660px;
  margin: 0 auto 20px;
  height: 300px;
  list-style-type: none;
  position: relative;
  padding: 20px 0;
  cursor: pointer;
}
ul.cards li.title {
  margin: 0 0 20px;
}
ul.cards li.title h2 {
  font-weight: 700;
}
ul.cards li.card {
  background: #FFF;
  overflow: hidden;
  height: 200px;
  width: 200px;
  border-radius: 10px;
  position: absolute;
  left: 0px;
  box-shadow: 1px 2px 2px 0 #aaa;
  transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
}
ul.cards li.card img {
  max-width: 100%;
  height: auto;
}
ul.cards li.card div.content {
  padding: 5px 10px;
}
ul.cards li.card.card-1 {
  z-index: 10;
  -webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);
}
ul.cards li.card.card-2 {
  z-index: 9;
  -webkit-transform: rotateZ(-7deg);
          transform: rotateZ(-7deg);
  transition-delay: 0.05s;
}
ul.cards li.card.card-3 {
  z-index: 8;
  -webkit-transform: rotateZ(5deg);
          transform: rotateZ(5deg);
  transition-delay: 0.1s;
}
ul.cards.transition li.card {
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
}
ul.cards.transition li.card.card-1 {
  left: 440px;
}
ul.cards.transition li.card.card-2 {
  left: 220px;
}

ul.card-stacks {
  width: 660px;
  list-style-type: none;
  margin: 0 auto 20px;
  padding: 0;
  position: relative;
  cursor: pointer;
  height: 700px;
}
ul.card-stacks li.title {
  margin: 0 0 20px;
}
ul.card-stacks li.title h2 {
  font-weight: 700;
}
ul.card-stacks li.stack {
  position: absolute;
  left: 0px;
  transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.02);
}
ul.card-stacks li.stack ul.cards-down {
  position: relative;
  margin: 0 0 20px;
  padding: 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.card-stacks li.stack ul.cards-down li.card {
  transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.22);
  left: 0px;
  transition-delay: 0.4s;
  background: #FFF;
  overflow: hidden;
  height: 200px;
  width: 200px;
  border-radius: 10px;
  position: absolute;
  top: 0px;
  box-shadow: 1px 2px 2px 0 #aaa;
}
ul.card-stacks li.stack ul.cards-down li.card img {
  max-width: 100%;
  height: auto;
}
ul.card-stacks li.stack ul.cards-down li.card div.content {
  padding: 5px 10px;
}
ul.card-stacks li.stack ul.cards-down li.card.card-1 {
  z-index: 10;
  -webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);
}
ul.card-stacks li.stack ul.cards-down li.card.card-2 {
  z-index: 9;
  -webkit-transform: rotateZ(-7deg);
          transform: rotateZ(-7deg);
}
ul.card-stacks li.stack ul.cards-down li.card.card-3 {
  z-index: 8;
  -webkit-transform: rotateZ(5deg);
          transform: rotateZ(5deg);
}
ul.card-stacks.transition li.stack.stack-1 {
  left: 0px;
}
ul.card-stacks.transition li.stack.stack-2 {
  left: 220px;
}
ul.card-stacks.transition li.stack.stack-3 {
  left: 440px;
}
ul.card-stacks.transition li.stack ul.cards-down li.card {
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
}
ul.card-stacks.transition li.stack ul.cards-down li.card.card-1 {
  top: 440px;
}
ul.card-stacks.transition li.stack ul.cards-down li.card.card-2 {
  top: 220px;
}

ul.cards-split {
  width: 660px;
  height: 280px;
  list-style-type: none;
  position: relative;
  margin: 0 auto 20px;
  padding: 20px;
  cursor: pointer;
}
ul.cards-split li.title {
  margin: 0 0 20px;
}
ul.cards-split li.title h2 {
  font-weight: 700;
}
ul.cards-split li.card {
  background: #FFF;
  overflow: hidden;
  height: 200px;
  width: 200px;
  border-radius: 10px;
  position: absolute;
  left: 220px;
  box-shadow: 1px 2px 2px 0 #aaa;
  transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
}
ul.cards-split li.card img {
  max-width: 100%;
  height: auto;
}
ul.cards-split li.card div.content {
  padding: 5px 10px;
}
ul.cards-split li.card.card-1 {
  z-index: 10;
  -webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);
}
ul.cards-split li.card.card-2 {
  z-index: 9;
  -webkit-transform: rotateZ(-7deg);
          transform: rotateZ(-7deg);
  transition-delay: 0.05s;
}
ul.cards-split li.card.card-3 {
  z-index: 8;
  -webkit-transform: rotateZ(5deg);
          transform: rotateZ(5deg);
  transition-delay: 0.1s;
}
ul.cards-split.transition li.card {
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
}
ul.cards-split.transition li.card.card-1 {
  left: 0px;
}
ul.cards-split.transition li.card.card-2 {
  left: 440px;
}
ul.cards-split.transition li.card.card-3 {
  left: 220px;
}

ul.cards-split-delay {
  width: 660px;
  height: 280px;
  list-style-type: none;
  position: relative;
  margin: 0 auto 20px;
  padding: 20px;
  cursor: pointer;
}
ul.cards-split-delay li.title {
  margin: 0 0 20px;
}
ul.cards-split-delay li.title h2 {
  font-weight: 700;
}
ul.cards-split-delay li.card {
  background: #FFF;
  overflow: hidden;
  height: 200px;
  width: 200px;
  border-radius: 10px;
  position: absolute;
  left: 220px;
  box-shadow: 1px 2px 2px 0 #aaa;
  transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
}
ul.cards-split-delay li.card img {
  max-width: 100%;
  height: auto;
}
ul.cards-split-delay li.card div.content {
  padding: 5px 10px;
}
ul.cards-split-delay li.card.card-1 {
  z-index: 10;
  -webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);
}
ul.cards-split-delay li.card.card-2 {
  z-index: 9;
  -webkit-transform: rotateZ(-7deg);
          transform: rotateZ(-7deg);
  transition-delay: 0.6s;
}
ul.cards-split-delay li.card.card-3 {
  z-index: 8;
  -webkit-transform: rotateZ(5deg);
          transform: rotateZ(5deg);
  transition-delay: 0s;
}
ul.cards-split-delay.transition li.card {
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
}
ul.cards-split-delay.transition li.card.card-1 {
  left: 0px;
}
ul.cards-split-delay.transition li.card.card-2 {
  left: 440px;
}
ul.cards-split-delay.transition li.card.card-3 {
  left: 220px;
  transition-delay: 0.6s;
}


/*Downloaded from https://www.codeseek.co/chrishutchinson/animated-card-stacks-nafEp */
jQuery(document).ready(function($){
  $('ul.cards').on('click', function(){
    $(this).toggleClass('transition');
  });
  
  $('ul.card-stacks').on('click', function(){
    $(this).toggleClass('transition');
  });
  
  $('ul.cards-split').on('click', function(){
    $(this).toggleClass('transition');
  });
  
  $('ul.cards-split-delay').on('click', function(){
    $(this).toggleClass('transition');
  });
});

Comments