spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Roman Hraška 11.8.2011
Hodnoť článok:
3 0

Animovaná CSS3 / jQuery galéria

Mohutný tutoriál, kde sa pozrieme na tvorbu fešnej, pomocou CSS3 a jQuery rozanimovanej galérie obrázkov. Pribaľte si horalky, chvíľu to potrvá. Alebo resanku.

Viete čo je fajn spôsob, ako sa naučiť nové veci? Ukázať prstom na niečo, čo sa vám páči a pokúsiť sa to zreplikovať. Príklad: behnete na inventables.com, poviete si "hej, fajn galéria", vyhrniete rukávy a zbúchate podobnú.

Druhá možnosť - nájdete si nejakého tĺka, čo spraví špinavú robotu za vás a ešte vám to aj vysvetlí. Dobrý deň, ja som váš tĺk pre tento tutoriál a budem vás sprevádzať tvorbou galérie inšpirovanej inventables.com:) Aby to ale nebola len špinavá kópia, my ju vylepšíme!

Čo budeme vyrábať

skús demo »    stiahni kód »

Ak behnete na pôvodnú galériu v novej Opere/Chrome/Safari/Firefox 4+, uvidíte po prechode myšou nad obrázok plynulú animáciu farby pozadia. Ak behnete na našu galériu v čomkoľvek, uvidíte to isté. Bo naša je lepšia:)

Animácie fungujú naprieč prehliadačmi a nie sú obmedzené na jednu farbu. Schválne, skúste pobehať nad poslednými troma obrázkami na prvej strane. A to ani nehovorím a všetkom tom peknom texte:) Ta pome.

Pravidlá hry

1) Nepoužijeme obrázky. Okrem tých v galérii, samozrejme.
2) Kde sa bude dať, využijeme silu CSS3.
3) Kde sa dať nebude, zachránime situáciu pomocou jQuery.
4) IE smrdí. Budeme však dbať na to, aby aj v ňom galéria zostala použiteľná.

Graceful degradation. Ľudia s Explorermi nám síce budú závidieť efektíky, ale galéria bude plne fungovať aj im. Operu, Firefox, Chrome a Safari (ideálne v najnovších verziách) budem v článku nazývať "moderné prehliadače".

Ešte malá rada na úvod: táto galéria bude, pre účely tutoriálu, efektami jemne prepchaná. Chceme sa predsa naučiť čo najviac, že? Pri "skutočnom" (nudnom) projekte by sme sa trochu krotili.

Nadpis


Začneme na začiatku. Tam hore. Kde je nadpis.

@font-face

Z x spôsobov, ako dostať na stránku netradičné písmo, sme zvolili CSS @font-face. Oproti iným implementáciám (Javascript, Flash, nahradenie obrázkom, ...) má tú výhodu, že text je označiteľný a vidí ho aj Google. Existuje tiež kopa nápomocných služieb, napríklad Google Font Directory. Tu si stačí vybrať font, v našom prípade Dancing Script, skopčiť jeden riadok...

<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>

...a prihodiť ho v hlavičke HTML k odstatným CSSkám. Aj keď nechápem, prečo používajú apostrofy namiesto klasických úvodzoviek, beťári. No nič, potom už len klasicky:

h1 { font-family: 'Dancing Script' }

Pozor si však treba dať na to, či vybraný font rozumie slovenčinovi. V našom prípade sme pre h1 takticky zvolili text anglický;)

Skopčená google adresa smeruje na obyčajné CSSko s @font-face deklaráciou. Čím viac CSS súborov však pridávame, tým sa stránka pomalšie načítava. Ak chceme ich počet držať na minime, môžeme namiesto linku stiahnuť celý balíček aj s písmami a klasicky sa na ne odkazovať v globálnom CSS súbore. Ak by sme veľmi chceli.

Ďalší výborný zdroj pre fonty je fontsquirrel.com a v kometároch snáď tiež čo to pribudne:)

CSS transform

