A Pen by Colin.

CSS3-Animated-Grid-Boxes.markdown

CSS3 Animated Grid Boxes

experimenting with content presentation for a landing page.

A Pen by Colin on CodePen.

License.

index.html

<h1>Animated Info Boxes</h1>

<div class="board">

  <section>
    <div class="tile cover">
      <i class="entypo-spotify"></i>
      <h5>Spotify</h5>
    </div>
    <div class="tile desc">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ab ipsa commodi quas voluptatibus?</span>
      <a href="">View Project</a>
    </div>
  </section>
  
   <section>
    <div class="tile cover">
      <i class="entypo-dropbox"></i>
         <h5>Dropbox</h5>
    </div>
    <div class="tile desc">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ab ipsa commodi quas voluptatibus.</span>
      <a href="">View Project</a>
    </div>
  </section>
  
   <section>
    <div class="tile cover">
      <i class="entypo-evernote"></i>
      <h5>Evernote</h5>
    </div>
    <div class="tile desc">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ab ipsa commodi quas voluptatibus.</span>
      <a href="">View Project</a>
    </div>
  </section>
  
   <section>
    <div class="tile cover">
      <i class="entypo-github"></i>
      <h5>Github</h5>
    </div>
    <div class="tile desc">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ab ipsa commodi quas voluptatibus?</span>
      <a href="">View Project</a>
    </div>
  </section>
  
  <section>
    <div class="tile cover">
       <i class="entypo-smashing"></i>
      <h5>Smashing</h5>
    </div>
    <div class="tile desc">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ab ipsa commodi quas voluptatibu?</span>
      <a href="">View Project</a>
    </div>
  </section>
  
  
  <section>
    <div class="tile cover">
       <i class="entypo-twitter"></i>
      <h5>Twitter</h5>
    </div>
    <div class="tile desc">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ab ipsa commodi quas voluptatibus!</span>
      <a href="">View Project</a>
    </div>
  </section>
  
</div>

script.js

// http://webdesignerdepot.com/2014/01/how-to-create-a-slidable-grid-with-jquery/

$(document).ready(function() {
  $('section').click(function() {
    var $this = $(this);
    if ($this.hasClass("show-desc")) {
       $this.find('div.cover').css({top: "0"});
       $this.find('div.desc').css({top: "100%"});
       $this.find('[class*="entypo-"]').removeClass('spin-out').addClass('spin-in');
      $this.find('.cover h5').addClass('scoot-in');
       $this.removeClass("show-desc");
    }
    else {
       $this.find('div.cover').css({top: "-100%"});
       $this.find('div.desc').css({top: "0"});
       $this.find('[class*="entypo-"]').removeClass('spin-in').addClass('spin-out');
       $this.find('.cover h5').removeClass('scoot-in').addClass('scoot-out');
       $this.addClass("show-desc");
    }
  });
});

style.scss

@import "compass";
@import url(http://weloveiconfonts.com/api/?family=entypo);

@mixin animate($name, $duration, $delay, $function: ease, $mode: both) {
  @include experimental(animation, $name $duration $delay $function $mode); }

$h: "Montserrat Alternates";
$wht: #fff;
$grey: #fafafa;
$t: #a5a5a5;

%clearfix {
  &:after {clear:both;content:"";display:table;}
  &:before { content:"";display:table;} }

*, *:before, *:after {
  @include box-sizing(border-box);}

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  font-style: normal;}

i {
  font-size: 4em;
  display: block;
  line-height: 1;}

h5 {
  font-family: $h;
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1;
  margin: .5em; 
  position: relative;
  z-index: 99;}

body {
  background: $grey;
  color: $t;
  text-align: center;
  padding: 2em 0 0;
  font-family: $h;
  font-weight: 400;}

.board {
  width: 860px;
  margin: 4em auto;
  @extend %clearfix; 
}

section {
  width: 33.333333333333333%;
  display: block;
  float: left;
  position: relative;
  height: 12em;
  border: 1px solid darken($wht, 5%);
  overflow: hidden;}

.tile {
  padding: 2em .8em;
  position: absolute;
  width:100%;height:100%;
   @include transition(top .55s ease-in);
  &:hover {cursor: pointer;}
}

.desc {
  top: 100%;
  padding-top: 4em;
  background: darken($wht, 3%)
  span {display: block;margin: 0 0 .75em;}
}

/*** Animations ***/
@-webkit-keyframes spinOut {
  0% {
    -webkit-transform: rotate(0deg);
   opacity: 1.0;}
  100% {
    -webkit-transform: rotate(360deg);
    opacity: 0;}}
@-webkit-keyframes spinIn  {
  0% {
    -webkit-transform: rotate(0deg);
  opacity: 0;}
  100% {
    -webkit-transform: rotate(-360deg);
  opacity: 1.0;} }

@-webkit-keyframes scootOut  {
  0% {
    -webkit-transform: translateY(0);}
   5% {
    -webkit-transform: translateY(-15px);}
  100% {
     -webkit-transform: translateY(110px);} }

@-webkit-keyframes scootIn  {
  0% {
    -webkit-transform: translateY(110px);}
  66% {
    -webkit-transform: translateY(-5px);}
  100% {
     -webkit-transform: translateY(0px);} }

@-moz-keyframes spinOut {
  0% {
    -moz-transform: rotate(0deg);
   opacity: 1.0;}
  100% {
    -moz-transform: rotate(360deg);
    opacity: 0;}}
@-moz-keyframes spinIn  {
  0% {
    -moz-transform: rotate(0deg);
  opacity: 0;}
  100% {
    -moz-transform: rotate(-360deg);
  opacity: 1.0;} }

@-moz-keyframes scootOut  {
  0% {
    -moz-transform: translateY(0);}
   5% {
    -moz-transform: translateY(-15px);}
  100% {
     -moz-transform: translateY(110px);} }

@-moz-keyframes scootIn  {
  0% {
    -moz-transform: translateY(110px);}
  66% {
    -moz-transform: translateY(-5px);}
  100% {
     -moz-transform: translateY(0px);} }


.spin-in {
  @include animate(spinIn, .4s, .2s); }
.spin-out {
  @include animate(spinOut, .4s, 0s); }
.scoot-out {
  @include animate(scootOut, .5s, 0s); }
.scoot-in {
  @include animate(scootIn, 1s, 0s); }