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à.
Cosa è l”effetto parallasse
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à.
I 3 metodi per creare parallasse in WordPress
Metodo 1: background-attachment: fixed (il più semplice)
.parallasse-base {
background-image: url('sfondo.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
min-height: 400px;
}Questo 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.
Metodo 2: Prospettiva CSS (consigliato, senza JavaScript)
Usando la prospettiva CSS e transform: translateZ(), puoi creare un parallasse nativo che funziona su tutti i browser moderni:
.parallasse-wrapper {
perspective: 1px;
overflow-x: hidden;
overflow-y: auto;
height: 100vh;
}
.parallasse-sfondo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateZ(-1px) scale(2);
background-image: url('sfondo.jpg');
background-size: cover;
z-index: -1;
}
.parallasse-contenuto {
position: relative;
z-index: 1;
background: white;
padding: 60px 20px;
}Come funziona: translateZ(-1px) spinge lo sfondo indietro (lontano dall”utente), mentre scale(2) lo ingrandisce per compensare la distanza. Il risultato è uno sfondo che si muove più lentamente del contenuto, creando il parallasse.
Metodo 3: JavaScript con requestAnimationFrame (più controllo)
Per parallasse avanzati con più layer e controllo preciso:
window.addEventListener('scroll', () => {
const scrolled = window.scrollY;
const parallasseElements = document.querySelectorAll('.parallasse-js');
parallasseElements.forEach(el => {
const speed = el.dataset.speed || 0.5;
const yPos = -(scrolled * speed);
el.style.transform = 'translate3d(0, ' + yPos + 'px, 0)';
});
}, { passive: true });Usa l”opzione passive: true per non bloccare il thread principale durante lo scroll.
Tipi di parallasse per WordPress
Parallasse orizzontale
Gli elementi si muovono lateralmente mentre scrolli verticalmente. È un effetto molto scenografico, ideale per sezioni creative.
.parallasse-h {
transition: transform 0.1s linear;
}
// JS
window.addEventListener('scroll', () => {
const el = document.querySelector('.parallasse-h');
const rect = el.getBoundingClientRect();
const progress = (window.innerHeight - rect.top) / (window.innerHeight + rect.height);
el.style.transform = 'translateX(' + (progress * 100 - 50) + 'px)';
}, { passive: true });Parallasse multi-layer
Più livelli che si muovono a velocità diverse, creando un effetto 3D immersivo. Ideale per sezioni hero creative.
<div class="parallasse-multi">
<div class="layer layer-1" data-speed="0.2"></div>
<div class="layer layer-2" data-speed="0.5"></div>
<div class="layer layer-3" data-speed="0.8"></div>
</div>Performance: quando usare e quando evitare il parallasse
Usa parallasse quando:
- Vuoi creare un impatto visivo forte nella sezione hero
- Hai una sola immagine di sfondo di alta qualità
- Il sito è desktop-first (il parallasse su mobile ha senso solo in contesti specifici)
Evita parallasse quando:
- La priorità è la velocità di caricamento (il parallasse richiede immagini grandi)
- Il sito ha molto traffico mobile (su mobile l”effetto è spesso impercettibile)
- Hai già molte animazioni nella pagina (troppi effetti “gridano” insieme)
Best practice per parallasse performanti
- Usa WebP: le immagini in WebP pesano il 30-50% in meno di JPEG/PNG
- Lazy loading: carica le immagini parallasse solo quando sono vicine al viewport
- will-change: usa
will-change: transformper anticipare al browser l”animazione - Limita l”uso: 1-2 sezioni parallasse per pagina sono più che sufficienti
- Disabilita su mobile: usa
@media (prefers-reduced-motion)per rispettare le preferenze utente
@media (max-width: 768px) {
.parallasse-wrapper {
perspective: none;
}
.parallasse-sfondo {
transform: none;
position: relative;
}
}
@media (prefers-reduced-motion: reduce) {
.parallasse-wrapper {
perspective: none;
}
}Parallasse in Gutenberg senza codice
Con ClassyBlocks Pro puoi applicare effetti parallasse, sticky e reveal avanzati a qualsiasi blocco Gutenberg con un click. Il pack Special Scroll include 12 effetti tra cui parallasse, reveal al passaggio, sticky advance e animazioni 3D. Senza scrivere codice, senza configurazioni.
