Image partiellement cachée par une bordure

Langellier

Membre émérite
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

Membre d’élite
Club MacG
12 Juillet 2004
4 772
425
31
$PWD
p4bl0.net
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

Membre émérite
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 :
Bloc de code:
<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

Membre d’élite
Club MacG
19 Mars 2003
1 628
86
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

Membre émérite
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

Membre d’élite
Club MacG
12 Juillet 2004
4 772
425
31
$PWD
p4bl0.net
Je n'ai qu'une version ancienne de Flash (5 pour mac OS 9). J'ai r&#233;alis&#233; quelques animations Flash, mais je suis peu habitu&#233; &#224; la programmation ActionScript.
Effectivement, je voulais &#233;viter Flash... parce que javascript et css c'est gratuit :p ;) et sans plug-in...
Ceci dit je n'ai jamais essay&#233; avec Flash et suis pr&#234;t &#224; accepter qqs conseils pour le faire.:zen:
Je pense que si un de vous se lance dans la cr&#233;ations d'une anim flash qui prend comme argument une image et sa taille et qui fait &#231;a, &#231;a pourra int&#233;resser pas mal de monde.
Donc le mettre &#224; disposition de tout le monde ferait un peut de pub &#224; celui qui le fait (obi wan, m&#234;me r&#233;sultat qu'avec les applis AIR :)).
 

obi wan

Membre d’élite
Club MacG
19 Mars 2003
1 628
86
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

Membre d’élite
Club MacG
19 Mars 2003
1 628
86
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

Membre d’élite
Club MacG
19 Mars 2003
1 628
86
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.
 
  • J’aime
Réactions: p4bl0

Langellier

Membre émérite
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 :up:
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

Membre d’élite
Club MacG
19 Mars 2003
1 628
86
Ok alors si &#231;a te plait on va faire &#231;a.

Tu devrais pas avoir besoin de te familiariser avec la prog flash en th&#233;orie, &#224; 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&#233;e et les coordonn&#233;es du rectangle de d&#233;part.

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

Bloc de code:
<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

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

obi wan

Membre d’élite
Club MacG
19 Mars 2003
1 628
86
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&#234;me swf (9 Ko :p) qui est charg&#233; &#224; chaque fois.

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

Il faut donner une dimension au fichier flash qui doit &#234;tre de 60 pixels sup&#233;rieure &#224; la dimension de l'image en hauteur (parce qu'il faut la place pour la glissi&#232;re en bas), et exactement sa largeur.

La largeur de la glissi&#232;re s'adapte &#224; la largeur de l'image pour que tout reste bien call&#233; (je suis un peu maniaque :p :D).

Enfin, le "plus petit rectangle d&#233;couvert" n'a pas besoin d'&#234;tre centr&#233; ou quoi que ce soit, l'ouverture se fait proportionnellement &#224; l'&#233;paisseur de chaque "c&#244;t&#233;" du cadre noir qui couvre l'image.

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

Pour caller les coordonn&#233;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&#234;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&#233;tection du plugin flash est g&#233;r&#233;e aussi.

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

Je posterai les sources flash d&#232;s que j'aurai bien comment&#233; tout &#231;a, pour ceux que &#231;a int&#233;resse.
 
  • J’aime
Réactions: Langellier

Langellier

Membre émérite