Mimochodom, všimli ste si, že je naše nové pekné písmo jemne naklonené? V moderných prehliadačoch teda. Takto:

h1 {
  webkit-transform: rotate(-2.3deg); /* chrome & safari */
  -moz-transform: rotate(-2.3deg); /* firefox papá toto */
  -o-transform: rotate(-2.3deg); /* opera ďakuje */
  transform: rotate(-2.3deg);  /* listen, doc, about the future... */
}

CSS transform sme si už ukázali v článku CSS3 Animácie: Lepšie než na Apple.com, kde sme transformácie dokonca animovali! Tu sme skromní a stačí nám to natočiť o -2.3 stupňa:)

IE, prekvapivo, dokáže natočiť element tiež (viac tu), avšak iba o 0, 90, 180 alebo 270 stupňov, čo nám nevyhovuje. Zaobídeme sa však v pohode aj bez toho, je to len pridaná hodnota pre nás moderných.

CSS text-shadow

A čo tá 3D skoro-že-až-plastickosť? Tiene!

h1 { text-shadow: 1px 1px 0px #CF3226, 2px 2px 0px #ccc, 3px 3px 0px #ccc, 4px 4px 0px #c3c3c3; }

text-shadow: 1px 1px 0px #CF3226 pridá textu tieň odsadený zľava [1px], zhora [1px], rozmazaný cez [0px] vo farbe [#CF3226].

Tieňov však môžeme pridávať koľko len chceme!

Stačí oddeliť čiarkou a pokračovať. Každá séria je odsadená o 1px ďalej, čo vytvára efekt hĺbky. Celé CSS pre náš <h1> vyzerá nasledovne:

h1 {
  font: normal 76px 'Dancing Script', serif;
  color: #DF5045;
  position: relative;
  left: -5px;

  text-shadow: 1px 1px 0 #CF3226, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #c3c3c3;

  webkit-transform: rotate(-2.3deg); /* chrome & safari */
  -moz-transform: rotate(-2.3deg); /* firefox papá toto */
  -o-transform: rotate(-2.3deg); /* opera ďakuje */
  transform: rotate(-2.3deg);  /* listen, doc, about the future... */
}

Modernizr

Ako sme si povedali, čo zvládne CSS spravíme cez CSS, inak sa obrátime na jQuery. Modernizr je nástroj rozoznávajuvší (ha!) čo za CSS3 a HTML5 fičúry prehliadač podporuje. Je to JavaSriptový súbor, ktorý po pridaní na stránku spraví nasledovné:

Ak nie je zrovna príliš zaneprázdený ignorovaním písmena "e", pridáva <html> elementu class-y, z ktorých je jasné, k čomu máme prístup a k čomu nie. Vytvorí tiež globálny JavaScript object, menom Modernizr, ktorý nesie atribúty pre každú z fičúr s hodnotou true / false, podľa podpory. Toto môžeme využiť jednak v CSS...

/* za normalnych okolnosti pridame priesvitny border */
img { border: 1px solid rgba(0, 0, 0, 0.07); } 

/* ak nema rgba podporu, klesneme na pevnu farbu */
.no-rgba img { border: 1px solid #efefef; }

...a taktiež neskôr v jQuery:

// ak browser nepodporuje css transitions...
if ( $('html').hasClass('no-csstransitions') )
{
  // jQuery to the rescue!
}

// alebo este lepsie
if ( !Modernizr.csstransitions )
{
  // jQuery to the even better rescue!
}

Veľkosť súboru sa dá okresať zostavením vlastného modernizr buildu. Budeme kontrolovať iba podporu css transitions a rgba, takže stačí zaškrtnúť tieto 2 políčka a sme o zopár kB bohatší. True story.

Galéria

V prvom rade sa potrebujeme rozhodnúť, aký rozmer dáme obrázkom. Ak sa jedná, ako v prípade našej inšpirácie, o galériu produktov, je dobré zvoliť všetkým obrázkom jednotný rozmer. Oko tak získa záchytné body, pevné línie, na ktorých môže hľadať názvy čo popisy bez skákania hore dole po stránke.

Ale tak je to na vás;) Naše obrázky majú 195 x 135px.

HTML

HTML štruktúru prebehneme zrýchlene, aby sme sa dostali k zábavným veciam. Plus nie je nič jednoduchšie, ako kuknúť na zdroják stránky. Ok. Sú aj jednoduchšie veci. Napríklad.. dýchať. Ale chápeme sa. Je to.. vcelku jednoduché. Uhm..

<div id="galeria">
  <div class="riadok">

    <ul>
      <li class="obrazok green">
	    <a href="#"><img src="assets/images/sackboy.png" alt="sackboy"></a>
      </li>
      <li class="popis">
        <a href="#">sackboy</a>
      </li>
    </ul>

  </div>
</div>

<ul> elementy predstavujú jednotlivé políčka, majú nastavený float: left; štyri z nich sú obalené v <div class="riadok"> ktorý pomocou overflow: hidden; ruší float-ovanie. Tento obal je nutný, aby sa nám nerozhádzal layout, ak by napríklad popis bol na viac riadkov. Všetky žijú pod <div id="galeria">.

<li class="obrazok"> je element zodpovedný za animáciu. Po prechode myšou naň (:hover) zmeníme farbu jeho pozadia - background - a keďže je o niekoľko pixelov väčší ako <img> zasadený v jeho strede, tento background vytvára široký okraj.

Ako druhý class môžeme zadať farbu okraja. Za normálnych okolností sa animuje na zelený, posledné 3 však majú background fialový (.purple), modrý (.blue) a červený (.red). Tieto máme zadefinované v CSS a nie je problém kedykoľvek doplniť nové.

CSS pre .obrazok

.obrazok {
  background: #fff; /* biele pozadie na zaciatok */
  text-align: center; /* obsah, img, bude v strede */
  border: 1px solid transparent; /* nech to neskace, ked neskor pridame border */

  /* tien za obrazkom, vytvara kvazi-border */
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  /* jemne zaoblime rohy, pretoze preco nie? */
  -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}

/* ak sa neda pouzit tien ako border, pouzijeme skutocny border */
.no-rgba .obrazok {
  border: 1px solid #ddd;
}

border: 1px solid transparent; vytvorí okolo elementu priesvitný, neviditeľný boder.

Na čo je nám také niečo dobré? Po prechode myšou budeme pridávať border farebný a ak by sme tam predtým žiaden nemali, zbadali by sme nepekný skok - element by totiž zrazu bol, kvôli novo získanému borderu, o 1px širší aj vyšší. Takto pridáme border, ktorý síce nevidíme, ale je tam:) A doskákali sme.

