Uno degli effetti visivi più apprezzati dagli utenti è vedere gli elementi che “prendono vita” mentre scrollano la pagina. Un titolo che appare, una card che scivola in posizione, un”immagine che si ingrandisce: sono piccole animazioni che trasformano un sito statico in un”esperienza dinamica e coinvolgente. In questa guida vediamo come animare i blocchi Gutenberg durante lo scroll, con tecniche che vanno dal CSS puro fino a soluzioni integrate.<\/p>\n
Le animazioni scroll-triggered migliorano l”esperienza utente in modi concreti:<\/p>\n
Il modo più semplice e performante per animare i blocchi Gutenberg allo scroll è usare Poi, nel campo “Classe CSS aggiuntiva” del blocco Gutenberg, inserisci Uno degli effetti più belli è quando gli elementi si animano uno dopo l”altro, creando un effetto “onda”. Per farlo, usa ritardi crescenti:<\/p>\nanimation-timeline: view()<\/code>. Questa proprietà CSS lega l”animazione alla posizione dell”elemento nel viewport.<\/p>\n\/* Definisci l''animazione *\/\n@keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(50px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\/* Classe da applicare ai blocchi *\/\n.cb-fade-up {\n animation: fadeUp 1s ease both;\n animation-timeline: view();\n animation-range: entry 0% entry 100%;\n}<\/code><\/pre>\ncb-fade-up<\/code>. Il blocco si animerà automaticamente durante lo scroll.<\/p>\nTutti i tipi di animazione per i blocchi Gutenberg<\/h2>\n
Fade (trasparenza)<\/h3>\n
\/* Fade In: appare gradualmente *\/\n.cb-fade-in {\n animation: cbFadeIn 1s ease both;\n animation-timeline: view();\n}\n@keyframes cbFadeIn { from { opacity: 0; } to { opacity: 1; } }\n\n\/* Fade Up: appare dal basso *\/\n.cb-fade-up {\n animation: cbFadeUp 1s ease both;\n animation-timeline: view();\n}\n@keyframes cbFadeUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }\n\n\/* Fade Down: appare dall''alto *\/\n.cb-fade-down {\n animation: cbFadeDown 1s ease both;\n animation-timeline: view();\n}\n@keyframes cbFadeDown { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: translateY(0); } }\n\n\/* Fade Left: appare da sinistra *\/\n.cb-fade-left {\n animation: cbFadeLeft 1s ease both;\n animation-timeline: view();\n}\n@keyframes cbFadeLeft { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }\n\n\/* Fade Right: appare da destra *\/\n.cb-fade-right {\n animation: cbFadeRight 1s ease both;\n animation-timeline: view();\n}\n@keyframes cbFadeRight { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }<\/code><\/pre>\nSlide (scorrimento)<\/h3>\n
.cb-slide-up {\n animation: cbSlideUp 1s ease both;\n animation-timeline: view();\n}\n@keyframes cbSlideUp { from { transform: translateY(100px); } to { transform: translateY(0); } }<\/code><\/pre>\nZoom (ingrandimento)<\/h3>\n
.cb-zoom-in {\n animation: cbZoomIn 1s ease both;\n animation-timeline: view();\n}\n@keyframes cbZoomIn { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }<\/code><\/pre>\nFloat (galleggiante)<\/h3>\n
.cb-float {\n animation: cbFloat 1s ease both;\n animation-timeline: view();\n animation-range: entry 0% exit 100%;\n}\n@keyframes cbFloat { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(2deg); } 100% { transform: translateY(0) rotate(0deg); } }<\/code><\/pre>\nAnimazioni a cascata (staggered)<\/h2>\n
\/* Elementi in sequenza con ritardo progressivo *\/\n.gruppo-card > .wp-block-column:nth-child(1) { animation-delay: 0s; }\n.gruppo-card > .wp-block-column:nth-child(2) { animation-delay: 0.15s; }\n.gruppo-card > .wp-block-column:nth-child(3) { animation-delay: 0.3s; }\n.gruppo-card > .wp-block-column:nth-child(4) { animation-delay: 0.45s; }<\/code><\/pre>\nQuali blocchi animare e come<\/h2>\n
\n
\n Blocco Gutenberg<\/th>\n Animazione consigliata<\/th>\n Effetto<\/th>\n<\/tr>\n \n Heading (titolo)<\/td>\n Fade Up o Text Reveal<\/td>\n Impatto massimo<\/td>\n<\/tr>\n \n Paragraph (paragrafo)<\/td>\n Fade In<\/td>\n Morbido e naturale<\/td>\n<\/tr>\n \n Image (immagine)<\/td>\n Zoom In o Fade In<\/td>\n Rivela l”immagine<\/td>\n<\/tr>\n \n Columns (colonne)<\/td>\n Staggered Fade Up<\/td>\n Effetto cascata<\/td>\n<\/tr>\n \n Group (gruppo)<\/td>\n Fade Up<\/td>\n Sezione che appare<\/td>\n<\/tr>\n \n Cover (copertina)<\/td>\n Zoom Out<\/td>\n Effetto cinematografico<\/td>\n<\/tr>\n \n Buttons (pulsanti)<\/td>\n Bounce o Pulse<\/td>\n Attira l”azione<\/td>\n<\/tr>\n \n Quote (citazione)<\/td>\n Blur In<\/td>\n Elegante<\/td>\n<\/tr>\n<\/table>\n Animare i blocchi Gutenberg senza codice<\/h2>\n