Come fare Animazioni da Paura stile Apple (Javascript Tutorial)

[@dylanmagliano1456]

Grazie!! Sarebbe utilissimo se facessi una playlist a tema javascript partendo dalle basi, continua cosi!

[@daniellombardo6119]

Si ma vogliamo anche il resto della landing page dell'iPhone eh! Daje Sig. Marchetti! ♥️✌️

[@grandemattyx96]

ho iniziato a fare le prime robe front end mentre ero all'università guardando nel 2017 i tuoi video tutorial per bootstrap 4. Intanto sono diventato un drago 🐲 e mi sto sto spostando sulla UX design e sulle animazioni pur rimanendo con la voglia di scrivere codice. E nulla, riesci sempre ad insegnarmi e darmi la carica. Ti devo molto.

[@moonharu949]

ormai io metto il like sulla fiducia , adoro tutti i tuoi video, molto utili e facili da apprendere.

[@matteoapolloni1794]

Grazie!!!! mi hai svoltato la vita. Gli snippets sono fantastici

[@Marchetti_Design]

daje

[@FabrizioDelTufo]

Sempre un drago ! E' un piacere vedere cosa ti inventi ogni volta !!! e poi vogliamo parlare di Boom ! Steve Jobs ? ahhaha Andy Number one !! Creativo a 360 gradi !

[@MikixIT]

Andrea ti consiglio di migliorare lo snippet "j-observe" sostituendo VAR con LET oppure CONST dato che le variabili difficilmente devono essere richiamate e modificate. Ottimo video! :)

[@wee6792]

video di altissima qualità GRANDE!! aspettiamo tutti il prossimo video😀

[@marcosarti9029]

Complimenti sinceri, talmente ben fatto che ho iniziato a seguirti. Ottimo video.

[@salvatorespezia9254]

Video top come sempre! Aspettiamo lo scroll orizzontale 😂

[@PH1L_0]

MAMMA MIA SEI UN GRANDE!!!

[@andreatirapelle6670]

Bel video, ho apprezzato molto e mi ha ispirato. Grande!

[@madmack1981]

Fantastico….. 🎉 Mi sta venendo voglia di iscrivermi alla community e fare il corso Pro ❤

[@Marchetti_Design]

Dajee

[@lorenzopilla5302]

Video top andrea!!!! volevo farti una domanda: con questo metodo utilizzando l'observer è possibile anche eseguire animazioni allo scroll (esempio scrub di gsap scrolltrigger) e creare degli elementi pinnati (pin di scrolltrigger)?

[@paolobitocco]

Ciao Andrea, finalmente ieri sera ho trovato il tempo per iniziare questa nuova serie di video. Che bomba!!! Purtroppo non ho ancora avuto modo di acquistare il tuo nuovo Next Web Hero perché sono pieno di lavoro. Spero nelle feste di Natale di poter proseguire la mia formazione. Intanto complimenti come sempre e da parte mia c'è super interesse nel proseguire questa serie.

[@Marchetti_Design]

Grande! Grazie del supporto 💪

[@giorgiadiserafino]

Siii approfondiamo js! Video 🔝🔝🔝 grazie ❤️

[@lorenzofaustini4416]

Grazie fenomenale!!! Una domanda, perché non hai creato un file css ma hai scritto tutto nello stile dell'html?

[@Marchetti_Design]

Per comodità in un sito vero li metterei el css generale

[@lorenzofaustini4416]

grazie mille, ultima cosa potresti riportare nel canale tutorial come questi? e dove posso trovare le informazioni per il tuo corso? Grazie mille sei al top 🔝 @@Marchetti_Design

[@Marchetti_Design]

@@lorenzofaustini4416 ecco qui le info del corso, al suo interno facciamo molte animazioni più avanzate di quelle che vedi in questo video: marchettidesignshop.com/next-web-hero/

[@michaelbaccin6400]

Numero 1! complimenti!

[@bulloffne]

Fantastico 😍😍.....potresti fare invece quello che fanno all'interno della pagina di presentazione del nuovo iPhone??

[@dle9216]

STUPENDO!

[@marcom.1983]

Altro che 600, 6000 ne meriti :)

[@gigimau79]

#SuperMarchetti video 💣💣💣💣💣 senza parole super 🙌🙌🙌🙌🙌

[@davidenoto430]

ti amo

[@Vl4dUA]

Buonasera Andrea! ho un problema , quando faccio ispeziona , non ci sono transazioni esempio quando vado dalla sezione uno alla due non cambia la class puoi aiutarmi a risolvere questo problema?.

[@0xunknown301]

