Napravite neverovatan HTML5 CSS3 jQuery prikaz proizvoda

16 april 2012
Napravite neverovatan HTML5 CSS3 jQuery prikaz proizvoda

Stranica o proizvodu prikazuje neki proizvod u svom najboljem svetlu. Ona treba da opiše njegove funkcionalnosti, sadrži slike i bude kratka i jasna što je više moguće. Normalno, ona je i mesto koje vašem posetiocu treba da privuče i zadrži pažnju i izgradi interesovanje za vaš proizvod ili uslugu, ali ponekad se čini da postaje sve teže ostvariti ovaj cilj. Srećom, nova i kompaktna JavaScript bibilioteka može napraviti veliku razliku u načinu na koji pravite stranicu o vašem proizvodu.

impress.js je mala, nezavisna biblioteka koja olakšava dizajniranje naprednih CSS3 prezentacija sa efektima koji zaista prijaju oku. Ali, šta ako iskoristimo impress.js za nešto drugo osim za prezentaciju? To je upravo ono što ćemo uraditi danas - doteraćemo staru i dosadnu stranicu o proizvodu uz malo CSS3 magije.

 

 

HTML struktura

Počećemo sa jednostavnom HTML5 stranicom koja će biti osnova našeg projekta.

index.html
<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title>Neverovatan HTML5/CSS3/jQuery prikaz proizvoda</title>
        
        <!-- Google Webfontovi i nas stylesheet -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow" /> 
        <link rel="stylesheet" href="/resursi/css/stil.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">
            
        <!-- Slajdovi ce ici ovde -->
 
        </div>

        <!-- Strelice za navigaciju -->
        <a id="strelicaLevo" class="strelica"><</a>
        <a id="strelicaDesno" class="strelica">></a>

        <!-- Footer sekcija -->
        <footer>
            <h2><i>Tutorijal:</i> Neverovatan HTML5 CSS3 jQuery prikaz proizvoda</h2>
            <a class="webarena" href="http://www.webarena.rs/napravite-neverovatan-html5-css3-jquery-prikaz-proizvoda">Pogledajte ceo tutorijal na <i>Web Areni</i> i preuzmite kompletan primer</a>
        </footer>
        
        <!-- JavaScript include-ovi -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="/resursi/js/impress.js"></script>
        <script src="/resursi/js/skripta.js"></script>

    </body>
</html>

Ništa neobično za sada. U zaglavlje dokumenta uključili smo Google Web Fontove i glavnu šemu za stilove (CSS) kao i JavaScript fajlove kojima ćemo se posvetiti nešto kasnije.

#impress div će sadržati slajdove. Ovaj identifikator (id) je potreban kako bi bio prepoznat od strane impress.js biblioteke. Nakon ovoga, imamo strelice za navigaciju koje će inicirati tranzicije između slajdova.

Na kraju naše HTML stranice, imamo JavaScript izvorne fajlove. impress.js je nezavisan fajl, i nije mu potreban jQuery da bi radio, ali svakako ćemo ga priključiti kako bi mogli da "osluškujemo" klikove na strelice u našem skripta.js fajlu.

Svaki od slajdova sadrži tri elementa - naslov, paragraf teksta i sliku pametnog telefona. Sve ove slike su jedinstveno pozicionirane za svaki slajd. Slike za ovaj primer su preuzete sa sajta Google Galaxy Nexus-a.

Elementi slajdova su grupisani u individualne "step" div-ove koji se nalaze unutar #impress kontejnera. Sa ovim završenim, sve je spremno za impress.js!

 

Korišćenje impress.js biblioteke

Sa ovom malom bibliotekom, možemo kreirati glatke CSS3 tranzicije između slajdova koji prikazuju naš proizvod. Da bi postigli ovo, trebamo da "pokažemo" impress.js biblioteci kako da orijentiše slajdove. Ovo se lako može izvesti - koristićemo atribute podataka na koracima div-ova. Ovi atributi se prevode u prave CSS3 transformacije u biblioteci, u zavistnosti od trenutnog web browser-a, i utiču na slajd.

Impress.js podržava par atributa:

  • data-x, data-y, data-z će pomerati slajd na ekranu u 3D prostoru;
  • data-rotate, data-rotate-x, data-rotate-y će rotirati element oko navedene ose (izraženo u stepenima)
  • data-scale - uveličava ili smanjuje slajd

Možete videti HTML sturkturu ispod:

<!-- Prvi slajd zadrzava svoju podrazumevanu poziciju -->
<div id="uvod" class="step" data-x="0" data-y="0">
   <h2>Novi Galaxy Nexus</h2>
   <p>Android 4.0<br /> Super Amoled 720p ekran<br /> 1.2 GHz Dual Core CPU<br /> 32 GB prostora za skladištenje<br /> Brza kamera</p>
   <img src="/resursi/slike/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>

<!-- Pravimo blagi pomeraj drugog slajda, rotirajuci ga i cineci ga 1.8 puta vecim -->            
<div id="jednostavnost" class="step" data-x="1500" data-y="1200" data-scale="1.8" data-rotate="190">
   <h2>Android 4.0</h2>
   <p>Android 4.0, Ice Cream Sandwich donosi potpuno novi izgled. Jednostavne postavke sa suptilnim animacijama, i divnan osećaj cvetanja čini da sve izgleda kao da je živo</p>
   <img src="/resursi/slike/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>

