Accueil > javascript > reflets-sur-images

{ Reflection.js : ajouter des reflets aux images }

Introduction

Donner un bel effet sur ses images réside également dans ce genre d'effet ! Plusieurs paramètres peuvent être réglés dans cet effet de réfléction : le dégradé, l'opacité ainsi que la taille du reflet. Script qui en vaut le détour et en plus super légèr (moins de 5Ko !). Savourez !

Reflets images Javascript Reflets images Javascript

Téléchargement de l'archive

telecharger

Intégration du script

Dans cet archive que vous venez de télécharger se trouve plusieurs fichiers. Un seul nous intéresse, le fichier 'reflection.js'. Comme d'habitude nous allons l'appeler dans l'entête de notre page.

<script type="text/javascript" src="reflection.js"></script>

Appliquer l'effet

Maintenant que le script est appelé en haut de la page, il ne nous reste plus qu'à appliquer l'effet sur les images en questions ! Pour ce faire, rien de plus simple ! Ajouter la classe

<h1><img src="reflection.png" class="reflect" alt="reflection.js" style="float:left;" /></h1>

Voilà vous avez maintenant un bel effet de reflection sur vos images comportants la classe 'reflect' ! Joli non ? Pour paramètrer la taille et l'opacité du reflet, rendez-vous dans le fichier reflection.js pour modifier les valeurs suivantes (lignes 27 à 29) :

var Reflection = {
defaultHeight : 0.5,
defaultOpacity: 0.5,