CSS pre .obrazok img

.obrazok img {
  width: 195px; height: 135px; /* nastavime pevne rozmery, pre istotu */
  border: 1px solid rgba(0, 0, 0, 0.07); /* neat trick s priesvitnym borderom */
  vertical-align: middle; /* aby bol zasadeny pekne v strede, vertikalne */
  -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
}

/* ak nemame rgba, musime zabudnut na neat trick a pouzit pevny border */
.no-rgba .obrazok img {
  border: 1px solid #efefef;
}

Hrabaním sa v kóde inventables galérie som objavil šikovný rgba trik. Pozrime sa napríklad na border okolo <img>. Namiesto očakávaného zadefinovania bledošedej farby tu máme:

border: 1px solid rgba(0, 0, 0, 0.07);

Čo je vlastne čierna farba (rgb hodnota reprezentovaná 3ma nulami) s viditeľnosťou nastavenou na 7% (štvrtý argument, 0.07). Prečo? Nuž, na pôvodom bielom pozadí rodiča sa javí ako šedý. Ak však tento background po prechode myšou zmeníme na zelený, zmení sa aj náš priesvitný border na bledo zelený. You know, kvôli priesvitnosti :) Tá zaručí, že náš border bude vždy o kúsok tmavší. Konkrétne o 7% tmavší. Stále však vo farbe pozadia, aj počas jej plynulej zmeny.

