Graphoeil Multimédia
Menu

Création d'ombres en CSS et animation avec TweenMax

Comment faire ressortir des éléments visuels importants

Lors de la création d'un site internet certains éléments visuels doivent être plus visible, les titres, sous-titres, accroches de texte... Voici une technique toute simple pour les renforcer.

Création en CSS et HTML

Nous commençons par créer les différentes balises HTML.

<div id="conteneurPrincipal"> <div id="conteneurTextes"> <p class="titre">Le titre</p> <p class="sousTitre">Le sous-titre</p> <p class="ssSousTitre">Chapeau d'introduction</p> </div> </div>

Puis la mise en forme de la super ombre en CSS, nous utilisons ici la technique d'accumulation des ombres pour créer un effet de relief.

.superOmbre{ text-shadow:0 1px 0 hsl(174,5%,80%), 0 2px 0 hsl(174,5%,75%), 0 3px 0 hsl(174,5%,70%), 0 4px 0 hsl(174,5%,66%), 0 5px 0 hsl(174,5%,64%), 0 6px 0 hsl(174,5%,62%), 0 7px 0 hsl(174,5%,61%), 0 8px 0 hsl(174,5%,60%), 0 0 5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.2), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.3); }

Animation avec GSAP

Pour l'animation nous employons une TimelineMax et la méthode staggerTo pour ajouter la classe superOmbre aux éléments sélectionnés.

var $lesP = $('#conteneurTextes p'); var tl = new TimelineMax({repeat:-1, repeatDelay:1, yoyo:true}); tl.staggerTo($lesP, 0.2, {className:'+=superOmbre', top:'-=10px', ease:Power1.easeIn}, '0.3', 'start');

Le résultat en images !

Le titre

Le sous-titre

Chapeau d'introduction

Liens utiles

Voir le CSS completVoir le JS completSite officiel de GreenSock