Ciao Andre, complimenti per i contenuti sempre al Top che porti! Tanta Roba! Vorrei chiederti se porterai qualche contenuto su JS, grazie per la risposta.

[@Marchetti_Design]

Ciao, Se c’è interesse porterò sicuramente contenuti su js

[@clav7711]

che bel video caspita. Complimenti ma per chi parte da zero per caso hai fatto tutorial basilari su javascript?

[@Marchetti_Design]

Si cerva javascript facile su canale 😉

[@riccardobondioli]

Ciao, complimenti per il video! inserisco una miglioria responsive che permette di eseguire il video anche su dispositivi IOS, oltre al parametro "muted" del tag video aggiungi "playsinline".

[@umbertogentile94]

Sempre il migliore.

[@diegopiacentino6171]

Grazie mille ottimo tutorial! Ma come fai a trovare il video nella pagina di apple watch? io non riesco a trovarla

[@Marchetti_Design]

Ciao! Ispeziona elemento e l’occhio dello sviluppatore 😉

[@leopoldotodisco5439]

Grazie mille!

[@johnash6167]

ho messo like adesso guaro il video

[@grayfox86]

boom boom and boom! top! :D

[@tecnomos]

Che figata!! Fai sembrare tutto cosi semplice ahahah ... ti voglio far una domanda stupida da neofita, ma tutto questo procedimento, si può fare anche su wordpress?

[@Marchetti_Design]

Per fare una struttura del genere in wp bisogna creare un template custom, vediamo come farlo nei corsi link in descrizione

[@richton2711]

Ciao Andrea, ho notato che su VS molti snipped di WP o sono mancanti o con qualche errore rispetto ad atom. Volevo sapere se ti tornasse la cosa o fosse un mio problema

[@Marchetti_Design]

Ciao è possibile che nella conversione da atom wp ci sia qualche errorino nelle prossime release andrò a testarli ancora

[@AndreaJakej]

Il god dell’html

[@Marchetti_Design]

non esageriamo dai heheh

[@calogerocinquemani5622]

Ciao, forse mi sono perso qualche video precedente, puoi dirmi quale estensione (vs code) usi per javascript?

[@Marchetti_Design]

Nessuna, sono i miei snippets link in descrizione

[@francescobietolini244]

avrei una domanda, ho scaricato gli snippets di vsc dalla community, ma ora come faccio a renderli attivi? li devo caricare in qualche modo? grazie

[@Marchetti_Design]

C’è un video in descrizione che ti spiega come fare

[@RaffaeleSciarretta]

Salve Faresti una serie di video per impostare JavaScript? Grazie 🙏

[@CLANTheFighters]

Prima di tutto complimenti per il video e per la passione che metti nel farli, si vede soprattutto dal fatto che lasci moltissimo materiale gratuito, e questo ti rende una persona non solo competente ma anche interessata a far crescere la passione negli altri. 2 domandine: - l'animazione fade out e fade in allo scroll delle sezioni è quasi contemporanea, praticamente nell'istante in cui la prima sezione scompare appare la seconda , ed essendo entrambe nella stessa posizione il risultato personalmente non mi fa impazzire. Sarebbe possibile far scomparire prima la prima sezione "totalmente" e poi far apparire la seconda? - la parte finale del sito a sfondo bianco quando viene scrollata del tutto fa un piccolo rimbalzo sul bordo inferiore dello schermo, rendendo visibile in minima parte il video background che è ancora presente dietro,. Si potrebbe aggirare questo problema?

[@Marchetti_Design]

Ciao! si può fare in vari modi, cambiando la treshold o aggiungendo un delay via css, per lo sfondo si potrebbe aggiungere una classe quando si arriva alla fine dello scroll con js che nasconde il video

[@mattiatuveri49]

​@@Marchetti_Design Per la seconda anche se nascondesse il video gli farebbe comunque il balzetto alla fine dove vedrebbe nero in questo caso. Una risposta potrebbe essere mettere overscroll-behavior: none nel body, ma comunque non sarebbe il massimissimo perché non va su safari (se non nella v16).

[@gabrielegirardini6893]

Ciao Andrea non ho trovato il materiale da scaricare di questo progetto nella sezione vip del sito?

[@Marchetti_Design]

guarda ora ;-)

[@gabrielegirardini6893]

Grazie mille

[@fabioinchingolo5195]

ciao andrea perchè non hai utilizzato sticky al posto di fixed ? In ogni caso sei davvero forte continua ad aiutare migliaglia di persone ad essere dei designer migliori

[@keflat23]

scoperto oggi per caso e gia un sacco di nozioni importanti! ma un video su come fare uno scroll animato con svg?

[@Fede-wh9kn]