Ok, poďme plynule meniť farbu pozadia.

CSS3 animácie

Ak máme podporu CSS transitions, nastavíme atribúty animácie pre naše .obrazok elementy. Chceme animovať background a zároveň aj border. Na to nám poslúži tento ukrutne fešný zápis:

.csstransitions .obrazok {
  -o-transition-property: background-color, border; /* co chceme animovat */
  -o-transition-duration: .25s, .25s; /* ako dlho ma kazda animacia trvat */
  -o-transition-timing-function: ease-in, ease-in; /* typ prechodu */

  -moz-transition-property: background-color, border;
  -moz-transition-duration: .25s, .25s;
  -moz-transition-timing-function: ease-in, ease-in;

  -webkit-transition-property: background-color, border;
  -webkit-transition-duration: .25s, .25s;
  -webkit-transition-timing-function: ease-in, ease-in;

  transition-property: background-color, border;
  transition-duration: .25s, .25s;
  transition-timing-function: ease-in, ease-in;
}

Ak by sme animovali len jeden atribút, stačil by skrátený zápis transition: border .25s ease-in;, takto však potrebujeme plný, nie-tak-celkom-praktický-do-vrecka zápis.

Táto zmena nastane, ak si ju vyžiadame. Ak sa nastavíme nad obrázok myšou, .obrazok:hover, zmeníme farbu pozadia a okraja.

.csstransitions .obrazok:hover {
  background-color: rgb(134,191,62); /* fallback pre browser bez rgba */
  background-color: rgba(134,191,62,.8);
  border: 1px solid rgb(116,165,54);
}

Toto bol plynulý prechod na zelenú. Chceme však zabezpečiť aj farby iné, čo sa odvíja od spomínaného druhého class-u. V našom CSS teda máme nasledovné:

/*  zelena/default  */
.csstransitions .obrazok:hover, .csstransitions .green:hover {
  background-color: rgb(134,191,62); /* fallback pre browser bez rgba */
  background-color: rgba(134,191,62,.8);
  border: 1px solid rgb(116,165,54);
}

/*  fialova  */
.csstransitions .purple:hover {
  background-color: rgb(191,62,140);
  background-color: rgba(191,62,140,.8);
  border: 1px solid rgb(165,54,142);
}

/*  cervena  */
.csstransitions .red:hover {
  background-color: rgb(239,59,66);
  background-color: rgba(239,59,66,.8);
  border: 1px solid rgb(165,54,54);
}

/*  modra  */
.csstransitions .blue:hover {
  background-color: rgb(119,185,239);
  background-color: rgba(119,185,239,.8);
  border: 1px solid rgb(77,149,207);
}

A nie je problém pridať farby nové! To by sme mali, poďme si vybaviť staršie prehliadače.

jQuery animácie

jQuery ponúka metódu .animate(), ktorá dokáže (prekvapivo) animovať CSS atribúty. Ako napríklad pozíciu, šírku, atď. Avšak farby, to čo potrebujeme, nezvláda. Naštastie do jQuery môžeme pchať kopu pluginov, vrátane tohto tu, ktorý dokáže animovať farbu, vrátane rgba.

Základná štruktúra nášho jQuery kódu, na ktorú budeme nabaľovať veci:

$(function()
{
  // skontrolujeme ci browser podporuje css transitions
  ...

    // ak nie, nastavime farby - musia korespondovat s classmi v css
    // ak pridame novy class, pridame novu farbu aj sem
    ...

    // dynamicky nacitame color animations plugin
    ...

    // po prichode mysou nad obrazok plynule zmenime farby
    // po odchode mysi vratime vsetko do povodneho stavu
    ...

  // bonus: cely obrazok spravime klikatelny, vratane okrajov
  // kliknutie aj na okraj sposobi redirect, rovnako ako kliknutie na link
  ...
});

