Making an Impressive Product Showcase with CSS3

Gauloran

Kıdemli Moderatör
7 Tem 2013
8,094
585
local
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 ******** that will be the backbone of today's example.

index.html
Kod:
<!DOCTYPE html>
<html>
    <head>
        <**** charset="utf-8" />
        <title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>

        <!-- Google Webfonts and our stylesheet -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="impress" class="impress-not-supported">

            <!-- The Slides Will Go Here -->

        </div>

        <a id="arrowLeft" class="arrow"><</a>
        <a id="arrowRight" class="arrow">></a>

        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="assets/js/impress.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>
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.

css3-product-showcase.jpg


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:

Kod:
<!-- The first slide retains its default position. We could omit the data attributes -->
<div id="intro" class="step" data-x="0" data-y="0">
    <h2>Introducing Galaxy Nexus</h2>
    <p>Android 4.0<br /> Super Amoled 720p Screen<br />
    <img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>

<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
    <h2>Simplicity in Android 4.0</h2>
    <p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p>
    <img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>

<!-- Same for the rest.. -->
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
    <h2>Connect & Share</h2>
    <p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p>
    <img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>

<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
    <h2>Instant Upload</h2>
    <p>Your photos upload themselves with Instant Upload, which makes ..</p>
    <img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>

<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
    <h2>Jam on with Google Music</h2>
    <p>Google Music makes discovery, purchase, and listening effortless and..</p>
    <img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>
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
Kod:
/*----------------------------
    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.

Kod:
/*----------------------------
    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
Kod:
$(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.

quote
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.