Un effet reflet 3D sur vos images via javascript

Bonjour! Si vous êtes nouveau ici, peut être seriez-vous intéressé par une visite guidée ou vous abonner au flux RSS du blog afin d'être tenu à jour des nouvelles publications. Dans tous les cas merci de votre visite !

Il vous suffira d’ajouter ces petits bouts de code sur vos sites pour obtenir un zouli effet sur vos images. L’implémentation est simple, n’implique ni Flash ni CSS, est compatible avec Firefox, Internet Explorer et Opera.

Il a aussi cet exemple sur fond noir.

Comment installer le script ?

Tout d’abord il vous faudra installer les scripts prototype, script.aculo.us, builder et reflection dans votre code html (entre les balises <head> et </head> de votre en-tête) :

<script src= »javascript/prototype.js » type= »text/javascript »></script>
<script src= »javascript/scriptaculous.js?load=builder » type= »text/javascript »></script>
<script src= »javascript/reflection.js » type= »text/javascript »></script>

Note : 4 scripts sont fournit dans l’archive et vous devez tous les placer sur votre serveur. Ensuite il vous faudra créer un élément <div> dans lequel l’image va apparaitre :

<div id = « blabla »>
<img src= »image.jpg » />
</div>

Et la dernière étape est de créer une instance pour la class reflixion3d :

<script type= »text/javascript »>
new Reflect3D(‘blabla’);
</script>

(le premier paramètre est celui de l’ID de la <div> créée). Cette instance sera à placer dans l’en-tête si possible (toujours entre <head> et </head>) mais absolument après les 3 lignes de la première étape.

Le système vous permet de créer plusieurs réflexions sur une même page (il faudra juste répéter la manipulation pour chaque image sur laquelle appliquer le reflet).

Voilà voilà

Merci à k-ny pour la relecture ;)

5 commentairesPARTICIPEZ !

k-ny le 8 novembre 2007 @ 13:38

Ouaaaahh, même si ce n’était pas utile, merci du backlink ^^

Allez, moi je dis: encore d’autres tuto ! :p
Arkan le 8 novembre 2007 @ 14:58

Pour les autres tutos je sais pas trop, j’en ai d’autres en stock mais pour quelqu’un qui ne s’entend pas bien avec la prog comme moi c’est pas très simple à faire.

Celui-çi était tout petit et j’ai déjà ramé pour être certain de pas dire trop de bêtises ;)

Le but c’est avant tout qu’ils soient utiles aux gens, donc avant tout il faut qu’ils soient compréhensibles. P-e que j’en referai d’autres mais une chose est sur c’est que ce ne sera pas régulier (trop dur ^^)

Ps: tient tu t’es brûlé par la même occasion :D
jbj le 9 novembre 2007 @ 10:34

Très sympa comme effet. Scriptaculous n’en finit pas de me surprendre :) Après, reste le problème que JS n’est pas necessairement activé sur toutes les machines même si personellement j’ai un peu de mal à comprendre coment on peut surfer sans en 2007…
En tout cas, merci pour ton article!
B•øw le 24 janvier 2010 @ 20:37

J’ai une petite question…. Je ne connais absolument rien en javascript mais j’aime beaucoup cet effet…. Est-ce qu’il faut mettre :

ou
B•øw le 24 janvier 2010 @ 20:38

[code][/code]
Ou
[code][/code]