Sometimes you want to impress your users, and a way to do so is by using high-res background images combined with nice typography. This approach is definitely a current UI trend. The idea behind this resource is a bit deeper though: I was playing with some simple animations we see on mobile apps, and trying to integrate them into a desktop experience.
CSS3 transitions and animations make this easy to achieve. A point worth discussing about is: should we think about merging some mobile and desktop UX experiences, or should we treat them as two separate things? Food for thoughts.
Creating the structure
We used the <main> element to wrap the visible content. The navigation is outside the <main>, because it will slide in from the top. We needed to separate the 2 elements for the whole animation to work. The .cd-shadow-layer div is used to create a subtle shadow on top of the <main> element when it scales down, to make the 3D effect more realistic.
The .cd-blurred-bg will be used to create the blurred image layer. More about this in the "Adding style" section.
<main>
<section>
<h1><!-- title here --></h1>
<header>
<!-- logo and menu icon here -->
</header>
<div class="cd-blurred-bg"></div>
</section>
</main>
<div class="cd-shadow-layer"></div>
<nav>
<ul>
<li><!-- ... --></li>
</ul>
</nav>Adding style
To realize the animation, we used CSS3 Transformations combined with CSS3 Transitions, applied to 2 elements - <main> and <nav>. The translate and scale properties let us move the navigation and simulate the 3d movement of the main content (yes, you could have played with translateZ to achieve the same effect). Transitions, like butter (cit. Dan Cederholm), let properties values to smoothly switch from status A to status B.
#cd-main-content { /* this is the main element */
transition-property: transform;
transition-duration: 0.5s;
}
#cd-main-content.move-out {
transform: scale(0.6);
}
#main-nav { /* this is the navigation */
transform: translateY(-100%);
transition-property: transform;
transition-duration: 0.5s;
}
#main-nav.is-visible {
transform: translateY(0);
}About the blur effect: we created a clone of the <section> element, with the same background image. In order to apply the blur effect we needed to mask part of the content though. After some researches, I found this article on Codrops about how the clip property works. Only problem was: we don't know the offset value from the top, it depends by the device. Yes, we needed our pal jQuery to pass the values to the clip property. More on this in the next section.
.cd-blurred-bg {
/* we use jQuery to apply a mask to this element - CSS clip property */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/bg-img.jpg") no-repeat center center;
background-size: cover;
filter: blur(4px);
}Note that in order to have a full page content, regardless the viewport size, we had to set height: 100% for both <html> and <body>.
Events handling
We didn't do a lot in jQuery. The only thing worth noting is the function to set the clip property of the .cd-blurred-bg element.
function set_clip_property() {
var $header_height = $('.cd-header').height(),
$window_height = $(window).height(),
$header_top = $window_height - $header_height,
$window_width = $(window).width();
$('.cd-blurred-bg').css('clip', 'rect('+$header_top+'px, '+$window_width+'px, '+$window_height+'px, 0px)');
}