Ak prehliadač nepodporuje transitions, vytvoríme si object colors = { } v ktorom budú uložené jednotlivé farby. Ich názov bude zhodný s css class-om farby a rovnako budú zhodné aj farby pozadia a okraja. Ak pridáme novú farbu do CSS, nemali by sme zabudnúť ju pridať aj sem, do colors.

$(function()
{
  // ak browser nepodporuje css transitions...
  if ( !Modernizr.csstransitions )
  {

    // nastavime farby, musia korespondovat s classmi v css
    // ak pridame novy class, pridame novu farbu aj sem
    var colors = {
        green:   { bg: 'rgba(134,191,62,.8)',  border: 'rgb(116,165,54)' },
        purple:  { bg: 'rgba(191,62,140,.8)',  border: 'rgb(165,54,142)' },
        red:     { bg: 'rgba(239,59,66,.8)',   border: 'rgb(165,54,54)' },
        blue:    { bg: 'rgba(119,185,239,.8)', border: 'rgb(77,149,207)' }
    };

    // dynamicky nacitame jquery color animations plugin, verziu s rgba podporou
    $.getScript('assets/js/jquery.color.js', function()
    {
      ...
    });
  }
});

Po dynamickom načítaní pluginu cez $.getScript() si v prvom rade uložíme pôvodné hodnoty bordera a backgroundu, aby sme sa k nim mohli vrátiť. Potrebujeme si ich uložiť, pretože tieto nemusia byť vždy rovnaké. Kým napríklad Chrome, vďaka podpore rgba, bude mať border priehľadný, IE bude mať plnú farbu. Využijeme na to $.data();

Následne na každý .obrazok zavoláme metódu $.hover(), ktorá akceptuje 2 funkcie. Prvá sa spustí po vniknutí kurzora do obrázku, druhá po úteku z miesta činu. V každej z nich vykonáme príslušnú animáciu.

// dynamicky nacitame jquery color animations plugin, verziu s rgba podporou
$.getScript('assets/js/jquery.color.js', function()
{
  // ulozime si povodne farby borderov a backgroundu, pretoze mozu byt pre kazdy browser ine
  $('.obrazok').data('borderColor', $('.obrazok').css('borderTopColor'));
  $('.obrazok').data('bgColor', $('.obrazok').css('backgroundColor'));

  // mouse in, mouse out, animujeme
  $('.obrazok').hover(
  function(e) // mouse in
  {
    // vytiahneme farbu z class, alebo zvolime deafultnu
    // potom vlozime nastavenia (farby) do objectu, ktory pojde do animate
    // border musime nastavit pre kazdu hranu zvlast.. uh..
    var cl = $.trim($(this).attr('class').split(' ')[1]) || 'green',
        obj = {
          backgroundColor:  colors[cl].bg,
          borderTopColor:   colors[cl].border, borderLeftColor:   colors[cl].border,
          borderRightColor: colors[cl].border, borderBottomColor: colors[cl].border
        };

    // ANIMATION, YAY!
    $(this).stop().animate( obj , 350, 'linear' );
  },
  function(e) // mouse out
  {
    // povodne farby vytiahneme z $.data() co sme si hore ulozili pre tento element
    var bgColor = $(this).data('bgColor'),
        borderColor = $(this).data('borderColor'),
        obj = {
          backgroundColor:  bgColor,
          borderTopColor:   borderColor, borderLeftColor:   borderColor,
          borderRightColor: borderColor, borderBottomColor: borderColor
        };

    // COME ON, DO THE TWIST!
    $(this).stop().animate( obj , 350, 'linear' );
  });
});

Pozorní medzi nami si však, hrajúc sa s galériou, možno všimli, že animácie máme okrem obrázku aj na linku pod ním. Ten sa tiež začervená postupne. Do jQuery kódu teda pridáme kontrolu, či hoverujeme nad linkom alebo li-elementom a tu je náš výsledný megakód:

