Share
Ne confruntăm cu unul mare astăzi: pagina de marketing Apple iPad "Elevating the Expedition".
Este un site impresionant în sine, arătând un puternic JavaScript și CSS. Apple a luat de asemenea conceptul de public țintă foarte serios în deciziile luate cu acest site. Hai să ne aruncăm!
Acest site vine ca o completare la o lungă listă de site-uri care utilizează defilare pentru a îmbunătăți prezentarea conținutului și pentru a declanșa animații proiectate. Pe măsură ce defilați site-ul, puteți vedea conținut populat pe măsură ce defilați, inclusiv un număr de elevație pe partea dreaptă care crește pe măsură ce derulați în jos; acesta este un indicator care urmează, împreună cu povestea povestei ascensionerului.
De asemenea, vedem câteva animații subtile de parallax (norii, de exemplu), câteva declanșatoare de ilustrații care apar atunci când vin în vedere și unele animații infinite care nu se bazează pe nici o interacțiune.
Imaginile foarte mari sunt folosite pe întreg site-ul (mai multe despre acestea în secțiunea următoare), atât ca imagini de fundal, cât și ca imagini cu conținut inline.
Apple a luat decizii interesante cu această pagină de marketing. Poate că decizia cea mai evidentă este dimensiunea activelor de pe pagină. Mai jos, puteți vedea o captură de ecran de la inspectorul Chrome. Pe o conexiune rapidă la internet, site-ul durează de peste 2 secunde doar pentru a încărca activele pe pagină. Dimensiunea totală de descărcare pentru site depășește 12,5Mb. Apple a optimizat foarte bine câteva lucruri (pe care le vom acoperi), dar întrebarea rămâne - cum ar putea cineva să justifice un PNG de 4Mb pentru ceea ce este tehnic un "extra" animație cloud?
Răspunsul, destul de probabil, este că obiectivul Apple pentru această pagină nu va avea niciodată probleme legate de descărcarea de bunuri ginorme și, dacă se întâmplă, este posibil să nu le pese. Publicul țintă este cel mai probabil pe un Mac sau pe alt ecran de dispozitiv modern și probabil că se află într-o rețea rapidă. Prin urmare, Apple a luat decizia de a sprijini o experiență deosebit de convingătoare și de a permite o experiență mai mică pentru cei care probabil nu se află pe piața țintă.
De asemenea, ar trebui să considerăm că această pagină este o campanie de marketing care există în afara fluxului de vânzări al Apple, ceea ce înseamnă că nimănui i se interzice să cumpere un iPad de la serviciul dial-up Dell pe un monitor SD CRT,.
O altă decizie interesantă făcută de Apple (atât aici, cât și în multe alte proiecte web) este folosirea imaginilor pentru titlurile de text.
Acesta este un pngMajoritatea oamenilor știu că Apple, de mulți ani, se mândrea cu o tipografie consistentă și clară; întârzierea lui Steve Jobs a luat chiar și o clasă de caligrafie la colegiul Reed, despre care spune că la inspirat să introducă controlul fontului articulat în sistemul de operare Mac. Având în vedere această prioritate, Apple alege în mod regulat să facă imagini ale textului în loc de fonturi pentru majoritatea titlurilor, probabil pentru a avea control asupra a ceea ce vede toată lumea. Deși există o anumită cheltuială pentru această decizie, Apple tranzacționează aceste cheltuieli pentru o calitate consistentă și un control deplin asupra produsului final.
Interesant, au mers chiar până acolo încât să facă acest lucru cu indicatorul numărului de pe diagrama de oxigen.
Vezi-i pe tine însuți, iată spritul SVG Apple a angajat câteva tehnici simple de îmbunătățire progresivă în acest site; și anume, designul rămâne intact în toate browserele, în timp ce interacțiunile pot varia în funcție de abilitățile browserului. Apple utilizează css transforma; și majoritatea îmbunătățirilor progresive se învârt în jurul acestui aspect. Alte elemente, cum ar fi intrarea cursorului în a doua secțiune, sunt afișate numai în browserele de asistență. Apple folosește hack-uri precum cele de mai jos, care sunt folosite pentru a ascunde elementele din IE 7-9, dar se arată în toate celelalte browsere. Acest lucru este util în redarea elementelor statice pentru IE, cum ar fi graficul altitudinii summit-ului.
.diagramă. oxigen-cursor poziție: absolută; top: 246px; stânga: 45px; display: none \ 9; .-grafic display: none; display: block \ 9; Poziția: relativă; top: 0;
Linia display: none \ 9; și display: block \ 9; liniile sunt valabile numai în IE 7-9; acest truc mic evită folosirea foilor de stil specifice IE.
Glisorul și animația de pe această diagramă nu apar în IE.Apple foloseste JavaScript pentru a face lucruri simple cum ar fi inlocuirea imaginilor cu versiunile lor hi-res, dupa cum este necesar. În timp ce Chromium a implementat oficial imagini receptive, aceasta este încă o cale lungă de la adoptarea completă, prin urmare, acest lucru prin JavaScript este în prezent una dintre singurele opțiuni disponibile.
Cum se încarcă fișierele masive și se scapă de ea? Să luăm câteva lecții de pe acest site.
Este incredibil de important să optimizați, atunci când este posibil. În acest caz, Apple a optimizat unele imagini foarte mult. De exemplu, imaginea antetului 1024 × 1766 este de 341 KB, iar elementul pachet sprite este de 49,9 KB. Deși nici un octet nu trebuie considerat ca fiind dispensabil, aceste dimensiuni sunt descărcate relativ rapid la cele mai multe viteze moderne de conectare, incluzând multe viteze mobile.
Imaginile și scripturile pot încetini semnificativ viteza de redare a unei pagini. Când este posibil, utilizați ceva de genul leneș-încărcare (încărcarea cu JavaScript odată ce pagina a fost deja încărcată) pentru a încărca imagini mari sau pentru a le include în CSS ca imagini de fundal dacă acestea nu fac parte din fluxul de conținut semantic. Apple utilizează o tehnică JavaScript post-încărcare cu toate imaginile hi-res, după cum sa discutat anterior, și utilizează, de asemenea, CSS pentru a seta imaginile de fond PNG de dimensiuni mari.
Vrei pagina să te simți rapid? să vă concentrați asupra realizării celor mai bune 2000 de pixeli cât mai repede posibil. Indiferent de ceea ce se situează sub cele de 2000 pixeli, dacă încărcați conținut în două ferestre înalte, este mult mai probabil ca conținutul dincolo de 2000 px să fie încărcat până când utilizatorul va naviga la el. Apple a făcut acest lucru o prioritate prin împingerea PNG-urilor mari până la aproximativ 4400 de pixeli din partea de sus a paginii și a plasat imagini de încărcare rapidă în partea de sus.
Elementul glisant oferă utilizatorului prima interacțiune pe pagină (alta decât derularea). Apple a folosit a gamă de intrare și de o anumită magie CSS, pentru a scoate acest lucru. Așa cum am menționat anterior, numărul din dreapta graficului se face cu imagini, dar vom folosi tipografia obișnuită pentru a păstra punctul. (Dacă sunteți interesat să învățați această tehnică, începeți să învățați despre spritele CSS.)
Puteți vedea acest cursor în acțiune pe CodePen Există câteva lucruri de reținut în acest exemplu. În primul rând, există un pic de CSS dedicat pentru a face intrarea cursorului să arate corect. Cea mai mare parte a CSS este orientată spre poziționare și după / înainte de trucuri.
Un alt aspect interesant al acestui demo este elementul indicator. Să ne uităm la JavaScript pentru un moment.
Accentsconagua
var cursorul = $ (". bgslider"); var max = slider.attr ("max"); var min = slider.attr ("min"); var colBg = $ (".fg"); var indic = $ ("indicator"); slider.on ("schimbare", funcție () var val = slider.val () / max * 100; colBg.css (" .7 + "%") [0] .innerHTML = Math.round (val);); Vedem imediat că glisorul este locul unde toată interacțiunea este centrată. Dar uitându-ne la indicator, vedem această linie:
indic.css ("de sus", val * .7 + "%") [0] .innerHTML = Math.round (val); Ce face această linie? În primul rând, setarea valorii superioare a indicatorului este valoarea procentuală a cursorului, înmulțită cu .7 - aceasta ne dă un indicator care nu merge la partea inferioară a elementului. În exemplul dat de Apple, indicatorul urmează imaginea; în acest exemplu, indicatorul nostru se mișcă la o viteză diferită față de imaginea noastră. Acest lucru ne oferă mai mult control asupra animației însăși.
Apoi vedem animația JavaScript.
$ ("input"), animați ("value": 20000, step: function () slider.val (this.value) slider.val (max) .trigger ("schimbare");, durata: 3000); Deoarece funcția animată a lui jQuery acceptă implicit animarea proprietăților CSS, scriem propriul nostru pas și funcții complete. Acest lucru ne permite să folosim funcțiile jQuery construite în coadă și relaxare și să evităm scrierea personalizată setInterval sau recursivă setTimeout apeluri.
În mod intenționat nu am făcut acest lucru exact așa cum a obținut Apple acest efect, pentru a vă putea arăta cum ați putea aborda aceeași problemă cu o soluție diferită.
Apoi, să ne uităm la animația pentru uneltele de ambalaj.
Putem vedea că diferitele elemente de viteze sunt, într-un anumit sens, prezentate în browserul dvs. pe măsură ce defilați. Acest efect este realizat folosind evenimentul de defilare JavaScript, transformările CSS și spritele CSS. Apple a plasat cincizeci de articole diferite folosind : Nth-copil și sprites, care arată astfel:
.articol pachet: n-copil (49) top: 52.5px; stânga: 199px; lățime: 82px; înălțime: 69.5px; pozitie fundal: -199px -52.5px;
Cea mai interesantă parte a acestei tehnici este, totuși, JavaScript-ul de animație scroll. JavaScript-ul inițial a fost miniat, dar configurația de bază buclează toate elementele de pachete și își colectează poziția în raport cu centrul elementelor pachetului și le mută mai departe în această direcție. Nu vom acoperi toate matematica din acest articol; în schimb, ne vom concentra pe o modalitate de a explora subiectul.
http://codepen.io/jcutrell/full/krIAp
Acest CodePen arată o aproximare brută a tehnicii utilizate de Apple. Ajustarea diferitelor părți ale acestui JavaScript vă va oferi rezultate diferite și vă va ajuta să explorați mai bine această tehnică.
Iată o provocare pentru dvs.: decolorați blocurile de elemente, ca și în tehnica Apple.
Animațiile din cloud utilizează o tehnică simplă parallaxă de parcurgere, precum și o animație CSS infinită. Nu vom acoperi tehnica de parallax (puteți vedea o mulțime de tehnici de parallax acoperite aici pe Tuts +), dar să ne uităm la animația infinită pe care acești nori o folosesc.
Direct de la CSS-ul Apple:
.nori poziție: absolută; stânga: 0; fundal: 0 0 repet-x; dimensiunea fundalului: 100% 100%; .basecamp-nori, .ascent-nori z-index: 2; stânga: -788px; .basecamp-nori top: -500px; lățime: 2600px; înălțime: 2413px; fundal-imagine: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_basecamp_01.png); / * max ecran vizibil * 2 = 5200, pentru a nu fi confundat cu activul @ 2x. * / .ascent-nori-1 .tile top: 50px; lățime: 5200px; înălțime: 2000px; background-image: url-ul (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_01.png); . nori-ascent-2 top: 600px; lățime: 2600px; înălțime: 1846px; bottom: 0; background-image: url-ul (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_02.png); @keyframes cloudAnim de la transform: translateX () translateZ () în transform: translateX (-50%) translateZ () infinit; -moz-animație: cloudAnim 80s liniară infinită; animație: cloudAnim 80s liniară infinită;
Putem observa imediat că animația cloud-ului este folosită direct transformați: translateX. Ceea ce face ca această tehnică să fie atât de puternică este lungimea și claritatea PNG-ului folosit. Norul mare PNG bate infinit timp de optzeci de secunde, ceea ce este suficient de lung pentru ca modelul repetat al PNG să fie uitat. Deși nu este prea greu de realizat, este cu siguranță o utilizare eficientă a animațiilor CSS.
Apple ar putea fi margine pe un teritoriu controversat cu dezvoltatorii de web de bază "cele mai bune practici" predicatori, dar toată lumea în profesia de web design trebuie să ia decizii. Ar trebui să luați în considerare întotdeauna valorile unui compromis; indiferent dacă ar trebui sau nu să implementați o caracteristică dată, nu ar trebui să fie dictată doar de cele mai bune practici, nici de constrângerile tehnologice, ci mai degrabă de nevoile și dorințele celor care vor vedea lucrurile pe care le creați. Nu permiteți ca regulile să stea în calea de a face ceva uimitor, dar asigurați-vă că luați în considerare compromisurile.
