Bonjour,
j'aimerais faire une animation en jquery.
En effet j'ai créé un bloc (div) avec un background une image que j'ai nommé "back".
Dans ce bloc "back", j'ai mis deux bloc (div) un en haut (colonne-haut) et l'autre en bas (colonne-bas).
Et dans ces deux bloc "colonne-haut et colonne-bas", j'ai ajouté 4 div chacun : colonne-haut (top1, top2, top3, top4) et colonne-bas (bottom1, bottom2, bottom3, bottom4).
Ensuite, dans chacun des 4 div de chaque colonne (haut et bas), j'ai mis un bloc (div en fond gris) qui lui contient une image transparent.
<div class="back">
<!-- colonne haut -->
<div class="colonne_haut">
<!-- logistique -->
<div class="top1">
<div class="logistique">
<img src='image/icone/icon_logistique.png' alt='img2' />
</div>
</div>
<!-- offres et transactions -->
<div class="top2">
<div class="offreTransaction">
<img src='image/icone/icon_offreTransaction.png' alt='img2'/>
</div>
</div>
<!-- réclamation abonne -->
<div class="top3">
<div class="reclamation">
<img src='image/icone/icon_reclamation.png' alt='img2'/>
</div>
</div>
<!-- offres vendeurs -->
<div class="top4">
<div class="offreVendeur">
<img src='image/icone/icon_offreVendeur.png' alt='img2'/>
</div>
</div>
</div>
<!-- /colonne haut -->
<div class="clear"></div>
<!-- colonne bas -->
<div class="colonne_bas">
<!-- commisionnement -->
<div class="bottom1">
<div class="commission">
<img src='image/icone/icon_commission.png' alt='img2'/>
</div>
</div>
<!-- incident technique -->
<div class="bottom2">
<div class="incidentTechnique">
<img src='image/icone/icon_incident.png' alt='img2'/>
</div>
</div>
<!-- plv -->
<div class="bottom3">
<div class="plv">
<img src='image/icone/icon_plv.png' alt='img2'/>
</div>
</div>
<!-- sav -->
<div class="bottom4">
<div class="sav">
<img src='image/icone/icon_sav.png' alt='img2'/>
</div>
</div>
</div>
<!--colonne bas -->
</div>
Maintenant ce je veux faire c'est faire une animation, c'est à dire qu'au moment ou je charge ma page je peux voir l'image du div "back", donc l'image en background et juste queleque seconde après le div "back" disparait pour faire place aux 2 div à l'intérieur " colonne-haut et colonne-bas" qui eux vont afficher les 4 div du haut et bas contenant les images.
Mais je ne sais pas comment le faire en css.
les liens ci-dessous pourront sans doute t'aider.
http://jackonthe.net/css3animateit/
http://api.jquery.com/animate/
Je suis pas sûr d'avoir bien compris perso.
Si j'ai tout capté : tu as une image qui recouvre ta div back, et tu voudrais que quelques seconds après ton chargement elle disparaisse pour laisser apparaitre le contenu. C'est ça ??
Je pense qu'un petit codepen serait le bienvenue :)