Come fare Animazioni da Paura stile Apple (Javascript Tutorial)
Вставка
- Опубліковано 13 вер 2022
- 👉 Entra nella Community e scarica gli SNIPPETS e le risorse Html/Css/Js FREE:
bit.ly/marchetti-design-community
⚙️ Come installare gli snippets: • VS CODE: Come iniziare...
🎨 Accedi alla guida FREE sul WEB DESIGN che CONVERTE qui:
bit.ly/guida-web-design
👨💻 Dai un occhiata ai Corsi PRO per imparare Wed Design e Sviluppo Web:
marchettidesignshop.com/shop/
Oggi Andiamo a creare Animazioni Html / Css / javascirpt super accattivanti andando a replicare le animazioni del sito Apple.
Vedremo come utilizzare JavaScript per aggiungere classi CSS allo scroll andando a creare animazioni in fade sopra a un video background responsive.
Tutto il codice sarà disponibile per il download nella community next level, puoi accedere gratuitamente qui: bit.ly/marchetti-design-community
...
Seguimi su instagram per vedere il dietro le quinte del mio lavoro: / andrea_marchetti_design
🔥Dai un occhiata al corso dove impariamo a Programmare:
bit.ly/next-web-hero
🔥Dai un occhiata al corso sullo sviluppo WordPress:
bit.ly/next-level-wp-pro
🔥 Dai un occhiata al Corso su Web Design e UX:
bit.ly/next-level-uxcwd
🔥 Dai un occhiata la Corso sullo Sviluppo di Siti Web:
marchettidesignshop.com/next-...
🔥Dai un occhiata al corso sullo sviluppo di eCommerce
bit.ly/next-level-woo-pro
🚀 Il mio hosting preferito: bit.ly/md-siteground
📦 Il mio Setup Postazione + Video: www.amazon.it/shop/marchettid...
🤖Rimani aggiornato con i nuovi contenuti iscriviti al Bot: bit.ly/bot-marchetti-design
🔴Iscriviti al canale, nuovi video ogni settimana ;-)
/ @marchetti_design
TEMI WordPress FREE
WLOW: www.marchettidesign.net/wlow
Fullby: www.marchettidesign.net/fullby/
Gridby: www.marchettidesign.net/gridby/
Swipy: www.marchettidesign.net/swipy/
Fullbase: it.wordpress.org/themes/fullb...
SOCIAL
Twitter: / afmarchetti
Facebook: / marchettidesignnet-140...
Github: github.com/afmarchetti/
Codepen: codepen.io/afmarchetti/
- ♪♫ Artists' Credit & Links ♫♪ -
► Music by: LAKEY INSPIRED
• SUBSCRIBE to the LAKEY INSPIRED UA-cam channel HERE - ua-cam.com/channels/Omy.html...
• Follow LAKEY INSPIRED on SoundCloud HERE - / lakeyinspired
• Follow LAKEY INSPIRED on Instagram HERE - / lakeyinspired
• Follow LAKEY INSPIRED on Spotify HERE - open.spotify.com/artist/3zDGj...
• Support LAKEY INSPIRED on Patreon HERE - (Optional) / lakeyinspired
--- • (C) Copyright Notice:
This is FREE royalty free music that has been released under the "Creative Commons Attribution 3.0 Unported "Share Alike" (CC BY-SA 3.0) license." Details about the license can be found HERE - creativecommons.org/licenses/... - Disclaimer: The creative commons music featured in this video has been modified and adapted. The original music has been remixed/edited and converted into video format. This video was made to create artistic visuals for entertainment purposes, to help promote the music and original artist.
-♫ [NCM Links] ♫♪- [No Copyright Music]
• Follow NCM on Twitter HERE - goo.gl/VF8ggk
• Follow NCM on Facebook HERE - goo.gl/aaTtyF
• If you're an artist who wants your music featured on the channel or an artist that would like your music removed, please contact Airtight @ (airtight@safemail.cx)
No Copyright Music is a UA-cam channel dedicated to releasing daily music uploads to help creators enhance the creativity and popularity of their content.
We hope you enjoy our FREE UA-cam music library of royalty free music, copyright free music, no copyright music, and creative commons music for UA-cam videos.
NCM No Copyright Music - Chill Lo-Fi hip hop beat FREE music by LAKEY INSPIRED (Copyright Free Music)
Camera - iPhone 8 Plus / Sony RX100 m4
Stay Tuned! - Розваги
Grazie!! Sarebbe utilissimo se facessi una playlist a tema javascript partendo dalle basi, continua cosi!
video di altissima qualità GRANDE!!
aspettiamo tutti il prossimo video😀
Bel video, ho apprezzato molto e mi ha ispirato. Grande!
Siii approfondiamo js! Video 🔝🔝🔝 grazie ❤️
Complimenti sinceri, talmente ben fatto che ho iniziato a seguirti. Ottimo video.
Numero 1! complimenti!
STUPENDO!
Video top come sempre! Aspettiamo lo scroll orizzontale 😂
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.
Grazie mille!
Sempre il migliore.
ormai io metto il like sulla fiducia , adoro tutti i tuoi video, molto utili e facili da apprendere.
Grazie!!!! mi hai svoltato la vita. Gli snippets sono fantastici
daje
#SuperMarchetti video 💣💣💣💣💣 senza parole super 🙌🙌🙌🙌🙌
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 !
Altro che 600, 6000 ne meriti :)
Si ma vogliamo anche il resto della landing page dell'iPhone eh!
Daje Sig. Marchetti! ♥️✌️
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)?
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.
Grande! Grazie del supporto 💪
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! :)
boom boom and boom! top! :D
Fantastico….. 🎉
Mi sta venendo voglia di iscrivermi alla community e fare il corso Pro ❤
Dajee
Fantastico 😍😍.....potresti fare invece quello che fanno all'interno della pagina di presentazione del nuovo iPhone??
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".
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.
Ciao, Se c’è interesse porterò sicuramente contenuti su js
Boom!
ho messo like
adesso guaro il video
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?.
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
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?
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
@@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).
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
Ciao è possibile che nella conversione da atom wp ci sia qualche errorino nelle prossime release andrò a testarli ancora
Salve
Faresti una serie di video per impostare JavaScript?
Grazie 🙏
scoperto oggi per caso e gia un sacco di nozioni importanti!
ma un video su come fare uno scroll animato con svg?
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
che bel video caspita. Complimenti ma per chi parte da zero per caso hai fatto tutorial basilari su javascript?
Si cerva javascript facile su canale 😉
Ciao Andrea non ho trovato il materiale da scaricare di questo progetto nella sezione vip del sito?
guarda ora ;-)
Grazie mille
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?
Per fare una struttura del genere in wp bisogna creare un template custom, vediamo come farlo nei corsi link in descrizione
Ciao, forse mi sono perso qualche video precedente, puoi dirmi quale estensione (vs code) usi per javascript?
Nessuna, sono i miei snippets link in descrizione
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
C’è un video in descrizione che ti spiega come fare
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.
Ciao! Scrivi sul gruppo fb cosi ti aiutiamo in più persone link in descrizione 😉
Grazie mille ottimo tutorial! Ma come fai a trovare il video nella pagina di apple watch? io non riesco a trovarla
Ciao! Ispeziona elemento e l’occhio dello sviluppatore 😉
Mettendo position fixed l'h2 non è più centrato, ma se lo levo l'animazione non viene. Come posso fare?
Scrivi sul gruppo fb link in descrizione
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 😅
Si con un custom template
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?
Ciao, Si sbagli qualcosa nel codice ricontrolla bene
Grazie fenomenale!!! Una domanda, perché non hai creato un file css ma hai scritto tutto nello stile dell'html?
Per comodità in un sito vero li metterei el css generale
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
@@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/
una domanda: come si fa a fare un puntatore multiplo?
maiusc + alt
@@Marchetti_Design grazie mille
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
Puoi usare let e const al posto di var, lo vedremo nei prossimi video io sono un po’ old school
Il god dell’html
non esageriamo dai heheh
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
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
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?
Code pen, cordrops, speackyboy
Ciao Andrea, perché non usi più atom?
Ciao, perché va in pensione a gennaio, non sara più supportato
Grande Andrea sempre al top, utile ed efficace come sempre 😎
buongiorno Andrea ho provato ad iscrivermi nella comunity ma non mi arriva la mail con i dati di accesso. grazie mauro
Controlla nello spam e nella tab promozioni 😉
@@Marchetti_Design no Andrea non c'è ho controllato😌
Io sono a completo digiuno di javascript.. please help!
Arriverà a breve 🙌
Sono al 199esimo like... 😂
Salve a tutti e grazie ad @andrea.
Sono interessato ad una playlist su JavaScript.
Complimenti per la chiarezza con cui spieghi le tue lezioni 👏🏻👏🏻👏🏻
Grazie mille!