Someone asked on this group https://www.facebook.com/groups/webdeveloperitaliani/permalink/1012941225452415/ how to create a transition akin to the one on the Goldman Sachs homepage (http://www.goldmansachs.com/).
Here's a pure-css solution (not general nor super elegant but I only had 20min to spare).
A Pen by Claudio Brandolino on CodePen.
| <div id="container"> | |
| <div id="content-1" class="content current"> | |
| <div class="row"> | |
| <div class="cell cell-1 animate-1"> | |
| </div> | |
| <div class="cell cell-1 animate-2"> | |
| </div> | |
| <div class="cell cell-1 animate-3"> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="cell cell-3 animate-4"> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="content-2" class="content next"> | |
| <div class="row"> | |
| <div class="cell cell-1 animate-1"> | |
| </div> | |
| <div class="cell cell-1 animate-2"> | |
| </div> | |
| <div class="cell cell-1 animate-3"> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="cell cell-3 animate-4"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
| $( -> | |
| $('div').on 'click', -> | |
| $('.content.current').removeClass('current').addClass('old') | |
| $('.content.next').removeClass('next') | |
| ) |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
| $screen-width: 1000px; | |
| #container { | |
| position: relative; | |
| width: $screen-width; | |
| height: 80vw; | |
| margin: auto; | |
| overflow: hidden; | |
| background-color: #333; | |
| .content { | |
| position: absolute; | |
| width: 100%; | |
| &.old .cell { | |
| transform: translate(-$screen-width,0); | |
| } | |
| &.next .cell { | |
| transform: translate($screen-width,0); | |
| } | |
| .row { | |
| width: 100%; | |
| .cell { | |
| height: 200px; | |
| float: left; | |
| &.cell-1 { | |
| width: $screen-width/3; | |
| } | |
| &.cell-3 { | |
| width: $screen-width; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| $cell-delay: 100ms; | |
| $transition-duration: 600ms; | |
| @for $i from 1 through 4 { | |
| $base-delay: ($i - 1 ) * $cell-delay; | |
| $next-delay: $base-delay + $transition-duration; | |
| .cell.animate-#{$i} { | |
| background-color: rgb($i * 50, (255 - $i * 50), 200 - $i * 20); | |
| transition: all $transition-duration ease-in; | |
| transition-delay: $next-delay; | |
| .content.old & { | |
| transition: all $transition-duration ease-in; | |
| transition-delay: $base-delay; | |
| } | |
| } | |
| } | |