Le animazioni di testo sono tra gli effetti più spettacolari e apprezzati nel web design moderno. Un titolo che si svela lettera per lettera, parole che appaiono in sequenza, un effetto onda che attraversa il testo: tutto questo può trasformare un titolo statico in un”esperienza memorabile. In questa guida completa vediamo come creare animazioni di testo per WordPress usando solo CSS e un pizzico di JavaScript per lo splitting.<\/p>\n
Il testo è il veicolo principale del messaggio del tuo sito. Animarlo significa:<\/p>\n
Per animare singole lettere o parole, devi prima dividere il testo in elementi separati (solitamente tag <span>). Questo processo si chiama “text splitting”. Puoi farlo manualmente per testi brevi, o tramite JavaScript per testi più lunghi.<\/p>\n
<h1 class="text-reveal">\n <span>B<\/span>\n <span>e<\/span>\n <span>n<\/span>\n <span>v<\/span>\n <span>e<\/span>\n <span>n<\/span>\n <span>u<\/span>\n <span>t<\/span>\n <span>i<\/span>\n<\/h1><\/code><\/pre>\nSplit automatico con JavaScript<\/h3>\nfunction splitText(el) {\n const text = el.textContent;\n el.textContent = '';\n text.split('').forEach((char, i) => {\n const span = document.createElement('span');\n span.textContent = char === ' ' ? '\\u00A0' : char;\n span.style.transitionDelay = (i * 0.03) + 's';\n el.appendChild(span);\n });\n}<\/code><\/pre>\n4 effetti di testo imperdibili<\/h2>\n1. Text Reveal (svelamento progressivo)<\/h3>\n
Le lettere appaiono una dopo l”altra, creando un effetto di scrittura elegante.<\/p>\n
.text-reveal span {\n display: inline-block;\n opacity: 0;\n transform: translateY(20px);\n animation: revealLetter 0.4s ease forwards;\n}\n\n.text-reveal span:nth-child(1) { animation-delay: 0s; }\n.text-reveal span:nth-child(2) { animation-delay: 0.05s; }\n.text-reveal span:nth-child(3) { animation-delay: 0.1s; }\n\/* Le animazioni si applicano in sequenza *\/\n\n@keyframes revealLetter {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}<\/code><\/pre>\n2. Wave (effetto onda)<\/h3>\n
Le lettere si muovono su e giù in sequenza, creando un effetto onda che attraversa il testo. È perfetto per dare energia a un titolo.<\/p>\n
.text-wave span {\n display: inline-block;\n animation: waveLetter 0.6s ease infinite alternate;\n}\n\n.text-wave span:nth-child(1) { animation-delay: 0s; }\n.text-wave span:nth-child(2) { animation-delay: 0.08s; }\n.text-wave span:nth-child(3) { animation-delay: 0.16s; }\n\/* Continua per ogni lettera *\/\n\n@keyframes waveLetter {\n from { transform: translateY(0) scale(1); }\n to { transform: translateY(-12px) scale(1.05); color: #00c7b1; }\n}<\/code><\/pre>\n3. Flip Letter (rotazione 3D)<\/h3>\n
Ogni lettera ruota su se stessa mentre appare, creando un effetto 3D spettacolare.<\/p>\n
.text-flip span {\n display: inline-block;\n opacity: 0;\n animation: flipLetter 0.5s ease forwards;\n transform-origin: bottom;\n}\n\n@keyframes flipLetter {\n 0% { opacity: 0; transform: perspective(500px) rotateX(-90deg); }\n 50% { opacity: 0.5; }\n 100% { opacity: 1; transform: perspective(500px) rotateX(0); }\n}<\/code><\/pre>\n4. Glow Text (bagliore progressivo)<\/h3>\n
Il testo passa da opaco e senza ombra a luminoso e brillante. È un effetto elegante e raffinato.<\/p>\n
.text-glow {\n animation: glowText 2s ease-in-out infinite alternate;\n}\n\n@keyframes glowText {\n from {\n text-shadow: \n 0 0 5px rgba(0, 199, 177, 0.2),\n 0 0 10px rgba(0, 199, 177, 0.1);\n }\n to {\n text-shadow: \n 0 0 10px rgba(0, 199, 177, 0.4),\n 0 0 20px rgba(0, 199, 177, 0.3),\n 0 0 40px rgba(0, 199, 177, 0.2),\n 0 0 80px rgba(0, 199, 177, 0.1);\n }\n}<\/code><\/pre>\n5. Typewriter (solo CSS)<\/h2>\n
L”effetto macchina da scrivere è un classico che funziona sempre. Con solo CSS:<\/p>\n
.typewriter {\n overflow: hidden;\n white-space: nowrap;\n border-right: 3px solid #00c7b1;\n width: 0;\n animation: typing 3s steps(30) 1s forwards,\n blink 0.75s step-end infinite;\n}\n\n@keyframes typing {\n from { width: 0; }\n to { width: 100%; }\n}\n\n@keyframes blink {\n 50% { border-color: transparent; }\n}<\/code><\/pre>\nApplicare le animazioni di testo in Gutenberg<\/h2>\n
Se vuoi usare questi effetti senza scrivere codice o gestire lo splitting manuale, ClassyBlocks Pro<\/strong> include 12 animazioni di testo già pronte: text reveal, wave, pop, letter flip, glow, word scramble, typewriter e altre. Basta selezionare un blocco di testo nell”editor Gutenberg, scegliere l”effetto dal pannello Animazioni, e lo script si occupa automaticamente dello splitting. Preview live integrata.<\/p>","protected":false},"excerpt":{"rendered":"Le animazioni di testo sono tra gli effetti più spettacolari e apprezzati nel web design moderno. Un titolo che si svela lettera per lettera, parole che appaiono in sequenza, un effetto onda che attraversa il testo: tutto questo può trasformare un titolo statico in un”esperienza memorabile. In questa guida completa vediamo come creare animazioni di […]<\/p>\n","protected":false},"author":3,"featured_media":1220,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","ai_primary_source":"Studio Immens Blog","visibility_scope":"","ai_summary":"","ai_intent":"informative","ai_related_resources":"","ai_priority":0,"ai_entity_type":"","ai_is_based_on":"","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"","footnotes":""},"categories":[40],"tags":[116,109,117,53],"ai_visibility":[],"class_list":["post-1170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo-web","tag-animazioni-css","tag-gutenberg-css","tag-scroll-driven","tag-user-experience"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/comments?post=1170"}],"version-history":[{"count":2,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1170\/revisions"}],"predecessor-version":[{"id":2147,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1170\/revisions\/2147"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/1220"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1170"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}