Ciao ragazzi, come va? Riportiamo alla grande come sempre a settembre con un nuovo video dove andiamo a vedere le nuove figate, le nuove tecniche di web design e animazioni del sito dell'Apple perché come sempre a settembre sono usciti nuovi prodotti e Apple come di consueto ci va sempre a deliziare con i suoi nuovi web design. Diciamo che a livello di prodotti non ci sono grandissime novità, però devo dire che questa paginetta qua... del nuovo Apple Watch Ultra Black non è affatto male. Abbiamo un layout molto accattivante, questa animazione, questi scroll che hanno una sorta di inerzia e come esercizio di stile andiamo a rifare questa pagina oggi andando a rifare tutte le animazioni.
Quindi questo è il risultato che andremo a ottenere. Ok, molto simile, vedete queste applicazioni, queste... questi scroll come hanno una certa inerzia e per rifarlo utilizzeremo una nuova risorsa il template per fare animazioni gisa che questo qua che è una nuova risorsa che adesso metto a disponibile per tutti gratuitamente potete scaricarla dal link qui sotto in descrizione se vi iscrivete alla alla newsletter questo risorse tante altre risorse faranno parte di un nuovo progetto che vi presenterò tra un po ci sto ancora lavorando nuovo progetto che è il sicuramente potrà dare tantissimo valore a tutti quelli che vogliono fare web design professionali e diventare dei professionisti in questo settore quindi bando alle ciance e partiamo subito cosa facciamo? come prima cosa vado a prendermi questo template me lo copio sul desktop lo apro in vs code e vi presento questo template ve lo spiego un attimo è un template molto semplice Dove abbiamo un foglio di stile di Reset, poi cosa abbiamo?
Abbiamo alcune proprietà CSS, quindi font, definizione dei font per i titoli, una classe che ci permette di centrare i testi. È sostanzialmente una versione molto più semplice del mio framework che ho creato in questo video. Se tu adesso non ti trovi molto con questo... Codice, vatti a vedere questo video qua, creare un sito framework CSS bomba in 25 minuti, è sul mio canale, ha questa copertina molto d'impatto.
Ok, vatti a vedere questo video dove ti spiego un po'tutte le tecniche, fammelo mettere di qua così lavoriamo meglio. dove ti spiego tutte le tecniche che utilizziamo qui, abbiamo sostanzialmente un reset, gli stili dei titoli e poi abbiamo un grid system per fare layout e alcune utility per dare spazi, padding e allineamenti. Quindi qual è il risultato di questo template? Se io vedo che aggiungo, c'è questa animazione sul testo e poi se scrollo questi testi arrivano così. Queste animazioni vengono fatte tramite gisap.
gisap è una libreria che andiamo a adesso ti farò vedere in questo video come utilizzarlo però se cerchi animazioni multiple gisap marchetti in questo video ti spiego esattamente in questo video qua ti spiego un po come funziona gisap da zero qui abbiamo già pronto all'uso alcune classi infatti qui qui sotto andiamo a includere gisap a livello di javascript scroll trigger che è quello che ci serve per monitorare lo scroll della pagina e che ci va a far partire le animazioni avete visto che quando scrollo qui appaiono i testi, vedi che appaiono con anche un pochino di delay tra di loro ora andremo a vedere come da questa base di partenza andare a ricreare proprio questa struttura di Apple andando a rubare proprio le animazioni con l'inerzia loro quindi come prima cosa andiamo a... duplicare il nostro file l'abbiamo aperto in in vs code e andiamo ora a tirarci giù il logo di apple quindi me lo trascino qua e andiamo anche a ispezionare così mi vado a tirare giù tutte le risorse che mi servono voglio beccarmi questo che di solito apple utilizza video per fare questo tipo di animazioni quindi o quasi gli dico ok eccolo qua fammelo aprire in un'altra Tab, eccolo qua, mi scarico anche il video quindi mi salvo la pagina, lui mi salva il video mp4, poi cosa mi serve? Sempre dalla cara vecchia Apple mi serve questa immagine qua, ora ricreerò la prima parte della pagina quindi se andiamo a ispezionare andiamo a beccarci questa immagine qua.
anche questa vado ad aprirmi quella in alta risoluzione questa basta che la trascino e abbiamo qui le nostre risorse che ci servono andrò a rinominarle molto semplicemente in video logo e watch perfetto ora nel nostro file a cosa abbiamo abbiamo un primo elemento che abbiamo definito con l'html cover questa cover che cos'è è sostanzialmente questo riquadrone grigio chiaro con dentro un testo qui io voglio andarci a mettere il video e il logo facendo quindi diciamo ricreando questa struttura che abbiamo visto qua ok quindi prima il logo e poi il video come facciamo a farlo? andiamo qui nella cover mi vado a mettere un bel div che chiamerò cover inner ok qui dentro vado a mettere un img e vado a mettere il mio logo.png ora poi vado qui nella cover andiamo a tirare via flexbox andiamo a dargli un background 000 così gli diamo qui 100% e nel cover inner vado a mettermi una bella img che è il nostro logo e gli vado a dire che deve essere largo 200px ok salvo valori qui al giorno vediamo un po abbiamo il logo qui in alto ok poi cosa dobbiamo fare gli diamo qui 100% text line center così mi c'entra l'immagine ok non 100% scusate deve essere piccolo facciamolo di 200 pixel e diamogli un padding top di 15 per cento questo però lo diamo alla cover così ok e questo 100 per cento with 200 with 100 per cento deve essere scusate confusione sul cover inner così al contenitore che largo 100 per cento con text line center poi 200 si possono allineare anche con flex box potrei fare play flex justify content center line item center e lo allineo con flexbox che diciamo è una tecnica un pochino più recente ok andiamo ora a mettere il nostro bel video vado qui e mettiamo dopo il nostro cover inner andiamo a mettere il tag video e andiamo a vedere apple come va a inserire questo video che tag utilizza andiamo a vedere qui vedete il tag video in line e non utilizza l'autoplay ok forse lo farà partire con javascript noi invece utilizziamo video autoplay e qua gli diamo anche una classe video intro e ora andiamo qui sopra e dove abbiamo la cover diciamo punto video intro gli diciamo with 70 per cento left 15 per cento così non andiamo a un margine sinistro a posizionare anche qui possiamo usare flexbox possiamo usare un po le tecniche che vogliamo ma io per ora utilizzo questa tecnica che è la più semplice Ok devo dargli anche position relative se no non mi sposta. Ok e abbiamo il nostro watch. Ora non voglio un 8 100% ma lo voglio auto della cover. E voglio far partire il video quindi qui gli vado a dire autoplay.
Gli ho messo l'autoplay però non me lo fa partire probabilmente perché non è mutato. Quindi qua gli devo dire muted. perché se no per un discorso di accessibilità di non romperti le scatole di user experience cron te lo fa partire perfetto dobbiamo dargli anche un padding top 3 per cento E dovrebbe staccarsi un po'e abbiamo la nostra animazione iniziale, molto molto bene. Qui sotto poi abbiamo tutte le varie, gli altri step.
Abbiamo ora questo blocco qui dove abbiamo never finish, never quit e poi questo testo. Come andiamo a strutturare questa sezione? Andiamo ad aggiungere una griglia. Nella griglia vado a mettere una colonna.
che mi occupa l'80 per cento della larghezza questo quello che diamo come come funziona che il sistema è molto semplice ma lo vediamo nel video che ho fatto vedere su carrer framework poi andiamo a centrare questa colonna larga l'ottanta per cento al centro poi andiamo a mettere un bel a 2 minuscolo a 2 con never with cos'era never quit never qualcosa never finish never quit ok e poi andiamo a mettere un bel paragrafo al quale darò classe big dove andiamo a mettere questo ok adesso a livello di tipografia andiamo a mettere lo stile quindi andiamo qui dove ho la tipografia e gli dico l'h1 70 ok poi gli dico p.big 8 non è scusate font size 24 pixel color gli diamo un grigettino simile a quelli che usano loro scuro e gli diamo vediamo un attimo come risulta nel browser ok dobbiamo questa classe questo h1 quali do anche una classe bibb e con la stessa altezza quindi sto concatenando due proprietà una dietro l'altra e gli dico quindi qui che voglio il mio titolo con classe big e voglio centrare tutto centrare tutto quindi big e qua gli dico a tutta la colonna text center così mi centra tutto perfetto guardate come già molto più simile ora cosa devo fare devo andare qui al body diamo un Posso farlo anche direttamente qua, un background, senza cancellare il font house. Quindi background abbiamo detto, 000 che è nero e un color FFF che è bianco. Ok, ora finalmente possiamo andare a parlare, perfetto, di animazioni.
Come faccio ad animare? Tutta questa cosa qua. Io già nel mio template qui sotto ho un fade up, una classe fade up. Questo con gisap cosa fa? Andiamo a vedere.
Sostanzialmente va a beccare tutti gli elementi che hanno classe fade up. Quando l'elemento, il top dell'elemento arriva all'80% dello spazio che rimane dall'altezza. Quindi se io dal top della pagina, da qua, dal top. vado all'80% più o meno qua, quando il top dell'elemento che entra arriva qui, mi parte l'animazione. Guardate, adesso questo no, ma quelli dopo, guardate, arriva più o meno qua, mi parte l'animazione.
Quindi questo avviene con che velocità e con che durata? Con la durata di un secondo e mezzo, con una differenza di partenza tra la prima e la seconda, tra il primo e il secondo elemento, di 0.3. secondi e con una partenza se andiamo a vedere qua fade up uno stato di partenza se andiamo a vedere qua fade up dove l'elemento ha un'opacità 0 ed è spostato verso il basso di 5 ram ora la apple che su queste cose qui logicamente ha un'attenzione maniacale ha un'animazione che ha una inerzia un tempo di movimento leggermente diverso ed è più figo ed è molto più figo Non so se si vede con il frame rate che ho del video, però andiamo a cercare di rubare l'inerzia dell'animazione di Apple.
Se ispezioniamo dovremmo riuscire a beccare, eccolo qua, Text Animate. Vedete, qui stiamo rubando il codice dell'animazione di Apple. Quindi io mi vado a prendere questo.
Questo è sostanzialmente, adesso me lo copio. il fade di Apple ragazzi, quindi gli dico fade Apple e andiamo a vedere, tiro via le graffe, e vedete che loro utilizzano le variabili CSS, le variabili CSS sono quelle proprietà CSS che incominciano col doppio trattino, quindi loro si salvano qui delle variabili e sostanzialmente poi qui in transition vanno a impostare la posizione y che è 70px e tutte le proprietà di translate che vanno a impostare qua e poi qui abbiamo questo copy fade transition no che lo passa con i tre sì quindi sostanzialmente l'animazione come sarà durerà 0.8 secondi avrà uno pace un opacity che parte da zero ea livello di timing a a questo timing 0.8 la trasformazione anche qui le animazioni che fanno sul trasformano 0.8 e hanno questa inerzia questo qua questo è cubi laser è La parte dove gli andiamo a dire praticamente come va a cambiare i parametri. Non sarà lineare ma all'inizio sarà un po'più lento e poi alla fine accelerare leggermente. Così avremo questa inerzia, questo elemento che si muove non linearmente dal basso verso l'altro ma con una sorta di accelerazione.
Questa è come determiniamo l'accelerazione di Apple. Quindi noi andiamo poi qui sotto. e cosa cos'è che stiamo andando ad animare l'opacità e la posizione sull'asse delle y ok ora cosa facciamo andiamo qui in scuola animation andiamo a copiare questo paid up gli diciamo paid apple quindi richiamiamo la classe che abbiamo fatto prima punto di partenza quello di prima l'opacity deve essere impostata a 1 questo qua è lo stato finale quindi opacity a 1 Differenza tra le animazioni 0, 3, Y, 0, questa duration e questo ease li andiamo a eliminare, la duration è il tempo dell'animazione che abbiamo definito invece nel CSS e l'ease è l'accelerazione che anche questa è definita nel CSS, quindi lasciamo così e andiamo a provare e a testare qui sull'elemento che abbiamo creato prima, il fade apple. Quindi dico fade apple, fade apple. e andiamo ad aggiornare boom 12 papà se vedete un po più veloce di quelli che arrivano dopo questi sono più lenti perché sono i feda normali che abbiamo fatto e direi che è molto più carino quindi ora mi vado a tirare via questi fai da sono differenze ma poi nella user experience generale del diciamo del progetto fanno la differenza Qui lasciamo solo il footer e mettiamo uno spacer, quindi un div vuoto con classe spacer che mi va ad aggiungere un po'di spazio bianco.
La classe spacer ce l'avevo già definita qua nel template, spacer. Ok, e quindi andiamo a mettere sostanzialmente l'elemento successivo. L'elemento successivo andiamo a vedere qual è qui nel nostro layout questa sezione.
Quindi abbiamo il titolo, immagine e poi animazioni. Molto bene, cosa facciamo? Andiamo a prenderci il blocco cover di prima, andiamo nel cover inner al posto dell'immagine a mettere un bel h2 e andiamo a mettere questo testo e gli diamo classe big e fade apple così gli diamo anche l'animazione.
ok poi qui al posto del video andiamo a mettere un'immagine andiamo a mettere watch.jpg classe img res che la classe che usiamo per fare le immagini responsive anzi qui possiamo mettere immagine watch andiamo a fare una classe custom perché gli voglio dare delle larghezze custom come il video come questa qua quindi gli dico via cioè via virgola img watch e vedrete che l'immagine se tutto funziona sarà larga più o meno eccola qua come elemento sopra quindi qui non abbiamo dato l'animazione diamogli anche un fade apple all'immagine ok e ora ragazzi dovremmo avere boom anche l'animazione lì perfetto poi vado a dargli una vado a fare una grid con col 50 e quindi andiamo a fare una griglia con due colonne che occupano il 50% dello schermo nella prima colonna andiamo a mettere un P con classe P, Fade Apple che sostanzialmente sarà il testo che avevamo nel design originale questo testo qua possiamo anche copiarlo ok io mi sono copiato l'elemento che abbiamo usato prima nella appena dopo della cover e poi nel secondo andiamo sostanzialmente a crearci un div fade apple dove al suo interno andiamo a mettere un h3 dove andiamo a mettere questo Ok, e poi possiamo dargli una classe, per esempio, huge, classe custom, dove gli vado a dare una grandezza e poi sempre un p big dove gli andiamo a mettere invece questo. Quindi, ok, andiamo a prendere questo, andiamo a prendere questo, perfetto, e poi andiamo a replicare sostanzialmente qui la struttura molto semplice. ok ok ok andiamo a vedere il risultato nel browser facciamolo dall'inizio mi manca l'animazione sul logo quindi andiamo un attimo a fare questo tuning class E questo è il risultato.
Perfetto ragazzi. Con questo logicamente questo è già tutto responsive. Con questo ragazzi abbiamo visto come fare le animazioni, come andare a rubare queste animazioni dal sito di Apple. E soprattutto abbiamo creato due template che possiamo utilizzare nei nostri progetti.
Vedete in quanto poco tempo si riescono a fare animazioni. comunque molto accattivante, avanzate, sapendo dove andare a toccare, andando a mettere veramente le mani nel posto giusto, riusciamo ad andare a cambiare i tempi e creare delle animazioni accattivanti. Tutte queste risorse le trovi scaricabili nel nuovo progetto che ti presenterò a breve, comunque sono scaricabili già da subito qui sotto nel link in descrizione dove poi riceverai altre news, altre risorse di qualità, altre figate che salteranno fuori nei prossimi giorni sul canale. Ci sentiamo presto, un abbraccio, avanti di tutto che riprendiamo alla grande, ciao!