Making an Impressive Product Showcase with CSS3

A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be descriptive. Naturally, this is the place where you build up the visitor’s interest towards your product, but it is getting increasingly difficult to be original in grabbing their attention. Luckily, a new compact JavaScript library can help you make a splash.
impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects. But what if we used impress.js for something other than a presentation? This is what we are doing today – we will be spicing up a plain old product page with some CSS3 magic!

The HTML

We start of with a simple HTML5 document that will be the backbone of today’s example.

index.html



    
        
        Impressive CSS3 Product Showcase | Tutorialzine Demo

        <!-- Google Webfonts and our stylesheet

< > -->

Nothing unusual here. Along with the Google Webfonts include in the head, we also have our main stylesheet (we will go back to it in the next section) and a number of JavaScript source files before the closing body tag.
The #impress div will hold the slides. The id is required in order to be recognized by impress.js (you can override this by passing a different id to the impress function call in script.js). After this, we have the arrows that initiate the slide transitions.
Last on the page, we have our JavaScript source files. impress.js is standalone and does not need jQuery to work, but we will be including it so we can listen for clicks on the arrows in our script.js file.

CONNECT & SHARE

Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing with mobile devices just as easy at it is in person.

CSS3 Product Showcase

Each of the slides of our showcase contains three elements – a title, a paragraph of text, and a smartphone image. These are all positioned uniquely for each slide. The promo images and text for this example were taken from Google’s Galaxy Nexus web site.
The elements of the slides are grouped into individual “step” divs inside the #impress container. With this we have set the stage for impress.js!

Using impress.js

With this tiny library, we can create smooth CSS3 transitions between the slides of our showcase. To do this, we have to instruct impress.js on how to orient the slides. This is easy to do – we will use data attributes on the step divs. These attributes are translated into real CSS3 transformations by the library, depending on the current browser, and affect the slide.
Impress.js supports a number of attributes:

data-x, data-y, data-z will move the slide on the screen in 3D space;
data-rotate, data-rotate-x, data-rotate-y rotate the element around the specified axis (in degrees);
data-scale – enlarges or shrinks the slide.

You can see the markup for the slides below:




Introducing Galaxy Nexus
Android 4.0
 Super Amoled 720p Screen

 




Simplicity in Android 4.0
Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..






Connect & Share
Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. 





Instant Upload
Your photos upload themselves with Instant Upload, which makes ..





Jam on with Google Music
Google Music makes discovery, purchase, and listening effortless and..

When the slideshow starts, impress.js will compensate for these transformations, and apply the reverse rules to the #impress div with a smooth CSS transition. The result is the eye-catching presentation you see in the demo. Of course, this comes at the price that you have to manually tweak the data attributes of each slide for the best result.

The CSS

To make the presentation work, we will have to apply some CSS rules. The first step is to style the presentation container and declare default styling for the slide elements.

assets/css/style.css

/*----------------------------

Styling the presentation
-----------------------------*/

#impress:not(.impress-not-supported) .step{
 opacity:0.4;
}

#impress .step{
 width:700px;
 height: 600px;
 position:relative;
 margin:0 auto;

 -moz-transition:1s opacity;
 -webkit-transition:1s opacity;
 transition:1s opacity;
}

#impress .step.active{
 opacity:1;
}

#impress h2{
 font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
 color:#444648;
 position:absolute;
 z-index:10;
}

#impress p{
 font: normal 18px/1.3 'Open Sans', sans-serif;
 color:#27333f;
 position:absolute;
 z-index:10;
}

#impress img{
 position:absolute;
 z-index:1;
}

As you can see in the rules above, and in the HTML fragment in the beginning of this tutorial, the #impress container is assigned a .impress-not-supported class. The class is removed only if the current browser supports the functionality required for the library to run successfully.
Now we need to style the individual slides. I will only include the classes for the first slide here, you can find the rest in assets/css/styles.css.

/*----------------------------
 Slide 1 - Intro
-----------------------------*/

#impress #intro{
 width: 500px;
}

#intro h2{
 text-align: center;
    width: 100%;
}

#intro p{
 font-size: 22px;
    left: 290px;
    line-height: 1.6;
    top: 220px;
    white-space: nowrap;
}

#intro img{
 top: 120px;
}

All that is left is for a quick JS snippet to initiate impress.js, and listen for clicks on the arrows.

jQuery

To initialize the impress library we need to call the method of the same name. This will also return a new object, with methods for showing the previous / next slides.

script.js

$(function(){

 var imp = impress();

 $('#arrowLeft').click(function(e){
  imp.prev();
  e.preventDefault();
 });

 $('#arrowRight').click(function(e){
  imp.next();
  e.preventDefault();
 });

});

With this our impress-ive product showcase is complete!

Done!

You can use this example for product and landing pages, feature showcases and with some randomization you could even turn it into an image gallery.

Search This Blog

designart