Animazioni Css allo Scroll con Mix Blend Mode
HTML-код
- Опубликовано: 11 сен 2024
- ENTRA NELLA COMMUNUTY e scarica il codice del video:
👉 bit.ly/marchett...
In questo video tutorial esploriamo la potente propietà CSS Mix Blend Mode per creare animazioni accattivanti allo scroll.
Impara come dare vita al tuo sito web con effetti di animazione fluidi, utilizzando CSS e la magia di Mix Blend Mode. Questa guida è ideale sia per sviluppatori web alle prime armi che per esperti, offrendo consigli pratici e codice di esempio.
Sia che tu voglia aggiungere un tocco di creatività o migliorare l'UX, questo video ti mostrerà come farlo con facilità. Iscriviti, per non perdere i prossimi tutorial su CSS e web design! #CSSAnimations #MixBlendMode #WebDesignTutorial
SUPER BONUS:
⚙️ Come installare gli snippets: • VS CODE: Come iniziare...
🎨 Guida FREE sul WEB DESIGN: bit.ly/guida-w...
🎁 Tutte le risorse create nei video: bit.ly/marchett...
I MIEI CORSI ONLINE:
👨💻 Next Web Hero - Impara i migliori linguaggi di programmazione e ricrea siti web famosi spettacolari: bit.ly/next-web...
🎨 Next Level UX e Web Design - impara i segreti del WEB DESIGN e della COMUNICAZIONE web: bit.ly/next-le...
⚙️ Next Level WP PRO - Impara a sviluppare temi WordPress da zero senza builder: bit.ly/next-lev...
📦 Nexl Level Woo - Imparare a realizzare eCommerce da zero con WordPress e WooCommerce: bit.ly/next-lev...
LA MIA SCUOLA PER DIVENTARE WEB DESINGER PRO:
🚀 Your Web Academy - L’Academy online per far decollare al tua carriera da Sviluppatore e Web Designer: yourwebacademy...
IL MIO HOSTING PREFERITO:
⚡️ Siteground - il migliore hosting secondo me veloce e sicuro: bit.ly/md-siteg...
LA MIA ATTREZZATURA PER LAVORO E VIDEO:
🖥 Schermo verticale: amzn.to/3MgP2VK
📸 Camera compatta: amzn.to/3UaD9SV
📸 Camera grande: amzn.to/3zteiR0
🎥 Lente: amzn.to/3GclZPh
💡 Light: amzn.to/3nNsqBM
🎙 Microphone: amzn.to/434fTKq
🌿 Pianta finta: amzn.to/3KalVAP
🛠 Tutti i prodotti che consiglio: amzn.to/3MgP2VK
📚 Tutti i libri che consiglio: amzn.to/43xh6tU
👨🏫 Vuoi una mano a creare un sito web che ti porti clienti e aumenti i tuoi profitti? Contattami: www.marchettid...
CONNETTITI CON ME SULLE ALTRE PIATTAFORME:
⚡️ Gruppo FB Community Next Level: bit.ly/marchett...
🌍 Il mio sito web: www.marchettid...
🤝 Linkedin: / andrea-marchett-design
📸 Instagram: / andrea_marchetti_design
CHI SONO:
Ciao sono Andrea Marchetti Web Designer e Sviluppatore Web, da più di 13 anni realizzo siti web portando imprenditori e aziende online. Ho alle spalle più di 200 siti realizzati e più di 1000 Studenti formati nei miei corsi Next Level.Sono esperto in WordPress, Web Design e Comunicazione negli anni le mie risorse per fare siti sono state scaricate più di 100.000 volte. Supporto la community WordPress (ho realizzato 3 Temi pubblicato sulla repo Ufficiale) ho avuto più volte il piacere di parlare ai WordCamp, le conferenze ufficiali su questa fantastica piattaforma.
👨🏻💻 Se vuoi imparare a fare siti accattivanti e professionali sei nel posto giusto, parti da qui: • COME INIZIARE A FARE S...
TEMI WORDPRESS FREE:
Wlow: wordpress.org/...
Nextawards: wordpress.org/...
Fullbase: it.wordpress.o...
Fullby: www.marchettid...
- ♪♫ Artists' Credit & Links ♫♪ -
► Music by: LAKEY INSPIRED
• SUBSCRIBE to the LAKEY INSPIRED RUclips channel HERE - www.youtube.co....
• Follow LAKEY INSPIRED on SoundCloud HERE - / lakeyinspired
• Follow LAKEY INSPIRED on Instagram HERE - / lakeyinspired
• Follow LAKEY INSPIRED on Spotify HERE - open.spotify.c....
• 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."
Sempre sul pezzo, complimenti per tutto quello che fai 💕
Puoi fare una serie/playlist di video di tante animazioni css fighe che vedi in altri siti web?
Se interessa volentieri ;)
@Marchetti_Design Interessa eccome, Andrea!
Siiii ❤❤❤
Assolutamente da fare super interessante
Bravo e complimenti! Ogni tanto mi dimentico cosa sia css con tutto questo Tailwind di mezzo. Sano e bello css. Avrei già buttato un greensocket con qualche filtro soppra. Oppure un alpine js con x scroll. Ottimo lavoro! Non complichiamo le cose belle e facili. (anche se se sembrano facili) 😅
😊
Ciao Andrea, sempre interessanti i tuoi video! Sarebbe bello una serie di video dove mostri come integrare nel codice anche animazioni on scroll del contenuto (contenuti che compaiono come nel sito iniziale). Mi ricordo che tempo fa ne avevi fatto uno con l'integrazione di GSAP in un tema Wordpress per la navigazione :) Ottimo lavoro come sempre comunque!
Ormai metto like prima di guardare il video 😅 bravissimo e molto chiaro nelle spiegazioni. Si una serie/playlist di video sulle animazioni sarebbe davvero molto interessante.
Bombetta 💣
bello ! grazie
Video coinciso, efficace e funzionale.
Sei il più forte
bellissima animazione mi potrebbe essere utile anche per un esempio di un sito web grazie mille per i tuoi video
Grazie
Grazie davvero utili questi video!
forte, non conoscevo la funzione css per invertire, per fare curvatura avevo visto delle guide tempo fa dove si poteva fare senza inserire immagini o vettoriali
Attenzione che con mix-blend-mode: difference; non viene invertito il colore del logo, ma viene fatta la differenza tra il colore del logo e il colore che si trova sotto al logo. Motivo per cui il logo bianco su sfondo bianco viene visualizzato nero.
Lovvvv
Perché si usano 2 underscore in quella nomenclatura invece di uno?
È cosi principalmente per essere più chiaro e leggibile ed evitare possibili conflitti con classi con un solo undescore
buongiorno avevo una domanda, stavo provando a scaricare Emmet su Atom da Mac ma non riesco ad effettuare l’istallazione perché mi dice che il certificato è scaduto.. qualcuno sa come fare? grazie!
Passa a Vscode (atom è andato in pensione) ho fatto vari video a riguardo cerca nel canale ;)
@@Marchetti_Designperfetto grazie
Ma non aveva piu senso usare position:sticky in questo caso?
A mio avviso no, position sticky è meno supporto dai vari browser e ha un comportamento leggermente diverso, forse potrebbe essere interessante un video dove mostro le differenze tra fixed e sticky, fatemi sapere :)
@@Marchetti_Design sarebbe interessante, assolutamente, anche capire effettivamente quanto possa essere supportato
@@_marco.9_ per quello basta una semplice ricerca su google: caniuse.com/?search=sticky
Ma c’è nessuna animazione in questo video… 😂 il titolo è un po’ fuorviante.
Intendi "non"? Quella sul logo è una animazione allo scroll. Tra l'atro fino poco tempo fa era molto più complessa da realizzare, ora con questa funzionalità CSS la fai in una linea di codice.
@@Marchetti_Design si, intendevo proprio dire che "non c'è nessuna animazione in questo video" e oltre a questo non è neanche legata allo scroll se proprio vogliamo dirla tutta. Al massimo si può parlare di "un effetto", dato che la proprietà mix-blend-mode va a fare una operazione sui pixel del logo. Inoltre non è vero che i colori del logo vengono invertiti. Con il valore difference, la proprietà mix-blend-mode, applicata sul logo, prende il colore dei pixel del logo e gli sottrae il colore di quello che trova come sfondo. Quindi se il logo è bianco e lo sfondo è bianco allora il risultato finale sarà che lo vediamo nero perché => bianco - bianco = nero. Ma se lo sfondo invece di essere nero, fosse giallo per esempio, il logo non sarebbe nero alla fine, ma andrebbe sul blu dato che al bianco vengono sottratti i canale rosso e verde. Lo sto dicendo per chi ti segue e magari è alle prime armi, penso che tu queste cose le sappia già. peace 😉