$(function()
{
  // ak browser nepodporuje css transitions...
  if ( !Modernizr.csstransitions )
  {

    // nastavime farby, musia korespondovat s classmi v css
    // ak pridame novy class, pridame novu farbu aj sem
    var colors = {
        green:   { bg: 'rgba(134,191,62,.8)',  border: 'rgb(116,165,54)' },
        purple:  { bg: 'rgba(191,62,140,.8)',  border: 'rgb(165,54,142)' },
        red:     { bg: 'rgba(239,59,66,.8)',   border: 'rgb(165,54,54)' },
        blue:    { bg: 'rgba(119,185,239,.8)', border: 'rgb(77,149,207)' }
    };

    // dynamicky nacitame jquery color animations plugin, verziu s rgba podporou
    $.getScript('assets/js/jquery.color.js', function()
    {
      // ulozime si povodne farby borderov a backgroundu, pretoze mozu byt pre kazdy browser ine
      $('.obrazok').data('borderColor', $('.obrazok').css('borderTopColor'));
      $('.obrazok').data('bgColor', $('.obrazok').css('backgroundColor'));

      $('.obrazok, .popis a').hover(
      function(e) // mouse in
      {
        if (e.target.tagName == 'A') // link
        {
          var obj = {  color: '#DF5045' };
        }
        else // obrazok
        {
          // vytiahneme farbu z class, alebo zvolime deafultnu
          // potom vlozime nastavenia (farby) do objectu, ktory pojde do animate
          // border musime nastavit pre kazdu hranu zvlast.. uh..
          var cl = $.trim($(this).attr('class').split(' ')[1]) || 'green',
              obj = {
                backgroundColor:  colors[cl].bg,
                borderTopColor:   colors[cl].border, borderLeftColor:   colors[cl].border,
                borderRightColor: colors[cl].border, borderBottomColor: colors[cl].border
              };
        }

        // ANIMATION, YAY!
        $(this).stop().animate( obj , 350, 'linear' );
      },
      function(e) // mouse out
      {
        if (e.target.tagName == 'A') // link
        {
          var obj = {  color: '#888' };
        }
        else // obrazok
        {
          // povodne farby vytiahneme z $.data() co sme si hore ulozili pre tento element
          var bgColor = $(this).data('bgColor'),
              borderColor = $(this).data('borderColor'),
              obj = {
                backgroundColor:  bgColor,
                borderTopColor:   borderColor, borderLeftColor:   borderColor,
                borderRightColor: borderColor, borderBottomColor: borderColor
              };
        }

        // COME ON, DO THE TWIST!
        $(this).stop().animate( obj , 350, 'linear' );
      });

    });
  }

  // ...bonus

});

Dôležité je, že toto celé (vrátane samotného načítania skriptu/pluginu), sa deje iba ak si to prehliadač nevie vybaviť sám pomocou CSS. Progressive enhancement jak sviňa! :)

A teraz malý bonus. Vieme, že ako link funguje iba samotný <img> v strede .obrazok, avšak okraj sa rozsvieti nech už hoverujeme nad ktorýmkoľvek z nich. Dávalo by teda zmysel, aby to celé fungovalo ako link. Tomu môžeme takisto pomôcť cez jQuery. Tento kus kódu už bude mimo if ( !Modernizr.csstransitions ) podmienky, pretože to chceme pridať pre úplne každý prehliadač:

// spravime cely obrazok klikatelny, vratane okrajov
$('.obrazok').mouseenter(function()
{
	$(this).css('cursor', 'pointer'); // ikonka ruky znazorni klikatelnost ;)
})
.click(function() // kliknutie kdekolvek na obrazok, vratene okraju, sposobi redirect
{
	window.location.href = $(this).find('a').attr('href');
});

So yeah.

Epilóg

