jQuery: effetto titoli dei film

Molti degli effetti relativi al mondo del cinema sono abbastanza semplici da replicare con jQuery. Di seguito vedremo un semplice effetto che riproduce l'entrata dei titoli di un film. Come noterete, gran parte del lavoro consiste nel dare i giusti stili CSS e nello scegliere la marcatura appropriata. jQuery non fa altro che aggiungere un semplice effetto di entrata ed un gioco di fade in / fade out sugli elementi scelti.

Per prima cosa la marcatura, che comunque deve mantenere una sua semantica:


<div id="screen">

   <h1>jQuery</h1>
   <p id="tagline">presenta</p>
   <h2>Write Less, <br/> Do More</h2>
   <p id="author">Un film di John Resig</p>
   

</div>

La semantica ci aiuta a mantenere un livello di compatibilità con quei programmi utente che non supportano JavaScript o i CSS. Quindi il nostro CSS:


html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	min-height: 100%;
}

body {
	font: 100% 'Arial Black', Arial, sans-serif;
	background: #fff;
	color: #000;
	position: relative;
}

#screen {
	width: 700px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -350px;
}

#screen h1 {
	width: 100%;
	height: 172px;
	background: url(jquery.png) no-repeat;
	text-indent: -1000em;
	margin: 0;
	display: none;
}

#tagline {
	margin: 0;
	color: #d40;
	font-size: 3em;
	letter-spacing: 0.2em;
	text-align: center;
	display: none;
}

#screen h2 {
	font: 6em Impact, sans-serif;
	letter-spacing: 0.2em;
	color: #555;
	margin: 0;
	text-align: center;
	position: absolute;
	top: 0;
	left: -1000em;
}

#author {
	font: italic 3em Georgia, serif;
	text-align: center;
	letter-spacing: 0.1em;
	color: #008;
	margin: 0;
	display: none;
}

Gli elementi con display: none avranno come effetto di entrata un semplice fade, mentre il sottotitolo, che ha un offset sinistro negativo, entrerà con un effetto di movimento da sinistra verso destra:


$(function() {

  var title = $('h1', '#screen');
  var tagline = $('#tagline', '#screen');
  var subTitle = $('h2', '#screen');
  var author = $('#author', '#screen');
  
  title.fadeIn(2000, function() {
  
    tagline.fadeIn(200, function() {
    
      $(this).add(title).fadeOut(2000, function() {
      
        subTitle.animate({
          left: 0
        }, 1000, function() {
        
          $(this).fadeOut(2000, function() {
          
            author.fadeIn(2000);
          
          
          });
        
        });
      
      });
    
    
    });
  
  
  });


});

Come si può notare, la sequenzialità degli effetti e delle animazioni è stata ottenuta usando le funzioni di callback dei metodi fadeIn(), fadeOut() e animate(). La sequenza è:

  1. Titolo
  2. Tagline
  3. Scompaiono titolo e tagline e appare il sottotitolo da sinistra a destra
  4. Scompare il sottotitolo
  5. Appare l'autore del film.

Potete osservare il risultato finale in questa pagina.

Torna su