Image partiellement cachée par une bordure

[Langellier]

Bonjour
je réalise en ce moment une page avec une image à découvrir progressivement, en utilisant css (feuille de style) et js (javascript). J'ai réussi partiellement, mais l'image se découvre instantanément et je souhaiterais de la progressivité. Cela devrait être possible en utilisant setTimeout qui permettrait de réduire progressivement les bordures.
Pour comprendre le principe : j'ai mis une image de fond dans un div avec une bordure noire dont la largeur passe à zéro pour découvrir l'image. Voici la page concernée :
http://perso.orange.fr/bernard.langellier/illusions/disruptif.htm
L'apparition progressive de la totalité de l'image est-elle possible avec css et js ? Merci.

 

[p4bl0]

Bonjour
je réalise en ce moment une page avec une image à découvrir progressivement, en utilisant css (feuille de style) et js (javascript). J'ai réussi partiellement, mais l'image se découvre instantanément et je souhaiterais de la progressivité. Cela devrait être possible en utilisant setTimeout qui permettrait de réduire progressivement les bordures.
Pour comprendre le principe : j'ai mis une image de fond dans un div avec une bordure noire dont la largeur passe à zéro pour découvrir l'image. Voici la page concernée :
http://perso.orange.fr/bernard.langellier/illusions/disruptif.htm
L'apparition progressive de la totalité de l'image est-elle possible avec css et js ? Merci.

Oui c'est possible avec un setTimeout et une fonction qui prend en argument la largeur de la bordure.
A chaque appel de la fonction (un setTimeout sur 300 miliseconds par exemple) on lui passe la nouvelle largeur de la bordure.
la fonction met la bordure à cette largeur puis modifie le nombre (par exemple en enlevant 5) puis de rappelle elle même via setTimeout en se passant le nouveau nombre comme argument.

Dans l'exemple que je donne la bordure rétraicirai de 5px toute les 300 miliseconds.

 

[Langellier]

J'ai essayé la méthode de p4bl0, mais étant donné que la bordure est extérieure au div, je dois à la fois demander la réduction de la bordure et l'augmentation du div, sinon le texte qui suit remonte. :D
Aussi j'ai opéré différemment : la réduction des bordures se fait en deux temps grâce à setTimeout :

<input type="button" onclick="setclass('photo','moyen');
setTimeout('setclass(\'photo\',\'grand\')',1000)"
value="Afficher la réponse" />

Voici l'effet :
http://perso.orange.fr/bernard.langellier/illusions/mon-oeil.htm

Si quelqu'un a mieux....

 

[obi wan]

es-tu refractaire à Flash ?

Parce que là je veux bien, c'est beau la prouesse technique, mais en 10 lignes de Flash c'est bouclé, et cross-navigateur... :siffle:

 

[Langellier]

es-tu refractaire à Flash ?
Parce que là je veux bien, c'est beau la prouesse technique, mais en 10 lignes de Flash c'est bouclé, et cross-navigateur... :siffle:

Je n'ai qu'une version ancienne de Flash (5 pour mac OS 9). J'ai réalisé quelques animations Flash, mais je suis peu habitué à la programmation ActionScript.
Effectivement, je voulais éviter Flash... parce que javascript et css c'est gratuit :p ;) et sans plug-in...
Ceci dit je n'ai jamais essayé avec Flash et suis prêt à accepter qqs conseils pour le faire.:zen:

 

[p4bl0]

Je n'ai qu'une version ancienne de Flash (5 pour mac OS 9). J'ai réalisé quelques animations Flash, mais je suis peu habitué à la programmation ActionScript.
Effectivement, je voulais éviter Flash... parce que javascript et css c'est gratuit :p ;) et sans plug-in...
Ceci dit je n'ai jamais essayé avec Flash et suis prêt à accepter qqs conseils pour le faire.:zen:

