{"id":1172,"date":"2026-01-21T09:14:55","date_gmt":"2026-01-21T09:14:55","guid":{"rendered":"https:\/\/studioimmens.com\/effetti-mask-reveal-wordpress\/"},"modified":"2026-07-16T17:02:48","modified_gmt":"2026-07-16T15:02:48","slug":"effetti-mask-reveal-wordpress","status":"publish","type":"post","link":"https:\/\/studioimmens.com\/en\/effetti-mask-reveal-wordpress\/","title":{"rendered":"Effetti mask e reveal per WordPress: animazioni di rivelazione"},"content":{"rendered":"<p>Gli effetti mask e reveal sono tra le tecniche pi&ugrave; spettacolari per creare animazioni di rivelazione nel web design. Un&#8221;immagine che si svela gradualmente da dietro una maschera, un testo che appare con un effetto clip, un contenuto che si rivela con un movimento a tendina: sono effetti cinematografici che trasformano l&#8221;esperienza di navigazione. In questa guida completa esploriamo tutte le tecniche per creare effetti di rivelazione in WordPress.<\/p>\n<h2>Cosa sono gli effetti mask e reveal<\/h2>\n<p>Gli effetti mask usano le propriet&agrave; CSS <code>mask<\/code>, <code>clip-path<\/code> o <code>overflow<\/code> per nascondere\/rivelare parti di un elemento. Combinati con le animazioni scroll-driven (<code>animation-timeline: view()<\/code>), creano effetti di rivelazione che si attivano automaticamente durante lo scroll dell&#8221;utente.<\/p>\n<p>Ci sono tre tecniche principali:<\/p>\n<ul>\n<li><strong>Clip-path:<\/strong> ritaglia un elemento usando forme (cerchio, poligono, percorso)<\/li>\n<li><strong>Mask:<\/strong> usa un&#8221;immagine o un gradiente come maschera<\/li>\n<li><strong>Overflow:<\/strong> nasconde parti di un elemento tramite overflow hidden e anima la posizione<\/li>\n<\/ul>\n<h2>1. Circle Reveal (rivelazione circolare)<\/h2>\n<p>L&#8221;elemento appare da un cerchio che si espande dal centro. &Egrave; uno degli effetti pi&ugrave; scenografici.<\/p>\n<pre><code>.circle-reveal {\n    clip-path: circle(0% at 50% 50%);\n    animation: circleExpand linear both;\n    animation-timeline: view();\n    animation-range: entry 0% entry 100%;\n}\n\n@keyframes circleExpand {\n    from { clip-path: circle(0% at 50% 50%); }\n    to { clip-path: circle(100% at 50% 50%); }\n}<\/code><\/pre>\n<p><strong>Ideale per:<\/strong> immagini hero, loghi, foto profilo, elementi da enfatizzare<\/p>\n<h2>2. Mask Gradient (rivelazione graduale)<\/h2>\n<p>Usando un gradiente come maschera, l&#8221;elemento si svela da sinistra verso destra o dal basso verso l&#8221;alto.<\/p>\n<pre><code>.mask-gradient {\n    mask-image: linear-gradient(to right, transparent 0%, black 50%, black 100%);\n    mask-size: 200% 100%;\n    mask-position: 100% 0;\n    animation: maskMove linear both;\n    animation-timeline: view();\n    animation-range: entry 0% entry 100%;\n}\n\n@keyframes maskMove {\n    from { mask-position: 100% 0; }\n    to { mask-position: 0% 0; }\n}<\/code><\/pre>\n<p><strong>Ideale per:<\/strong> immagini panoramiche, sfondi, testo su immagini, transizioni fluide<\/p>\n<h2>3. Slide Reveal (svelamento laterale)<\/h2>\n<p>Un elemento di copertura (un &#8220;curtain&#8221;) si sposta rivelando il contenuto sottostante. &Egrave; l&#8221;effetto &#8220;tendina&#8221;.<\/p>\n<pre><code>.slide-reveal-container {\n    position: relative;\n    overflow: hidden;\n}\n\n.slide-reveal-curtain {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: #00c7b1;\n    z-index: 1;\n    animation: slideCurtain linear both;\n    animation-timeline: view();\n    animation-range: entry 0% exit 50%;\n    transform-origin: left;\n}\n\n@keyframes slideCurtain {\n    from { transform: scaleX(1); }\n    to { transform: scaleX(0); }\n}\n\n.slide-reveal-content {\n    position: relative;\n    z-index: 0;\n}<\/code><\/pre>\n<p><strong>Ideale per:<\/strong> immagini, card, titoli di sezione, portfolio<\/p>\n<h2>4. Curtain Reveal (effetto tendina dall&#8221;alto)<\/h2>\n<pre><code>.curtain-reveal {\n    clip-path: inset(0 100% 0 0);\n    animation: curtain linear both;\n    animation-timeline: view();\n    animation-range: entry 0% entry 100%;\n}\n\n@keyframes curtain {\n    from { clip-path: inset(0 100% 0 0); }\n    to { clip-path: inset(0 0 0 0); }\n}<\/code><\/pre>\n<p><strong>Ideale per:<\/strong> titoli, citazioni, testi importanti, elementi testuali<\/p>\n<h2>5. Wipe Reveal (pulizia verticale)<\/h2>\n<pre><code>.wipe-reveal {\n    clip-path: inset(100% 0 0 0);\n    animation: wipeDown linear both;\n    animation-timeline: view();\n    animation-range: entry 0% entry 100%;\n}\n\n@keyframes wipeDown {\n    from { clip-path: inset(100% 0 0 0); }\n    to { clip-path: inset(0 0 0 0); }\n}<\/code><\/pre>\n<p><strong>Ideale per:<\/strong> immagini full-width, sfondi di sezione, hero<\/p>\n<h2>6. Text Mask Reveal (testo con maschera)<\/h2>\n<p>Il testo viene rivelato da una maschera che si sposta. &Egrave; un effetto particolarmente elegante per titoli.<\/p>\n<pre><code>.text-mask-reveal {\n    background: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-size: 200% 100%;\n    background-position: 100% 0;\n    animation: textMaskMove linear both;\n    animation-timeline: view();\n}\n\n@keyframes textMaskMove {\n    from { background-position: 200% 0; }\n    to { background-position: -100% 0; }\n}<\/code><\/pre>\n<h2>7. Polygon Reveal (forma personalizzata)<\/h2>\n<pre><code>.polygon-reveal {\n    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);\n    animation: polygonExpand linear both;\n    animation-timeline: view();\n    animation-range: entry 0% entry 100%;\n}\n\n@keyframes polygonExpand {\n    from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }\n    to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }\n}<\/code><\/pre>\n<p><strong>Ideale per:<\/strong> forme personalizzate, design creativi, elementi non rettangolari<\/p>\n<h2>Consigli per effetti mask\/reveal efficaci<\/h2>\n<ul>\n<li><strong>Non abusarne:<\/strong> 1-2 effetti di rivelazione per pagina sono sufficienti per creare impatto<\/li>\n<li><strong>Scegli il momento giusto:<\/strong> gli effetti di rivelazione funzionano meglio su elementi hero o all&#8221;inizio di sezioni importanti<\/li>\n<li><strong>Abbina a fade:<\/strong> un leggero fade abbinato al reveal rende l&#8221;effetto pi&ugrave; morbido<\/li>\n<li><strong>Clip-path vs Mask:<\/strong> clip-path &egrave; leggermente pi&ugrave; performante di mask. Usa clip-path quando possibile<\/li>\n<li><strong>Testa su mobile:<\/strong> alcuni effetti (soprattutto clip-path) possono dare problemi su Safari mobile<\/li>\n<\/ul>\n<h2>Compatibilit&agrave; cross-browser<\/h2>\n<p>Le propriet&agrave; clip-path e mask sono ampiamente supportate dai browser moderni. Per Safari e Firefox, i test mostrano un buon supporto, ma in alcuni casi specifici possono esserci differenze minime.<\/p>\n<p>Con <a href=\"https:\/\/studioimmens.com\/en\/classyblocks-pro\/\">ClassyBlocks Pro<\/a> ottieni 18 animazioni mask &amp; reveal gi&agrave; pronte nel pack dedicato, con polyfill automatico per browser legacy, integrazione visuale in Gutenberg e preview live. Basta selezionare un blocco e scegliere l&#8221;effetto.<\/p>","protected":false},"excerpt":{"rendered":"<p>Gli effetti mask e reveal sono tra le tecniche pi&ugrave; spettacolari per creare animazioni di rivelazione nel web design. Un&#8221;immagine che si svela gradualmente da dietro una maschera, un testo che appare con un effetto clip, un contenuto che si rivela con un movimento a tendina: sono effetti cinematografici che trasformano l&#8221;esperienza di navigazione. In [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1219,"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-1172","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\/1172","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=1172"}],"version-history":[{"count":1,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1172\/revisions"}],"predecessor-version":[{"id":1193,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1172\/revisions\/1193"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/1219"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1172"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}