Multi-Layer Page Reveal Css Jquery Effects Tutorial
Today we’d like to show you how to create a simple and modern page transition effect. Maybe you have spotted some of the cool effects seen on sites like Nation or Keep Portland Weird, where two or more layers of overlays are animated across the page to reveal some new content. Let’s see how we can do something like that. We’ll focus on the animation part only, not the loading of content. For the effects we’ll be using CSS Animations. Attention: We’ll be using CSS Animations and viewport units which are only supported in modern browsers.
[Demo/Download]
The Markup For our simple demo, we’ll create a full width and height layout with some arrows that will trigger the overlay animations. The idea is to show a page and in the middle of an overlay animation, switch to another page. While we will be just working with static content, you could plug your dynamic solution in here that fetches some data on the fly. Our markup looks as follows: <body> <main class="container"> <div class="pages"> <div class="page page--current"> <!-- intro page content --> </div><!-- /page -->
<div class="page"> <!-- some other page --> </div> </div><!-- /pages --> <nav class="pagenav"> <!-- buttons that will trigger the overlay animations --> </nav> </body>
</main>
The structure for the overlay will be inserted with JavaScript. We’ll work with a division that is placed as a fixed element on top of everything else. Depending on the direction, we’ll give that element some classes that will help us apply styles properly. The overlay will contain a number of layers that we will be able to define. Each of the layers will have a background color that we’ll set and also a specific animation in our stylesheet. One example for how the “revealer” might look: <div class="revealer revealer--right"> <div class="revealer__layer"></div> <div class="revealer__layer"></div> <div class="revealer__layer"></div> </div>
Each layer will additionally have its background color set. In order to create unique effects, we want to animate each layer individually. For that we set the parent initially to an off-screen position and then animate the layers in. This initial setting of the main element is done in our script (see below). The animation behavior of the layers is then defined in our stylesheet depending on the effect class, along with other styles for the page to be revealed.
The CSS First, let’s take a look at some general styles for our body, container and pages (vendor prefixes omitted): html, body { min-height: 100vh; overflow-x: hidden; } .js .container { position: relative; height: 100vh; overflow: hidden; } .js .pages {
position: relative; overflow: hidden; width: 100vw; height: 100vh; z-index: 0; } .page {
padding: 6.5em; background: #66c6ff; display: flex; flex-direction: column;
} .js .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; z-index: 1; } .js .page--current { visibility: visible; position: relative; }
We want our page to be full width and height and hide any overflow. By default, and with JS (we use Modernizr), the pages are hidden and the current class sets the respective one to be visible. We want to make sure that our layout is functional without JavaScript, so we add the “conditional” styles. Let’s see how the style for the revealer looks like. So we want to place the revealer on top of everything, with a fixed position: .revealer { width: 100vw; height: 100vh; position: fixed; z-index: 1000; pointer-events: none; }
Depending on which direction we are currently using, we need to set some initial positioning styles. In our script, as we will see in a bit, we will set some other transforms in order to insure that the top side of our revealer is always the one facing towards the screen. This will simplify the effects because the inner layer animations will always be the same (moving upwards), so we
don’t need to define new animations for each direction if the parent is rotated and positioned correctly: .revealer--cornertopleft, .revealer--cornertopright, .revealer--cornerbottomleft, .revealer--cornerbottomright { top: 50%; left: 50%; } .revealer--top, .revealer--bottom { left: 0; } .revealer--right, .revealer--left { top: 50%; left: 50%; } .revealer--top { bottom: 100%; } .revealer--bottom { top: 100%; }
The layers will have a default background color which will be then targeted individually for each effect in a dynamic way: .revealer__layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #ddd; }
Next, let’s check out an example effect. The three layer effect adds an animation to each layer with a special easing function. The anim–effect class is added to the body so that we know which effect we are currently using. The revealer–animate is given to the revealer in order to trigger the animations. As we can see here, we are adding the same animation properties to all the layers, except for the animation-name. With three different animations, we define the delays of each within the
keyframes. Like that we ensure that all animations end in the same moment but allow for different appearance timings: .anim--effect-3 .page:nth-child(2) { background: #F3A3D3; } .anim--effect-3 .revealer--animate .revealer__layer { animation: anim-effect-3-1 1.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards; } .anim--effect-3 .revealer--animate .revealer__layer:nth-child(2) { animation-name: anim-effect-3-2; } .anim--effect-3 .revealer--animate .revealer__layer:nth-child(3) { animation-name: anim-effect-3-3; } @keyframes anim-effect-3-1 { 0% { transform: translate3d(0, 0, 0); } 25%, 75% { transform: translate3d(0, -100%, 0); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 100% { transform: translate3d(0, -200%, 0); } } @keyframes anim-effect-3-2 { 0%, 12.5% { transform: translate3d(0, 0, 0); } 37.5%, 62.5% { transform: translate3d(0, -100%, 0); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 87.5%, 100% { transform: translate3d(0, -200%, 0); } } @keyframes anim-effect-3-3 { 0%, 25% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); } 75%, 100% { transform: translate3d(0, -200%, 0);
}
}
What we do here is to make the first layer move first but then “pause” in the middle until 75% while on top of the visible screen. Then we move it to the opposite direction to reveal the new content. The same happens for the other two layers, just that here we start them at different keyframes, decreasing the “pause”. The last layer does not have a pause at all, it just goes through to the other side, starting at 25%.
[Demo/Download]