Tie guličky pri posledných troch obrázkoch len dávajú najavo, že tu máme do činenia s inou farbou efektu. Na živej stránke by neboli, tu však sú a sú tiež vytvorené čisto pomocou CSS:

.dot {
  width: 6px; height: 6px; /* stvorec 6x6 pixelov */
  display: inline-block; /* aby element ziskal block vlastnosti */
  margin: 0 0 1px 1px; /* troska si ho poposuvame */

  /* oble rohy, polovica z hrany stvorca nam da polmer a vytvori kruzok */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  /* tien, vytvori jemny dojem zapustenosti do pozadia */
  -webkit-box-shadow: 1px 1px 0 #fff;
  -moz-box-shadow: 1px 1px 0 #fff;
  box-shadow: 1px 1px 0 #fff;
}

Je to vlastne štvorec 6x6 pixelov, ktorý má zoblené rohy. Na 3px. Čo je polovica dĺžky steny. Čiže polomer. Čiže dostaneme krúžok:) Fuck yes, people.

Uff..

Takže. Bola to strastiplná púť, ale máme gelériu. Galériu, ktorá sa možno kvôli rozdielom v prehliadačoch správa v každom trochu inak, čo je však úplne v poriadku. Prístup "stránka musí vyzerať v každom prehliadači na pixel rovnako" je hlúposť.

Neexistuje dôvod, prečo by v lepšom nemohla vyzerať lepšie, najmä ak je toto vylepšenie otázka chvíľky a nemá negatívny dopad. Dôležité však je, aby fungovala všade.

Ok, toto je všetko pekné a krásne, galéria si však pýta naplnenie skrz nejaký ten dynamický jazyk na pozadí. Keď rozdýchate toto kvantum textu, neváhajte a pustite sa do toho - naučte sa u nás CodeIgniter, Yii alebo nette a bude:)

Ak chcete vedieť viac o jQuery, ochutnajte sériu jQuery video-tutoriálov (v epizódach 10 a 11 pridáme do tejto galérie ďalšie stránky a zAJAXujeme ju!). A zlepšite sa vo všetkom cez TurboTip.

Aj keď sa to vzhľadom na dĺžku článku môže zdať neuveriteľné, nepopísal som tu každý riadok kódu a neodhalil každý trik. Nebojte sa však, spravte to čo ja - nažhavte firebugy, vlezte mi do kódu a narobte z neho márnu padrť! Neexistuje lepší spôsob, ako sa niečo naučiť:)

skús demo »    stiahni kód »

Ok. Stačilo.

Roman Hraška Roman Hraška

Robí s webom a občas o tom napíše. Nekomplikuje jednoduché a snaží sa neznieť príliš dôležito, pretože nie je. Medzi jeho záľuby patria jeho záľuby a tautológia. Nájdeš ho na brm.sk a obsmŕda aj na twitteri, ako @yablko.

Skús moje seriály: Nauč sa jQuery, Nauč sa CodeIgniter a Yablkov TurboTip. Ak ma chceš dohnať k tvorbe nových seriálov, behni na yablko.sk :)


Hodnoť článok:
3 0

5 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Matěj Habarta 14.8.2011 12:21:02
Moc pěkné.
0 0 Roman Hraška 11.8.2011 12:19:37
@michal to by to bolo ešte dlhšie a to už by sme neprežili:) ale máš pravdu, galéria si to pýta.. ja som tu však chcel hlavne ukázať ten animovaný background efekt:)
0 0 Zoltán Onódy 11.8.2011 11:27:27
mohol si to spraviť ako turbo tip, síce toto by bolo dlhšie
0 0 Zoltán Mitlík 11.8.2011 11:04:32
vyborne :) diky :)
0 0 Michal Fiala 11.8.2011 10:58:57
Veľmi pekné , chválim, len mi chýba ešte neaký pop-up ;) toť vsjo
Zajtra.sk > Programovanie > CSS/HTML > Animovaná CSS3 / jQuery galéria


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama