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

• Sk8erPeter nagyúr

  #3143

  #3142 Soak

  2013-01-11 21:47:31

  Új Válasz

  Ú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

  

  Sk8erPeter

  nagyúr

  #3142 Soak

  #3142 Soak

  És amúgy mi volt az oka, hogy a széles background-image-re esett a választás? Annak egyszerűsége?

  Az egyik, hogy egyszerű, managelhetőbb mintha minden videohoz tartoznak 10 kép. Jelenleg a konvertálás után 10 kocka egyenlő elosztásban kiválasztásra kerül, majd ezek összefűzve alkotják az eltolandó hátteret. Aztán a másik az volt ugye, hogy első nekifutásra jónak tűnt, hogy 0 delay-el be tudja tölteni a hovert a browser mert ugye "cache"-be már ott van. De ez után én is eljutottam az általad felvetett problémához, hogy ha van 30 video, abból 2-3nál fog lefutni a funkció, akkor 27-szer több adatot küldtem mint kellett volna.

  A képek mindig egységesen erre a méretre lesznek igazítva (dícsértessék az Imagick), tehát ezzel nem lesz gond, így megvan a képkocka effektus (hogy ugrál a kép és nem pedig folyamatos a mozgása, mint az első példában).

  Két megoldás vetődött fel bennem:

  1.

  Két kép lesz, 1 ami amúgyis az első kocka lenne, a 2. ami eddig is volt, de az csak nyilván hover-re töltene be (esetleg még egy mini load animációval) .

  2.
  Két kép lesz, az egyik ami az első kocka lenne, a második pedig egy GIF, ami hoverre ugyanezt játszaná le, ennek előnye, hogy JS nélkül is működik.
  Szerk : De persze a GIF sem lesz sokkal kisebb mint a 10 öszefüzött kép, ezért esélyes az első megoldás.

  Szerintem a JS nélküli működésre itt nem érdemes építeni, legfeljebb CSS3-as újításokkal megoldani az animációt, amennyiben a böngésző támogatja, amennyiben nem, na akkor lépne életbe a JS-sel való animálgatás, pont ilyenekre nagyon jól használható például a Modernizr, ezt tudom ajánlani, mert ilyenekre nagyon fasza. Én például olyanra használtam (csak egy kiragadott példa), hogy alapból CSS3-mal animáltam egy menü fel-lecsúszkálódását, aztán egy jQuery-kódban pedig a megfelelő Modernizr által JS-sel beállított class meglétét ellenőriztem, így tudtam csekkolni, adott böngészőben megvan-e a CSS3-as property támogatása, vagy sem (pl. IE8), ha nem, csak akkor kellett a jQuery-vel animálgatást beizzítani. Szerintem ez manapság járható út.

  A két ötleted közül az elsőt én abszolút jónak tartom, én asszem azt választanám. Esetleg egy data-attribútummal (http://api.jquery.com/data/) is be lehetne állítani a hoverre betöltendő képet.

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