Tutorial Javascript: un effet de perspective sans flash – 2ème partie -

Après la théorie, passons au code…

Le mark up html est simplissime :

<div id=”frame” >
<div class=”moving turtle” style=”z-index:16;”> </div>
<div class=”moving oldgohan” style=”z-index:4;”> </div>
<div class=”moving krilin” style=”z-index:19;”> </div>
<div class=”moving goku” style=”z-index:24;”> </div>
…
<div class=”moving cloud1 cloud1d” style=”z-index:3;”> </div>
</div>

Il est composé d’un élément div, pour chaque personnage, l’image étant définie comme background de l’élément. Ces éléments div sont positionnés en position absolue et l’ordre de superposition est défini par z-index. Le positionnement au sein de la bannière se fait par les attributs top et left au sein de la css : (more…)