Je pense que si un de vous se lance dans la créations d'une anim flash qui prend comme argument une image et sa taille et qui fait ça, ça pourra intéresser pas mal de monde.
Donc le mettre à disposition de tout le monde ferait un peut de pub à celui qui le fait (obi wan, même résultat qu'avec les applis AIR :)).

 

[obi wan]

Je pense que si un de vous se lance dans la créations d'une anim flash qui prend comme argument une image et sa taille et qui fait ça, ça pourra intéresser pas mal de monde.

hihi :D oui je vais faire ça y'en a pas pour des plombes... la question que je me posait surtout, c'est de savoir si les boutons qui contrôlent tout ça doivent être dans le Flash ou si ils doivent contrôler le flash par javascript. Peu importe ça revient un peu au même et ce sera pas dur à modifier.

Donc le mettre à disposition de tout le monde ferait un peut de pub à celui qui le fait (obi wan, même résultat qu'avec les applis AIR :)).

Hehe :) le petit site/blog pour poster tout ça derrière manque encore (en cours d'élaboration), mais je mettrai un .zip et des instructions correctes sur le thread.

Langellier, en ce qui concerne ta peur du Flash pas gratuit, t'inquiètes pas c'est ma spécialité ;) Le flash gratuit est tout à fait possible.

 

[obi wan]

Bon ben du coup j'ai un peu mieux regardé la page et l'effet en question.

Je me dis que ce serait vachement mieux avec une glissière qui contrôle l'ouverture du 'diaphragme' plutôt qu'un simple bouton... Un peu comme une barre de scroll mais qui contrôlerait le niveau d'ouverture du masque.

 

[obi wan]

Un truc un peu comme ça... ça t'irait... ? (bon c'est fait un peu à l'arrach pour que tu voies le principe).
Je peux te le faire bien paramétrable, ça fera même je pense des sources commentées assez intéressantes pour les amateurs de Flash.

 

[Langellier]

Un truc un peu comme ça... ça t'irait... ? (bon c'est fait un peu à l'arrach pour que tu voies le principe).
Je peux te le faire bien paramétrable, ça fera même je pense des sources commentées assez intéressantes pour les amateurs de Flash.

C'est super
Les dimensions de départ pourraient éventuellement être un peu plus petites. Le but est qu'on ne voit pas que ce sont des zèbres pour créer la surprise.
Il me restera à me familiariser avec la programmation flash.....

 

[obi wan]

Ok alors si ça te plait on va faire ça.

Tu devrais pas avoir besoin de te familiariser avec la prog flash en théorie, à moins que tu en aies envie et que tu lises les sources (j'ai promis je vais les commenter), mais ce que je vais te faire te permettra de modifier simplement l'image affichée et les coordonnées du rectangle de départ.

Pour toi à l'utilisation, ce sera uniquement ces lignes (plus une déclaration de div) à chaque fois que tu voudras intégrer une image :

<script type="text/javascript">
       // <![CDATA[
    
       var so = new SWFObject("lefichier.swf", "lefichier", "300px", "300px", "8", "#FFFFFF");
       so.write("flashcontent");
    
       so.addParam("urlFichier","monImage.jpg");
       so.addParam("xRectangle","50");
       so.addParam("yRectangle","80");
       so.addParam("largeurRectangle","110");
       so.addParam("hauteurRectangle","30");
	
       // ]]>
</script>

 

[Langellier]

Bonjour, si j'ai bien compris, c'est le javascript (ci-dessus) qui gère l'intégration de la photo et le fichier serait toujours le même et contiendrait la programmation pour le curseur. Ai-je bien compris ?

 

[obi wan]

Exactement monsieur ;)

D'ailleurs c'est fini :p
Tu peux faire clic droit pour voir la source html, tu verras que c'est bien le même swf (9 Ko :p) qui est chargé à chaque fois.

Le nom de l'image est passé en paramètre (jpeg (non progressif), gif (non animé) et png sont supportés), ainsi que les coordonnées & dimensions du plus petit rectangle découvert à la base.
J'ai bien fait attention que l'image ne puisse pas s'afficher en entier au début, le masque est construit par dessus et avant.

Il faut donner une dimension au fichier flash qui doit être de 60 pixels supérieure à la dimension de l'image en hauteur (parce qu'il faut la place pour la glissière en bas), et exactement sa largeur.

La largeur de la glissière s'adapte à la largeur de l'image pour que tout reste bien callé (je suis un peu maniaque :p :D).

Enfin, le "plus petit rectangle découvert" n'a pas besoin d'être centré ou quoi que ce soit, l'ouverture se fait proportionnellement à l'épaisseur de chaque "côté" du cadre noir qui couvre l'image.

Évidemment il faut éviter de mettre le plus petit rectangle découvert dans des coordonnées/dimensions qui le font sortir de l'image, je pense que le résultat serait un peu désastreux (ça planterait pas hein ;), mais par contre tu n'aurais pas l'effet voulu j'en suis quasi-sûr, j'ai pas poussé le vice jusqu'à gérer ça).

Pour caller les coordonnées de tes rectangles, j'ai un petit outil qui te sera utile, je suis en train de peaufiner 2-3 trucs dedans et je le poste.

#edit : j'oubliais... même avec du contenu flash, tu reste valide, parce que tu as un div bien propre de contenu alternatif, et swfObject qui va en javascript le remplacer par le contenu flash. Accessoirement la détection du plugin flash est gérée aussi.

Tu peux télécharger ici le .zip contenant les fichiers utilisés pour l'exemple dont j'ai donné le lien plus haut, ça devrait te suffire pour intégrer tout ça, mais n'hésite pas à poser des questions ici.

Je posterai les sources flash dès que j'aurai bien commenté tout ça, pour ceux que ça intéresse.

 

[Langellier]

Voila, c'est fait , c'est ici :
http://perso.orange.fr/bernard.langellier/illusions/disruptif2.htm
Merci obi wan.