jQuery: effetto splash screen

Vogliamo creare un effetto di entrata in stile splash screen con jQuery. Per ottenere questo effetto abbiamo bisogno di un elemento posizionato e nascosto che al caricamento della pagina entrerà dall'angolo in alto a sinistra e si posizionerà esattamente al centro della pagina, sia in orizzontale che in verticale. Quando si fa clic sull'elemento, questo uscirà dallo schermo da destra verso sinistra. Vediamo come.

Ecco gli stili CSS che ci occorrono:

#test {
    
    background: #d34545;
    width: 0px;
    position: absolute;
    overflow: hidden;
    font-size: 7em;
    text-align: center;
    color: #fff;
    font-family: Impact, sans-serif;
    letter-spacing: 0.1em;
    border-radius: 20px;
    cursor: pointer;
    
}

#test span {
    position: absolute;
    top: 50%;
    margin-top: -0.5em;
    width: 100%;
}

Con jQuery prendiamo le dimensioni della pagina per calcolare le coordinate da dare al nostro box animato, usando una nota tecnica CSS per centrarlo in orizzontale e in verticale:

var docWidth = $(document).width();
var docHeight = $(document).height();
    
var divWidth = Math.round(docWidth / 2);
var divHeight = Math.round(docHeight / 2);
    
var offsetLeft = '50%';
var offsetTop = '50%';

Quindi animiamo l'elemento facendolo entrare e ne gestiamo il clic facendolo sparire:

$('#test').animate(
                   {
                   width: divWidth,
                   height: divHeight,
                   top: offsetTop,
                   left: offsetLeft,
                   marginTop: -(divHeight / 2),
                   marginLeft: -(divWidth / 2)
                   
                   
                   
                   }, 'slow').click(function() {
                   
                   
                     $(this).animate({
                       left: '-9999px'                       
                    }, 'slow');
              
              
                   });

La tecnica CSS utilizzata prevede che:

1. le proprietà top e left siano impostate su 50%
2. le proprietà margin-top e margin-left abbiano un valore negativo pari rispettivamente alla metà dell'altezza e della larghezza dell'elemento

Potete visionare l'esempio finale in questa pagina.