Effetto parallasse CSS per WordPress: guida step-by-step

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: transform per 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.