L”effetto parallasse è una delle tecniche visive più richieste nel web design. Lo sfondo che si muove a velocità diversa rispetto al contenuto crea un senso di profondità e tridimensionalità che cattura l”attenzione. In questa guida completa vediamo come creare parallasse performanti per WordPress, dalle tecniche CSS pure alle soluzioni ibride, con consigli su performance e compatibilità.<\/p>\n
L”effetto parallasse è un”illusione ottica in cui oggetti a distanze diverse sembrano muoversi a velocità diverse quando l”osservatore si sposta. Nel web design, si traduce in sfondi che si muovono più lentamente del contenuto mentre l”utente scrolla, creando profondità.<\/p>\n
.parallasse-base {\n background-image: url('sfondo.jpg');\n background-attachment: fixed;\n background-position: center;\n background-size: cover;\n min-height: 400px;\n}<\/code><\/pre>\nQuesto metodo è il più semplice ma ha un limite importante: non funziona su Safari mobile. Per questo, molti sviluppatori lo evitano per siti con traffico mobile significativo.<\/p>\n
Metodo 2: Prospettiva CSS (consigliato, senza JavaScript)<\/h3>\n
Usando la prospettiva CSS e transform: translateZ()<\/code>, puoi creare un parallasse nativo che funziona su tutti i browser moderni:<\/p>\n.parallasse-wrapper {\n perspective: 1px;\n overflow-x: hidden;\n overflow-y: auto;\n height: 100vh;\n}\n\n.parallasse-sfondo {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transform: translateZ(-1px) scale(2);\n background-image: url('sfondo.jpg');\n background-size: cover;\n z-index: -1;\n}\n\n.parallasse-contenuto {\n position: relative;\n z-index: 1;\n background: white;\n padding: 60px 20px;\n}<\/code><\/pre>\nCome funziona: translateZ(-1px)<\/code> spinge lo sfondo indietro (lontano dall”utente), mentre scale(2)<\/code> lo ingrandisce per compensare la distanza. Il risultato è uno sfondo che si muove più lentamente del contenuto, creando il parallasse.<\/p>\nMetodo 3: JavaScript con requestAnimationFrame (più controllo)<\/h3>\n
Per parallasse avanzati con più layer e controllo preciso:<\/p>\n
window.addEventListener('scroll', () => {\n const scrolled = window.scrollY;\n const parallasseElements = document.querySelectorAll('.parallasse-js');\n \n parallasseElements.forEach(el => {\n const speed = el.dataset.speed || 0.5;\n const yPos = -(scrolled * speed);\n el.style.transform = 'translate3d(0, ' + yPos + 'px, 0)';\n });\n}, { passive: true });<\/code><\/pre>\nUsa l”opzione passive: true<\/code> per non bloccare il thread principale durante lo scroll.<\/p>\nTipi di parallasse per WordPress<\/h2>\nParallasse orizzontale<\/h3>\n
Gli elementi si muovono lateralmente mentre scrolli verticalmente. È un effetto molto scenografico, ideale per sezioni creative.<\/p>\n
.parallasse-h {\n transition: transform 0.1s linear;\n}\n\/\/ JS\nwindow.addEventListener('scroll', () => {\n const el = document.querySelector('.parallasse-h');\n const rect = el.getBoundingClientRect();\n const progress = (window.innerHeight - rect.top) \/ (window.innerHeight + rect.height);\n el.style.transform = 'translateX(' + (progress * 100 - 50) + 'px)';\n}, { passive: true });<\/code><\/pre>\nParallasse multi-layer<\/h3>\n
Più livelli che si muovono a velocità diverse, creando un effetto 3D immersivo. Ideale per sezioni hero creative.<\/p>\n
<div class="parallasse-multi">\n <div class="layer layer-1" data-speed="0.2"><\/div>\n <div class="layer layer-2" data-speed="0.5"><\/div>\n <div class="layer layer-3" data-speed="0.8"><\/div>\n<\/div><\/code><\/pre>\nPerformance: quando usare e quando evitare il parallasse<\/h2>\nUsa parallasse quando:<\/h3>\n\n- Vuoi creare un impatto visivo forte nella sezione hero<\/li>\n
- Hai una sola immagine di sfondo di alta qualità<\/li>\n
- Il sito è desktop-first (il parallasse su mobile ha senso solo in contesti specifici)<\/li>\n<\/ul>\n
Evita parallasse quando:<\/h3>\n\n- La priorità è la velocità di caricamento (il parallasse richiede immagini grandi)<\/li>\n
- Il sito ha molto traffico mobile (su mobile l”effetto è spesso impercettibile)<\/li>\n
- Hai già molte animazioni nella pagina (troppi effetti “gridano” insieme)<\/li>\n<\/ul>\n
Best practice per parallasse performanti<\/h2>\n\n- Usa WebP:<\/strong> le immagini in WebP pesano il 30-50% in meno di JPEG\/PNG<\/li>\n
- Lazy loading:<\/strong> carica le immagini parallasse solo quando sono vicine al viewport<\/li>\n
- will-change:<\/strong> usa
will-change: transform<\/code> per anticipare al browser l”animazione<\/li>\n- Limita l”uso:<\/strong> 1-2 sezioni parallasse per pagina sono più che sufficienti<\/li>\n
- Disabilita su mobile:<\/strong> usa
@media (prefers-reduced-motion)<\/code> per rispettare le preferenze utente<\/li>\n<\/ul>\n@media (max-width: 768px) {\n .parallasse-wrapper {\n perspective: none;\n }\n .parallasse-sfondo {\n transform: none;\n position: relative;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .parallasse-wrapper {\n perspective: none;\n }\n}<\/code><\/pre>\nParallasse in Gutenberg senza codice<\/h2>\n