<!-- Isto vazi za ostale -->
<div id="povezivanje" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="450">
   <h2>Konektuj se i podeli</h2>
   <p>Deljenje sadržaja je izuzetno bogato. Galaxy Nexus čini da deljenje izmedu pametnih telefona bude kao da delite u stvarnom životu. </p>
   <img src="/resursi/slike/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>
            
<div id="upload" class="step" data-x="-400" data-y="1200" data-rotate="520">
   <h2>Instant Upload</h2>
   <p>Vaše fotografije se same upload-uju zahvaljujući Instant upload funkciji, što čini da deljenje sa porodicom i prijateljima bude lakše nego ikada.</p>
   <img src="/resursi/slike/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>
            
<div id="muzika" class="step" data-x="-1200" data-y="3000" data-scale="0.3" data-rotate="270">
   <h2>Google Music</h2>
   <p>Google Music za otkrivanje nove muzike i zabavu. Skladištite vašu kolekciju muzike besplatno, i reprodukujte muziku na Galaxy Nexusu, računaru, ili drugim Android uređajima.</p>
   <img src="/resursi/slike/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>

Kada se slajdovi pokrenu, impress.js će primeniti transformacije na #impress div sa glatkim CSS tranzicijama. Krajnji rezultat je prezentacija koja je jako prijatna za oko, što možete videti i u demonstraciji. Naravno, ovo dolazi po cenu da posvetite neko vreme i ručno optimizujete atribute podataka za svaki slajd, kako bi dobili najbolje rezultate.

 

CSS

Da bi ova naša lepa prezentacija radila, potrebno je da primenimo neka CSS pravila. Prvi korak je da stilizujemo kontejner prezentacije, i definišemo podrazumevane stilove za svaki od elemenata.

resursi/css/stil.css

/*----------------------------
    Stilizovanje prezentacije
-----------------------------*/

/* Ako impress nije podrzan */

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

/* Tranzicije i transparentnost */

#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;
}

.strelica{
    width: 32px;
    height: 54px;
    background: url('../slike/strelice.png') no-repeat;
    position: fixed;
    top: 50%;
    margin-top: -27px;
    cursor: pointer;
    text-indent: -9999px;
    overflow:hidden;
    opacity: 0.8;
    border: none !important;
    text-decoration: none !important;
    
    -moz-transition: 0.2s opacity;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
}

.strelica:hover{
    opacity: 1;
}

#strelicaLevo{
    left: 45px;
}

#strelicaDesno{
    right: 45px;
    background-position: top right;
}

/* Sakrij strelicu ako impress nije podrzan */

#impress.impress-not-supported + .strelica,
#impress.impress-not-supported + .strelica + .strelica{
    display: none;
}

Kao što možete videti u pravilima iznad, #impress kontejner je dodeljen klasi .impress-not-supported. Ova klasa se uklanja samo ako web pregledač podržava funkcionalnost koja je zahtevana da bi biblioteka radila ispravno.

Sada je potebno da stilizujemo individualne slajdove. Navešću samo klase za prvi slajd ovde, ostatak možete pronaći u resursi/css/stil.css.

/*----------------------------
    Slajd 1 - uvod
-----------------------------*/

#impress #uvod{
    width: 500px;
}

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

#uvod p{
font-size: 17px;

    left: 290px;
    line-height: 1.6;
    top: 220px;
    white-space: nowrap;
}

#uvod img{
    top: 120px;
}

Sve što je ostalo je da napišemo par linija JavaScript kôda, koje će "osluškivati" klikove na strelice.

 

jQuery

Da bi inicijalizovali impress biblioteku, trebamo da pozovemo istoimeni metod. Ovo će takođe vratiti nov objekat, sa metodama za prikaz prethodnog, odnosno sledećeg slajda.

$(function(){
    
    var imp = impress();
    
    $('#strelicaLevo').click(function(e){
        imp.prev();
        e.preventDefault();
    });
    
    $('#strelicaDesno').click(function(e){
        imp.next();
        e.preventDefault();
    });

});

 

To je to!

Sa ovim smo završili našu elegantnu stranicu za prikaz proizvoda. Možete koristiti ovaj primer kao odredišnu stranicu (eng. landing page), za prezentaciju proizvoda ili usluga, a uz malo eksperimentisanja, možete napraviti od nje čak i galeriju slika.

 

 

Napomena: impress.js biblioteka radi u Chrome-u, Firefox-u i Safari-u. Dok Opera i Internet Explorer još uvek nemaju punu podršku za HTML5 i CSS3. Iako postoje ispravke (eng. fix-evi), još uvek nisu dovedene do nivoa koji će podržati ispravan prikaz slajdova.

Preuzeto sa: http://tutorialzine.com/css3-product-showcase/

Bojan Dimitrovski

Bojan Dimitrovski

Computer Science Engineer. Zaljubljen u sve na web-u i oko njega. Front-end developer i HTML5/CSS3 entuzijasta. Zainteresovan za nove medije. U slobodno vreme praši klavijature i gitaru.

Web: bojandimitrovski.com/ E-mail: Ova adresa el. pošte zaštićena je od spam napada, treba omogućiti JavaSkript da biste je videli

Social Profiles

DreamWeb Hosting

Arena @ Twitter

Arena @ Facebook