Reflection.js est un script permettant d’ajouter un effet de reflet à une ou plusieurs images d’une page Web.
Pour le faire fonctionner, il suffit de télécharger le script ici, de placer le fichier “reflection.js” dans l’arborescence de votre site (dans un dossier “scripts” par exemple…) et d’insérer la ligne de code suivante entre les balises <head> et </head>

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

Ensuite, en ajoutant class=”reflect rheightxx ropacityxx” à n’importe quelle balise “img” de votre site, l’effet de réflexion lui sera appliqué ( xx représente la hauteur et l’opacité de l’effet en pourcentage ) – Pour les détails, se référer à la documentation liée au script et disponible sur la page du créateur.

Il existe une adaptation de ce script sous forme de pluggin wordpress : c’est le WP Wetfloor, que j’ai utilisé pour présenter les exemples ci-dessous :

oiseau

class="reflect rheight100 ropacity25"

class="reflect rheight25 ropacity100"

class="reflect rheight25 ropacity100"

Reflection.js fonctionne avec les principaux formats d’image ( jpeg, gif, png ) et utilise les niveaux de transparence alpha (ce qui suppose que votre navigateur sache les interprêter).

Poster un commentaire

Subscribe without commenting