There is no better time than the end of the year for some fresh inspiration! One of the most popular trends this year, features splitscreen layouts, lots of white space, clean typography and subtle effects. With this playful trend in mind, I’ve created a two-part tutorial to show you how to use flexbox, 3D transforms and Animate.css to create a delightful landing page for a fictional fashion brand.
In this week’s part one, we’ll focus on the structure, interaction effects and putting Animate.css to work.
See the Pen CSS Responsive Full Screen Duo Layout With Overlay Content by Vail (@vailjoy) on CodePen.27486
Structure
Our layout is created using a simple flexbox grid.
<div class="grid">
<!--Left side-->
<div id="west" class="column effect-hover">
<div class="content">
...
</div>
</div>
<!--Right side-->
<div id="east" class="column effect-hover">
<div class="content">
...
</div>
</div>Each column in this main layout gets a unique ID, #west for the left side and #east for the right. These are used to set a unique background image on each and will be used again later in our jQuery to link each side to its content layer.
To ensure optimal scaling across all screens, we use viewport units to keep the grid wrapper full-screen. Since the width of the overall grid is defined this way, we can set each column’s width to 50% to ensure they are always half the wrapper (or in this case, the screen width).
.grid {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.grid .column {
position: relative;
overflow: hidden;
width: 50%;
text-align: center;
cursor: pointer;
}
Finally, we have a content div we will be manipulating with some CSS transforms and transitions to create the interactions on each side. Since our design is for a fictional shoe brand, we’ve limited this content to a slogan and call to action that will navigate our visitors to view women’s feature or men’s. We don’t need extra links or buttons here – the entire thing will be interactiable.
<div class="content">
<i class="fa fa-venus" aria-hidden="true"></i>
<h2>Go <span>West</span></h2>
<h3>Do something amazing</h3>
<p>And Click</p>
</div>
Interactions
CSS transitions allow property changes in CSS values to occur smoothly over a specified duration. CSS transforms allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space. Combining the two, you can achieve a variety of effects and simple animations.
In the interest of keeping things easy to read for the purpose of the demo, we have segregated out the effects applied to each column and content div with the effect-hover class. You could just as easily add these to .column and .column .content depending on your project and how general your selectors can be.
<div id="west" class="column effect-hover">Next, I’ll breakdown each of the effect-hover rules.
Using a pseudo-element ::before, we create the rectangle that appears by applying a border, then use rotate3d to make it a diamond, and translate3d, scale3d and transform-origin to make it appear out of the background. This is visually similar to the zoom effect we will add to the page layer with Animate.css, but is not as powerful.
.effect-hover .content::before {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
border: 3px solid #fff;
content: "";
opacity: 0;
transition: opacity 0.35s, transform 0.35s;
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
}
We get it to appear on hover by setting the opacity to 1:
.effect-hover:hover .content::before {
opacity: 1;
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}
To fade out the h2 we set the opacity to 0 and use scale3d for the subtle zoom out:
.effect-hover:hover h2 {
opacity: 0;
transform: scale3d(0.8,0.8,1);
}
Ensures a smooth fade:
.effect-hover h2,
.effect-hover h3,
.effect-hover p,
.effect-hover i{
transition: opacity 0.35s, transform 0.35s;
}
The opacity is set to 0 on the h3 and p so it is hidden initially:
.effect-hover p,
.effect-hover h3{
opacity: 0;
transition: opacity 0.35s, transform 0.35s;
}
Then we bring it back on hover:
.effect-hover:hover h3,
.effect-hover:hover p{
opacity: 1;
}
We use scale3d again to enlarge the icon as the h2 fades away:
.effect-hover:hover i{
transform: scale3d(2.5,2.5,2);
}
Full Page Layer
Our duo layout achieves three primary things:
- Brand statement
- Navigation through choice
- UX
We want visitors to focus on navigating to one of two main areas and not be distracted by a long scroll right away on the landing page. To achieve this, we have placed the relevant content into two separate overlays that will serve as the main page for each category. When the user interacts with one side or the other, this page layer needs to fill the screen and display its contents.
This method of content presentation should be familiar. You have probably seen similar effects used for menus, off-canvas "drawers", lightboxes and modal popups in the last few years.
There are hundreds of ways to go about this, so we chose a pure CSS approach for simplicity and performance that harnesses the visual elegance of the Animate.css library. This offers several advantages over animating everything in jQuery. CSS animations make it possible to truly animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints. Animations take many more rules and lines of code than transforms. The Animate.css library compiles all of these into an easy framework we can tap into by simply including it in the project and adding the animation class to the element we want to affect.
We start by creating a simple div to wrap each page, which will sit inside the body as siblings of the main layout.
<div id="east-overlay" class="overlay"></div>Each of these gets a unique ID and a shared class of overlay.
.overlay{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100vh;
width: 100vw;
display: none;
}
We use absolute positioning to place the page layer over the original layout, then size it using viewport units. We don’t want it to show until the user initiates it, so the display is set to none for now.
When the overlay is opened, it not only needs to become visible, but provide a foundation for whatever page layout we will put there. Using display: flex solves both problems, and the rest of the rule defines a single layout column within which our next content grid will sit:
.overlay.open{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}
As you can see, this rule would require the open class to be on the overlay div. The animation we want to apply to the overlay on open also depends on the div having the animated ana zoomIn classes from the Animate.css library. This is where we will use some very simple jQuery to add the classes when the user interacts with one of the two columns of our main layout.
$(document).ready( function(){
$("#west .content").click( function() {
$("#west-overlay").addClass("animated zoomIn open").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass("animated zoomIn");
});
});
});
The English translation of this would be:
- Line 2 – when the content div inside the #west column is clicked
- Line 3 – Add the classes animated, zoomIn and open to the #west-overlay div, which will perform the effect, then listen for the animation to end and
- Line 4 – Remove the animated and zoomIn class since we don’t need it anymore
To see it in action, open your browser inspector and watch the #west-overlay div as you click the left diamond and it’s correponding overlay opens.
Resources
Part Two
In part two, I’ll show you how to gracefully display the content of this overlay, add subtle microinteractions to keep things interesting, and apply a final transition/transform combo to animate our close button, which will kick off one more jQuery snippet to animate the overlay once again and remove our open class to hide it when its done. View it here.