Share
Oggi ne stiamo affrontando uno grosso: la pagina di marketing per iPad "Elevating the expedition".
Probabilmente è un sito impressionante in sé, mostrando alcuni potenti JavaScript e CSS. Apple ha anche preso molto sul serio il concetto di pubblico di destinazione nelle sue decisioni con questo sito. Tuffiamoci dentro!
Questo sito si aggiunge a una lunga lista di siti che utilizzano lo scorrimento per migliorare la presentazione dei contenuti e attivare le animazioni progettate. Mentre scorri il sito, puoi vedere il contenuto che si riempie mentre scorri, compreso un conteggio dell'elevazione sul lato destro che aumenta man mano che scorri verso il basso; questo è un indicatore che segue insieme alla narrazione della storia dell'arrampicata.
Vediamo anche alcune sottili animazioni di parallasse (le nuvole, ad esempio), alcuni trigger di illustrazione che si verificano quando vengono visualizzati e alcune animazioni infinite che non si basano su alcuna interazione di sorta.
Immagini di grandi dimensioni sono utilizzate in tutto il sito (più su questo nella prossima sezione), sia come immagini di sfondo che come immagini di contenuto in linea.
Apple ha preso alcune decisioni interessanti con questa pagina di marketing. Forse la decisione più eclatante è la dimensione delle risorse sulla pagina. Di seguito, puoi vedere uno screenshot dell'ispettore di Chrome. Con una connessione internet veloce, il sito impiega oltre 2 secondi per caricare gli asset nella pagina. La dimensione totale del download per il sito supera i 12,5 Mb. Apple ha, ovviamente, ottimizzato un bel po 'di cose (che tratteremo), ma la domanda rimane: come si potrebbe giustificare un PNG a 4 Mb per ciò che tecnicamente è un'animazione cloud "extra"?
La risposta, molto probabilmente, è che l'obiettivo di Apple per questa pagina non subirà mai problemi di lag scaricando le risorse ginormous, e se lo fanno, potrebbero non interessarsene. Il pubblico di destinazione è molto probabilmente su un Mac o su un altro schermo di dispositivo moderno e probabilmente si trovano su una rete veloce. Pertanto, Apple ha preso la decisione di supportare un'esperienza particolarmente avvincente e consentire un'esperienza minore per coloro che probabilmente non si trovano nel loro mercato di riferimento.
Va inoltre considerato che questa pagina è una campagna di marketing che esiste al di fuori del flusso di vendite di Apple, il che significa che a nessuno viene impedito di acquistare un iPad dalla propria connessione remota Dell su un monitor SD CRT, se lo desiderano.
Un'altra decisione interessante che Apple ha fatto (sia qui che in molti altri progetti web) è l'uso di immagini per titoli testuali.
Questo è un pngLa maggior parte delle persone sa che Apple, da molti anni, si vanta di una tipografia coerente e chiara; Steve Jobs ha persino frequentato un corso di calligrafia al Reed college, che a sua volta lo ha spinto a portare il controllo dei font articolato sul sistema operativo Mac. Con questa priorità in mente, Apple sceglie regolarmente di visualizzare le immagini di testo anziché i caratteri per la maggior parte dei titoli, presumibilmente in modo che abbiano il controllo su ciò che vedono tutti. Mentre c'è qualche spesa per questa decisione, Apple scambia tale spesa per la qualità costante e il pieno controllo sul prodotto finale.
È interessante notare che sono addirittura arrivati al punto di farlo con l'indicatore numerico sulla tabella dell'ossigeno.
Guarda tu stesso, ecco lo sprite SVG Apple ha utilizzato alcune semplici tecniche di miglioramento progressivo in questo sito; vale a dire, il design rimane intatto in tutti i browser, mentre le interazioni possono variare in base alle capacità del browser. Apple usa i CSS trasformare; e la maggior parte dei miglioramenti progressivi ruotano attorno a quell'aspetto. Altri elementi, come l'input del cursore nella seconda sezione, sono mostrati solo nei browser di supporto. Apple utilizza hack come il seguente, che viene utilizzato per nascondere elementi in IE 7-9, ma visualizzati in tutti gli altri browser. Questo è utile nel rendering di elementi statici per IE, come il grafico dell'altitudine di vertice.
.grafico .oxygen-slider position: absolute; top: 246px; a sinistra: 45px; display: none \ 9; .ie-graph display: none; display: block \ 9; position: relative; top: 0;
La linea display: none \ 9; e display: block \ 9; le linee sono valide solo in IE 7-9; questo piccolo trucco evita l'uso di fogli di stile specifici per IE.
Il cursore e l'animazione su questo grafico non vengono visualizzati in IE.Apple utilizza anche JavaScript per fare cose semplici come la sostituzione delle immagini con le loro versioni ad alta risoluzione, se necessario. Sebbene Chromium abbia ufficialmente implementato le immagini reattive, è ancora molto lontano dall'adozione completa, quindi farlo tramite JavaScript è attualmente una delle sole opzioni disponibili.
Come si caricano file voluminosi e si può farla franca? Prendiamo alcune lezioni da questo sito.
È incredibilmente importante ottimizzare, quando possibile. In questo caso, Apple ha ottimizzato alcune immagini molto. Ad esempio, l'immagine dell'intestazione 1024 × 1766 è 341 KB e lo sprite degli articoli del pacchetto è 49,9 KB. Sebbene nessun byte debba essere considerato superfluo, queste dimensioni vengono scaricate in modo relativamente rapido alla maggior parte delle moderne velocità di connessione, incluse molte velocità di portante.
Immagini e script possono rallentare in modo significativo la velocità di rendering di una pagina. Quando possibile, usa qualcosa come caricamento pigro (caricamento con JavaScript una volta che la pagina è già stata caricata) per caricare immagini di grandi dimensioni o includerle nel tuo CSS come immagini di sfondo se non fanno parte del flusso di contenuto semantico. Apple utilizza una tecnica JavaScript post-caricamento con tutte le immagini ad alta risoluzione, come già discusso, e usa anche i CSS per impostare le immagini di sfondo PNG cloud di grandi dimensioni.
Vuoi che la tua pagina si senta veloce? concentrarsi sulla realizzazione del 2000px più veloce possibile. A prescindere da ciò che è sotto quei 2000px, se caricate un contenuto di due altezze di finestra, è molto più probabile che il contenuto oltre 2000px venga caricato dal momento in cui l'utente lo scorre. Apple ha reso questa una priorità spingendo i PNG di grandi dimensioni a circa 4400 px dalla parte superiore della pagina e ha posizionato le immagini di caricamento veloce verso l'alto.
L'elemento di scorrimento offre all'utente la prima interazione sulla pagina (diversa dallo scorrimento). Apple ha usato un gamma input, e qualche magia CSS, per rimuoverlo. Come accennato in precedenza, il numero a destra del grafico è fatto con le immagini, ma useremo la tipografia normale per attenerci al punto. (Se sei interessato ad apprendere questa tecnica, inizia imparando a conoscere gli sprites CSS.)
Puoi vedere questo cursore in azione su CodePen Ci sono alcune cose da notare in questo esempio. Innanzitutto, c'è un bel po 'di CSS dedicato a far apparire corretto l'input del cursore. La maggior parte del resto del CSS è orientata verso il posizionamento e i trucchi dopo / prima.
Un altro aspetto interessante di questa demo è l'elemento indicatore. Diamo un'occhiata al JavaScript per un momento.
Accentsconagua
var slider = $ (". bgslider"); var max = slider.attr ("max"); var min = slider.attr ("min"); var colBg = $ (". fg"); var indic = $ (". indicatore"); slider.on ("change", function () var val = slider.val () / max * 100; colBg.css ("height", val + "%"); indic.css ("top", val * .7 + "%") [0] .innerHTML = Math.round (val);); Vediamo immediatamente che il cursore è dove tutta l'interazione è centrata. Ma guardando l'indicatore, vediamo questa linea:
indic.css ("top", val * .7 + "%") [0] .innerHTML = Math.round (val); Che cosa sta facendo questa linea? Innanzitutto, imposta il valore superiore dell'indicatore come il valore percentuale del cursore, moltiplicato per 0,7. Questo ci dà un indicatore che non va in fondo all'elemento. Nell'esempio fornito da Apple, l'indicatore segue l'immagine; in questo esempio, il nostro indicatore si muove a una velocità diversa dalla nostra immagine. Questo ci dà più controllo sull'animazione stessa.
Successivamente, vediamo l'animazione JavaScript.
$ ("input"). animate ("value": 20000, step: function () slider.val (this.value); slider.trigger ("change");, complete: function () slider.val (max) .trigger ("change");, duration: 3000); Poiché la funzione animata di jQuery supporta l'animazione delle proprietà CSS per impostazione predefinita, scriviamo il nostro passo e completiamo le funzioni. Questo ci consente di utilizzare le funzioni integrate di coda e di allentamento di jQuery ed evitare di scrivere su misura setInterval o ricorsivo setTimeout chiamate.
Non l'abbiamo fatto intenzionalmente esattamente nel modo in cui Apple ha raggiunto questo effetto, in modo che possiamo mostrarti come affrontare lo stesso problema con una soluzione diversa.
Quindi, esaminiamo l'animazione del pacchetto.
Possiamo vedere che i diversi articoli dell'ingranaggio sono, in un certo senso, disposti nel tuo browser mentre scorri. Questo effetto viene ottenuto utilizzando l'evento di scorrimento JavaScript, le trasformazioni CSS e gli sprite CSS. Apple ha posizionato cinquanta oggetti diversi usando : Nth-child e sprite, che assomiglia a questo:
.pack-item: nth-child (49) top: 52.5px; a sinistra: 199px; larghezza: 82px; altezza: 69.5px; background-position: -199px -52.5px;
La parte più interessante di questa tecnica, però, è l'animazione scroll JavaScript. Il codice JavaScript originale è stato minimizzato, ma l'impostazione di base scorre attraverso tutti gli elementi del pacchetto e raccoglie la loro posizione in relazione al centro degli elementi del pacchetto e li sposta ulteriormente in quella direzione. Non copriremo tutti i calcoli in questo articolo; invece, ci concentreremo su un modo per esplorare l'argomento.
http://codepen.io/jcutrell/full/krIAp
Questo CodePen mostra una approssimativa approssimazione della tecnica utilizzata da Apple. La modifica di parti diverse di questo JavaScript ti darà risultati diversi e ti aiuterà a esplorare la tecnica in modo più approfondito.
Ecco una sfida per te: dissolvenza dei blocchi oggetto, come nella tecnica di Apple.
Le animazioni cloud utilizzano una semplice tecnica di scroll parallasse, oltre ad un'animazione CSS infinita. Non copriremo la tecnica della parallasse (puoi vedere molte tecniche di parallasse trattate qui su Tuts +), ma diamo un'occhiata all'animazione infinita che quelle nuvole stanno utilizzando.
Direttamente dal CSS di Apple:
.nuvole posizione: assoluta; a sinistra: 0; background: 0 0 repeat-x; formato di sfondo: 100% 100%; .basecamp-clouds, .ascent-clouds z-index: 2; a sinistra: -788px; .basecamp-clouds top: -500px; larghezza: 2600 px; altezza: 2413 px; background-image: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_basecamp_01.png); / * max schermo visibile * 2 = 5200, da non confondere con @ 2x asset. * / .ascent-clouds-1 .tile top: 50px; Larghezza: 5200px; altezza: 2000px; background-image: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_01.png); .ascent-clouds-2 top: 600px; Larghezza: 2600px; altezza: 1846px; bottom: 0; background-image: url (http://images.apple.com/v/your-verse/elevating-expedition/a/images/clouds_ascent_02.png); @keyframes cloudAnim from transform: translateX () translateZ () a transform: translateX (-50%) translateZ () .ascent-clouds-1.visible .tile -webkit-animation: cloudAnim 80s linear infinito; -moz-animation: cloudAnim 80s linear infinite; animazione: cloudAnim 80s linear infinite;
Possiamo immediatamente vedere che l'animazione del cloud è diretta, usando trasformare: translateX. Ciò che rende questa tecnica così potente, tuttavia, è la lunghezza e la chiarezza del PNG utilizzato. Il grande cloud PNG scorre infinitamente per ottanta secondi, il che è abbastanza lungo da dimenticare il pattern ripetuto del PNG. Anche se non è troppo difficile da raggiungere, è sicuramente un uso efficace delle animazioni CSS.
Apple potrebbe essere in un territorio controverso con i principali "predicatori" dello sviluppo del web, ma tutti nella professione del web design devono prendere decisioni. Dovresti sempre considerare i valori di un compromesso; se non dovresti implementare una determinata funzionalità non dovrebbe essere dettata esclusivamente dalle migliori pratiche, né dai soli vincoli tecnologici, ma piuttosto dai bisogni e dai desideri di coloro che vedranno la cosa creata. Non permettere che le regole ostacolino la realizzazione di qualcosa di sorprendente, ma assicurati di considerare i compromessi.
