Új hozzászólás Aktív témák

• #6216 Sk8erPeter nagyúr lesaux #6215

  Új Válasz 2014-11-13 23:52:37 #6216

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Sk8erPeter

  nagyúr

  válasz lesaux #6215 üzenetére

  Itt egy CSS3-as feature-t használnak, konkrétan a transitiont, amivel effektet/animációt lehet hozzáadni az elemek stílusának megváltoztatásához (így lehet egy átmeneted JavaScript vagy Flash használata nélkül is (persze sokszor a JavaScript nem kihagyható, a jelen példában is van egy minimális JS-kód, erről mindjárt)).
  Itt csak annyi történik, hogy egyes elemek szélességének növelésével, illetve csökkentésével játszanak, mindezt egy finom átmenettel animálva, attól függően, hogy hol tartasz a scrollozásban. Ha az oldal legtetején vagy, akkor csak 2 ikont látsz, ha lejjebb görgetsz, mind az 5 ikon megjelenik (tehát 3 ikonnal bővül a segédmenü). Ezt egyszerűen úgy érik el, hogy JavaScripttel figyelik a görgetés állapotát (legtetején vagy az oldalnak, vagy lejjebb), és ha a legtetején vagy, akkor 0 pixelre állítják az elrejtendő ikonok szélességét, ha meg akarják jeleníteni, akkor az általuk meghatározott 36px-re (mindegyik ikon ilyen széles itt).
  DE a JavaScript-kód itt csak minimális szerepet játszik, annyi a feladata, hogy a görgetés állapotától függően hozzáad, illetve elvesz egy osztályt a konténerelemről, konkrétan a scroll-at-top osztályt - nevéből következően ez azt jelenti, hogy megjelenik az osztály az elemen, ha az oldal legtetején vagy, de eltávolításra kerül, ha lejjebb görgetsz.

  Ez a div a konténerelem:
  <div class="fixed-header fixed-header-line show-up-and-share-buttons scroll-at-top" id="fixed-header">
  ...
  </div>

  Itt látható, hogy az osztályok között szerepel a scroll-at-top osztály, ha lejjebb görgetsz, így fog kinézni:

  <div class="fixed-header fixed-header-line show-up-and-share-buttons" id="fixed-header">
  ...
  </div>

  Csak annyi történt, hogy lekerült a scroll-at-top osztály.

  Ezen a konténeren belül egy main osztállyal ellátott <ul> elem tartalmazza a menüpontokat.

  Na, ez a CSS-kód vonatkozik az ELREJTETT ikonokra:

  .fixed-header.scroll-at-top .main .icon-indexlogo-fixedheader, .fixed-header.show-up-and-share-buttons.scroll-at-top .main .icon-up, .fixed-header.show-up-and-share-buttons.scroll-at-top .main .icon-share {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  }

  A lényeg a width:0, tehát 0 pixel alapból a szélessége ezeknek az ikonoknak.
  A lejjebb görgetett állapotnál ez a fontos kódrészlet:

  .fixed-header .main .icon-indexlogo-fixedheader, .fixed-header.show-up-and-share-buttons .main .icon-up, .fixed-header.show-up-and-share-buttons .main .icon-share {
  width: 36px;
  transition: width 200ms,padding 200ms;
  }

  Látható, hogy itt a második kódrésznél a width property-t 36px-re állítják, ÉS egy CSS3-as transition property értéke is meg van adva: width 200ms,padding 200ms; - ez azt jelenti, hogy a szélesség, illetve a padding tulajdonságok animációjának időtartama 200ms legyen.

  Tehát ennyi a lényeg: 0 pixelről 36 pixelre nő a szélesség, 200ms-os animációval, amennyiben lekerül a fixed-header konténerelemről a scroll-at-top osztály, illetve fordítva, amikor rákerül ez az osztály a konténerelemre (a szülőelemek egyikére), akkor 0 pixelre csökken a szélesség, ugyanígy animálva.

  Remélem, valamennyire tiszta volt a magyarázat.

  Szerk.: jézusom, most látom, mennyit írtam, már megint szófosásom van.

  =============

  (#6213) Jim-Y:
  Nahát, olyan gonosz vagy, cö-cö-cö, hát ilyet.

  =============

  (#6211) honda 1993:
  Majd linkeld be nekünk légyszi a <table_2> tag specifikációját a W3C ajánlásában, szívesen elolvasnánk! Jöhet a többi számmal ellátott elem is!

  Mielőtt elfelejtem: IKSZDÉ!

  [ Szerkesztve ]

  Sk8erPeter

Új hozzászólás Aktív témák