Ciao, sei bravissimo sto iniziando a guardare i tuoi video xkè vorrei entrare pure io in questo mondo bellissimo!! Una curiosità, si può fare lo stesso lavoro su WordPress o no? Scusami sarà una domanda stupida sicuramente, ma ripeto, non ne capisco molto 😅

[@Marchetti_Design]

Si con un custom template

[@alexmallamaci7691]

Ciao, come mai a refresh della pagina i titles scompaiono? l'unico modo per farli riapparire è cancellare il codice js, salvare, riscriverlo e risalvare. Solo io ho questo problema?

[@Marchetti_Design]

Ciao, Si sbagli qualcosa nel codice ricontrolla bene

[@youngmanagerbbs]

Mettendo position fixed l'h2 non è più centrato, ma se lo levo l'animazione non viene. Come posso fare?

[@Marchetti_Design]

Scrivi sul gruppo fb link in descrizione

[@T0P-1Oww]

Siccome dice che bisogna inserire codice per far vedere le transizioni delle sezioni se il browser non le supporta, qualcuno potrebbe dirmi che righe di codice dovrei mettere, probabilmente il mio browser non le supporta. Grazie mille

[@maurosquare1243]

Ciao Andrea, Sto provando ad usare la tecnica dell'observe con Wordpress su una pagina prodotto. Ho creato un file .js esterno e collegato da functions.php con una wp_enqueue_script solo nella pagina prodotto, Il file viene visualizzato e caricato correttamente, ma allo scroll non viene aggiunta la classe .in-page. Ho copiato il codice interamente con i tuoi snippet, provato in diversi modi, ma non riesco a farlo funzionare.

[@Marchetti_Design]

Ciao! Scrivi sul gruppo fb cosi ti aiutiamo in più persone link in descrizione 😉

[@PasqualeAmbrosio]

Boom!

[@away72]

Io non riesco per un motivo bizzarro a trovare il file mp4 da scaricare nel mentre faccio tasto destro esamina il video si ferma e quando mi metto a cercarlo nella finestra degli strumenti per lo sviluppatore non riesco a trovarlo ci sono i link per scaricare solo le immagini del fermo immagine di file mp4 nemmeno l'ombra sapete dirmi come sia possibile - grazie

[@away72]

Ok risolto aprendolo con chrome che cosa strana - ma tanto per imparare una cosa nuova per voi che siete più navigati è normale che se il video si bloccava mostrando solo un frame in pausa il codice html dalla finestra degli strumenti per lo sviluppatore mi nascondesse il file mp4 e me lo mostrava soltanto come una serie di file jpg - grazie

[@SimoneBaldassin]

Bella Andre, dammi un info, stavo seguendo un corso Javascript e mi dicevano che ora, per definire le variabili, invece di var dobbiamo usare let, ma suppongo che siano valide entrambe le opzioni

[@Marchetti_Design]

Puoi usare let e const al posto di var, lo vedremo nei prossimi video io sono un po’ old school

[@gabrielesimoncini1121]

una domanda: come si fa a fare un puntatore multiplo?

[@Marchetti_Design]

maiusc + alt

[@gabrielesimoncini1121]

@@Marchetti_Design grazie mille

[@annaboreatti227]

Io sono a completo digiuno di javascript.. please help!

[@Marchetti_Design]

Arriverà a breve 🙌

[@marcorestelli640]

Ciao Andrea, perché non usi più atom?

[@Marchetti_Design]

Ciao, perché va in pensione a gennaio, non sara più supportato

[@SimoneDeAntoniis]

Grande Andrea sempre al top, utile ed efficace come sempre 😎

[@maurofagiani]

buongiorno Andrea ho provato ad iscrivermi nella comunity ma non mi arriva la mail con i dati di accesso. grazie mauro

[@Marchetti_Design]

Controlla nello spam e nella tab promozioni 😉

[@maurofagiani]

@@Marchetti_Design no Andrea non c'è ho controllato😌

[@maurosquare1243]

Non conoscevo questa nuova pratica dell'observe, infatti pensavo di realizzarla con Locomotive o GSAP. Questo è un aggiornamento fantastico per JS. Ci sono dei siti che posso seguire per rimanere aggiornato su tutte queste novità dei linguaggi front end?

[@Marchetti_Design]

Code pen, cordrops, speackyboy

[@JoeMauri]

Sono al 199esimo like... 😂

[@lorispasseri]

Salve a tutti e grazie ad @andrea. Sono interessato ad una playlist su JavaScript. Complimenti per la chiarezza con cui spieghi le tue lezioni 👏🏻👏🏻👏🏻

[@andrearampazzo8787]

Grazie mille!