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/
