Real Shadow, une ombre interactive avec jQuery et CSS3

Real Shadow est un plugin jQuery qui permet de mettre en place des ombres CSS3 qui réagissent à une source de lumière ; source qui peut être positionnée de façon statique ou définie pour qu’elle suive le curseur de la souris. Un script simple et léger !

Un ombrage proche de la réalité

Real Shadow utilise la propriété CSS3 box-shadow qui permet de générer une ombre sur n’importe quel élément HTML. Sans utiliser de plugin jQuery, cette propriété s’exploite très facilement. Il suffit de définir quatre valeurs qui correspondent respectivement au décalage vertical, au décalage horizontal, à la force du dégradé et à la couleur de l’ombre. La propriété s’applique sur la boîte de l’élément, et non sur la bordure. L’ombrage n’affecte donc pas la taille de l’élément HTML.

Alors pourquoi Real Shadow ? Parce qu’il permet de configurer, non pas l’ombre elle-même, mais la source de lumière qui la projette : soit un point fixe, soit le curseur de la souris. Dans le derniers cas, l’ombre est donc animée. Cette touche de réalisme est une façon originale pour enrichir vos webdesign. Attention tout de même, l’utilisation abusive de box-shadow peut rapidement rendre la navigation difficile (cela dépend du navigateur, et dans cet exercice là, Google Chrome est celui qui s’en sort le mieux) ; c’est d’ailleurs le cas sur la page de démonstration du plugin.

Utilisation et paramètres

On commence par inclure jQuery et le plugin Real Shadow.

<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="realshadow.js"></script>

On définit une classe ou un id CSS sur notre élément HTML.

<div class="element"></div>

Puis on termine par un appel jQuery au plugin Real Shadow. Par défaut, c’est-à-dire sans définir aucun paramètre, le plugin définit une source de lumière sur le curseur de la souris.

$(document).ready(function() {
   $('.element').realshadow();
});

Il existe quelques options pour paramétrer Real Shadow, notamment en ce qui concerne la source de lumière. En effet, il est possible de désactiver le suivi de la souris et de définir précisément le point lumineux via des coordonnées (pageX et pageY). Vous pouvez également définir la couleur RGB de l’ombre. Voici un exemple d’utilisation des paramètres :

$(document).ready(function() {
   $(selector).realshadow({
      followMouse: false,  // true by default
      pageX:       x,      // x coordinate of the light source
      pageY:       y       // y coordinate of the light source
      c: {                 // shadow color
         r: 1,             // red   channel for shadow
         g: 1,             // green channel for shadow
         b: 1,             // blue  channel for shadow
      }
   });
});

Real Shadow est donc un plugin jQuery simple qui, en se basant sur une source de lumière, apporte un petit plus à vos webdesign grâce à des effets d’ombrage. Une idée d’amélioration serait la prise en charge des ombres internes CSS3.

Requis : jQuery
Compatibilité : Navigateurs compatibles avec box-shadow
Démonstration : http://indamix.github.com/real-shadow/
Licence : MIT License

Commentaires

  • Blue_shadow360

    Pas mal, mais evidemment sa ne fonctionne pas sur IE malheureusement.