unfold four divs to give effect that they are opening, one after another

Question

You will see on this page when the page loads the four divs fold out giving a really cool effect.

I have no idea how to do this. I have seen that jQuery UI offers a fold-effect - see here , however this isn't really what I am looking for.

I have also looked at many answers on here but cannot find any to answer my specific question.

Can anyone provide any guidance on how to do this.

My current code is below, along with a jsfiddle.

html

<div class="wrap">
  <div class="bg"></div>
  <div class="main-container artists">

    <div class="employee-box">
    </div>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-1">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- back content -->
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-2">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- front content -->
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-3">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- back content -->
        </div>
      </div>
    </div>
  </div>

css

body{
  height: 2000px;
}
.wrap {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167792/mountains_copy.jpg') no-repeat center center;
  background-size: cover;
  transform: scale(1.1);
}

.employee-box {
  background-color: red;
  height: 250px;
  width: 250px;
  float:left;
}

.employee-1 {
  background: yellow;
}

.employee-2 {
  background: pink;
}

.employee-3 {
  background: green;
}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  display: inline-block;
}

.container-border{
  border: 1px solid #ccc; 
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container, .front, .back {
  width: 250px;
  height: 250px;
}

/* flip speed goes here */
.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  background-color: #fff;
}

Answer 1

Here is one approach to get you started. You'll see in this version that all the transforms are flipping the same direction. My advice would be to use nth-child in your CSS to customize each flip container. You'll have to play with the transform-origin and rotational direction ( rotateX / rotateY ), so that each flip appears to feed into the next. I could have gone farther, but wanted to leave the rest of the fun to you.

You'll notice that I added 7 lines of JavaScript—-a simple way to stagger the assignment of the hover class on each container. Another approach would be to use the transition-delay property on each container, making it all appear to flip sequentially. Yet another way to do this could be to use the transitionend event, assigning the hover class on the container after the one having just completed its transition.

In the end, I chose a simple loop with a timeout. The choice is yours.

 var flip_containers = document.querySelectorAll(".flip-container"), assignHover = function(container, index) { setTimeout(function() { container.classList.add("hover"); }, index * 350); }; [].forEach.call(flip_containers, assignHover); 

 -body{ height: 2000px; } .wrap { height: 100%; position: relative; overflow: hidden; } .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167792/mountains_copy.jpg') no-repeat center center; background-size: cover; transform: scale(1.1); } .employee-box { background-color: red; height: 250px; width: 250px; float:left; } .employee-1 { background: yellow; } .employee-2 { background: pink; } .employee-3 { background: green; } /* entire container, keeps perspective */ .flip-container { perspective: 1000px; display: inline-block; } .container-border{ border: 1px solid #ccc; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 250px; height: 250px; } /* flip speed goes here */ .flipper { transition: 0.8s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); background-color: #fff; } 

 <div class="wrap"> <div class="bg"></div> <div class="main-container artists"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front employee-1"> <!-- front content --> </div> <div class="back"> <!-- back content --> </div> </div> </div> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front employee-1"> <!-- front content --> </div> <div class="back"> <!-- back content --> </div> </div> </div> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front employee-2"> <!-- front content --> </div> <div class="back"> <!-- front content --> </div> </div> </div> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front employee-3"> <!-- front content --> </div> <div class="back"> <!-- back content --> </div> </div> </div> </div> 

https://jsfiddle.net/kj06pf3a/