Safari 4 intro animation


képünk illusztráció

Leloptam és offline nézegethetővé tettem a Safari 4 intro animációját, amit a Safari 4 beta első telepítése után látunk. Mint kiderült, nem QuickTime embeddelt moziról van szó, hanem JavaScriptből és CSS-ből összerakott kis animációt láthatunk. Egyedül a Safari ikon animációja van letárolva QT formátumban, amint majd azt látni fogjuk.

Mivel a példaprogramokból lehet a legjobban tanulni, célszerűnek látom megosztani a dolgot. Ki tudja, az Apple.com-ról mikor tűnik el. Az animáció megtekinthető online itt, letölteni pedig a post alján lehet. Van benne egy sor érdekesség, például zenét embeddelni sorral lehet, amit JS hív meg.

UI: Safari 4 beta kell a megtekintéséhez. Aki IE-vel, Firefox-szal, Operával, IceWeasellel, meg isten tudja milyen böngészővel próbálkozik, ne várjon sokat.

36 Responses to “Safari 4 intro animation”

  1. Gravatar Icon 0 Autós

    Nálam nem működik, ha ez megnyugtat.

  2. Gravatar Icon 1 CharlieBrown

    detto

  3. Gravatar Icon 2 angelday

    Safari 4 betaban sem?

  4. Gravatar Icon 3 dobisan

    Nálam Safari4 beta- ban megy. :) Először én is FF ben próbáltam és ott nem ment. :D

    (vajon direkt vagy csak inkompatibilitás miatt?)

  5. Gravatar Icon 4 Lévai Richárd

    nem megy iphone-ban sem, pedig animált css-t már láttam futni az iphone-os safariban…

  6. Gravatar Icon 5 balint

    Chrome alatt sem megyen.

    Az írás meghozta a kedvemet a Safarihoz, adok neki egy esélyt. Tudom, hogy apró picsuszság, de tényleg jó, hogy Win-en nem a Mac kinézett van – tényleg _baromira_ elütött tőle. Lássuk.

  7. Gravatar Icon 6 dr_grétsy

    nem öncélú ez így picit?
    ha a gépemen van a 4-es safari, akkor úgyis láttam már, ha pedig nincs telepítve, akkor meg úgysem lehet megnézni.

  8. Gravatar Icon 7 Jano

    A JavaScriptnek itt nincs szerepe az animációban, csak biztosítja, hogy akkor induljon el az egész ha minden elem letöltődött.

  9. Gravatar Icon 8 rpont

    http://www.vimeo.com/3351914
    kb a 30. mp környékén mutatják az animációt.

  10. Gravatar Icon 9 doors

    ez a 3 mp?

  11. Gravatar Icon 10 ddq

    azt tessenek eszrevenni az animacioban, hogy olyan szabvany html es css elemeket hasznal, amit egy a html css kodokat szabvanyosan megjelenito bongeszonek kutya kotelessege lenne lekezelnie es ugyanezen formaban megjelenitenie.

    pl:
    http://acid3.acidtests.org/

  12. Gravatar Icon 11 Chei

    Az animációt azért nem jeleníti meg más böngésző, mert nem szabványos CSS elemeket használ. Az egész animáció alapja a -webkit-animation CSS rule, ami az Apple saját CSS kiegészítése. Úgy emlékszem pont az ilyenek miatt nem szerettük a Microsoftot.

    Itt van doksi a @-webkit-keyframes témában egyébként:
    http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html
    “Support Level: Apple extension”

  13. Gravatar Icon 12 freak

    @ddq: el vagy tevedve, nem kicsit, nagyon. Az Acid 3 test nem a CSS + XHTML kompatibilitast vizsgalja, hanem hogy a _hibasan_ lekodolt oldalakat a bongeszoknek hogyan kell megjeleniteniuk a szabvany szerint. Csinal egy csomo kisebb tesztet, ebbol jon ki egy pontszam.

    Ez az intro olyan elemeket hasznal, amit egyedul a Safari 4 tud megjeleniteni, mert olyan elemeket hasznal, amiket csak o tamogat. De ez nem azt jelenti, hogy ezt a tobbi “html css kodokat szabvanyosan megjelenito bongeszonek kutya kotelessege lenne lekezelnie es ugyanezen formaban megjelenitenie”

    Melyik CSS verziorol illetve melyik HTML/XHTML verziorol beszelunk? Ha CSS 3 elemeket hasznal, akkor az meg erosen under development, nincs veglegesitve a szabvany (lasd http://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_3)

    Feltetelezem, hogy az Apple azert nyomul ezzel, hogy a fejlesztoket arra csabitsa, hogy hasznaljak azokat a CSS 3 elemeket, amiket ok szeretnenek bepakolni a szabvanyba, nyomast gyakorolva igy a WWWC-re.

    De hangsulyozom: a CSS 3 nem egy vegleges szabvany, igy a jelenlegi bongeszoknek meg nem kell tamogatniuk.

    Egyebkent nyomathatjak itt a CSS 3-at meg az XHTML 2-t, ha a netezok 30% Internet Explorer 6-ot hasznal to this very day.

  14. Gravatar Icon 13 angelday

    Chei, az van, hogy a webkit project (financially founded by Apple) valóban benyújtott néhány ilyen proposalt, amit ha elfogadnak a testek, eltűnik a -webkit prefix.

  15. Gravatar Icon 14 Chei

    Drukkolok nekik, mert tényleg jó. Alapvetően ddq “kutya kötelességével” nem értettem egyet.

  16. Gravatar Icon 15 freak

    Cheinel a pont.

    Nekem sem tetszik, ahova ez tart. Pl a ceges weboldalt optimalizalnom kell IE 6-ra, 7-re, 8-ra, Firefoxra, Operara, Webkitre, eleg baj ez igy is. Ujabb, csak bizonyos browserek altal tamogatott CSS kiegeszitesekkel csak eszkalaljak ezt a babeli problemat, a webfejlesztok meg szopnak, mint a torkosborz (mert ami mukodik az egyikben, az a masikban vagy egyaltalan nem, vagy total mashogy).

    Pl Jozsi, az megvan hogy Firefoxban egy 1px szeles fuggoleges feher csik van a fejlecben? Es az oldal meg az XHTML tranitional validalason is megbukik? :)

  17. Gravatar Icon 16 Chei

    Ezt inkább ne hánytorgasd fel, ez nagyon régi ügy :)

  18. Gravatar Icon 17 angelday

    freak, hogyne lenne meg! Sőt, mobile Safariban meg vagy 30 pixelre dagad. Remélem Operában még ennél is több, mert akkor indulok vele versenyen is.

  19. Gravatar Icon 18 klarky

    Józsi, ha erre gyúrsz közlöm, hogy IE6 alatt meg percekig jön be. Olyan, mintha a részeket 10x lehúzná, mire kirakja. Na meg mire átáll komment ablakra! A képek szétesnek, néha sorok összecsúsznak. Brrrr…. 8-))))

    ui.: gondolom ezt is rég tudod, de így szeretjük

  20. Gravatar Icon 19 angelday

    IE6?!

    Na az a kemény.

  21. Gravatar Icon 20 freak

    klarky: ugye nem varod el, hogy barki is optimalizaljon IE 6-ra egy nem kereskedelmi celu oldalt? Az egy 9 (!) eves bongeszo, mar az IE 7 is 3 eves… Ceges oldal mas, ott ki kell nyalni az ugyfelek hatsojat, nem mondhatod, hogy marpedig IE 6-ra nem.

  22. Gravatar Icon 21 freak

    Jozsi: Operaban teljesen jo ;)

  23. Gravatar Icon 22 klarky

    Dehogy várom el!

    Csak Jozef mondta, h versenyre gyúr, gondoltam adok hozzá egy-két adalékot. 8-)

    Amúgy lehet, h régi az IE6, de hogy jobb, mint a 7 és a 8beta az biztos.

    A cégnél amúgy én sem használom, az otthoni régi masinán meg az van. Már az is marad, míg nem veszek új, szebb, ropogósabb, gyorsabb gépet.

  24. Gravatar Icon 23 Realty master

    Igazi mazochizmus lehet 2009-ben IE6-ot használni.

  25. Gravatar Icon 24 freak

    klarky: regi vasra Opera valo, az a leginkabb eroforras-igenytelenebb. Mondom ezt Firefox userkent, a regi gepemre en is Operat tettem.

    IE6-nal minden jobb.

  26. Gravatar Icon 25 alternaiv

    Jópár cégnél még IE6 a szabvány. Nagy multik ők, a megrendelőink. Szóval, igenis kell IE6-ra optimalizálni, még, sajnos.

  27. Gravatar Icon 26 shaark

    Nekem is ez volt a első reakcióm, hogy megnézem, hogy, hogyan van megcsinálva ez a welcome oldal :P

    Amúgy meg nagyon jó lenne, ha belekerülnének a szabványba ezek a webkit-es “kiegészítők” mert sokszor igen megkönnyítenék az embernek a munkáját.

    @Lévai Richárd: A te iPhone-dal van a baj (frissítve van?), mert nekem iPod Touch simán viszi.

  28. Gravatar Icon 27 Danger Dude

    Méz azt is hozzáfűzném hogy a WebKit nightly tökéletesen viszi (bár nem meglepő) míg a Safari 3 nem.

    Ja, és a Nightly Safari 4-es külsőt kap ha fel van telepítve, de azóta már uninstall volt mert kell nekem a Keywurl és az Inquisitor. Pedig kár. Nekem kifejezetten tetszik a fenti tabsor.

  29. Gravatar Icon 28 papasfx
  30. Gravatar Icon 29 pappito

    nálunk a gyárban (110ezer alkalmazott, kb) IE7-et használ, mert ez a polici és a belső cuccok erre vannak kicsiszolva. ez van. (na jó, én felraktam a S4-et meg a tüzirokkert is de az nem ér :)

  31. Gravatar Icon 30 SPS

    hát, én nem voltam elájulva a Safari 3-tól Win alatt
    (itthon természetesen Safari megy (Mac-on), de még a 3-as, az jó)
    cégnél Win kell, gondoltam ma felteszem a 4-est, lássuk meg
    15 perc múlva csak azt használtam, se IE7, se Firefox :)
    gyors, ügyes
    azért még tesztelem, de egyenlőre nyert

  32. Gravatar Icon 31 angelday

    El se hiszem. Egy Win convert. Ah!

  33. Gravatar Icon 32 wotan

    felraktam S4-et, mondom index.hu!
    jajj

    adblocker nélkül NEM vagyok hajlandó kereskedelmi html oldalakat nézni.

  34. Gravatar Icon 33 angelday

    XP alatt vagy? Mac-en Clicktoflash!

  35. Gravatar Icon 34 klarky

    @pappito: 110ezer alkalmazott? Hol dolgozol te?

  36. Gravatar Icon 35 rog

    közigazgatásban.. :D