FONDUS

• Publier un nouveau commentaire
• 
  Kardyne  le 30 janvier 2010, à 12h55

  Fonctionne avec Chrome.
• 
  Abrab  le 30 janvier 2010, à 19h12

  Je m'en doutais à vrai dire, vu qu'il utilise le même moteur de rendu que Safari.
  Merci donc pour la confirmation. Je rajoute le petit icone !
• 
  Scscjcnc  le 06 février 2010, à 17h38

  Bonjour, ces scripts sont vraiment parfaits. Cependant, est-il possible de lancer un fondu automatiquement au lancement de la page ?
  Merci
• 
  Abrab  le 06 février 2010, à 17h51

  Salut "Scscjcnc".
  Oui, tu peux lancer un fondu au lancement de la page. Je te propose (parmi d'autres solutions) de placer ça juste avant ta balise de fermeture du body :
  <script type="text/javascript">fade(tes réglages);</script>
• 
  Ayor  le 11 février 2010, à 0h28

  Simpa ton script, ca va me permettre d'alleger ma page du flash superflue, par contre j'aurais aimé faire apparaitre et disparaitre en boucle une image, comment on peux faire?
  Par contre j'ai un petit souci avec l'intégration du code pour ce qui est des o
• 
  Abrab  le 12 février 2010, à 19h30

  Salut Ayor.
  Pour ta première question, c'est un peu long à expliquer dans un commentaire. Et la deuxième, je la comprends pas. Contacte-moi plutôt par email.
• 
  olivier  le 02 mars 2010, à 9h26

  Merci pour ce script J'ai fait un damier avec plusieurs miniatures et un fondu lorsqu'on passe la souris sur l'image. Si on passe rapidement d'une image à l'autre, le fondu précédent s'interrompt là où il en est Qui a une idée? Merci www.olivier-lievin.fr
• 
  Abrab  le 02 mars 2010, à 19h12

  Salut Olivier.
  Je te propose soit de faire des copies de l'objet Fade (pour chaque vignette), soit d'utiliser le module Animate, qui est plus complet (voir les exemples 4 et 5).
  Au besoin : webmaster@webbricks.org
  
• 
  Abrab  le 02 mars 2010, à 19h23

  En jetant un oeil à ta page, je me dis que tu pourrais aussi faire
  onmouseout="setOpacity(document.getElementById('Image1'),0)"
  (Et que 130 images/secondes, c'est beaucoup !)
  
• 
  bidibou  le 15 mars 2010, à 17h22

  petite erreur de majuscule dans ton script sur le "onFinish" sinon ton script est super bien ! merci !
• 
  Abrab  le 16 mars 2010, à 8h09

  Bien vu ! Je te remercie.
  C'est corrigé maintenant.
• 
  Piixel  le 14 juin 2010, à 14h48

  Bonjour Abrab, et merci beaucoup pour ton super script !
  A la base, j'avais cette fonction :
  function stop_action()
  { window.location='<?php echo $url_redirection; ?>'; }
  Elle me permettait de supprimer un bloc en enlevant certains paramètres de l'URL. Pourrais-tu m'indiquer où la placer dans ton script pour changer l'URL une fois le fade out terminé ?
  D'avance merci pour ton aide.
  
  PS: Je suis novice en javascript et en orthographe ossi, lol. ^^
• 
  Abrab  le 16 juin 2010, à 8h54

  @Piixel :
  
  var options = { onFinish : stop_action };
fade(elem, to, from, options);
  
  Je laisse à ta discrétion les valeurs de elem/from/to.
• 
  Piixel  le 21 juin 2010, à 9h52

  Avant tout merci pour ta réponse Abrab.
  J'ai ajouter l'option onFinish mais la fonction s'exécute après le fade-in et le fad-out. Or j'aimerais que celle-ci ne s'exécute qu'après le fad-out.
• 
  Piixel  le 21 juin 2010, à 9h59

  Ha non, erreur de manip, au temps pour moi. ça marche du tonnerre, désolé. Merci beaucoup Abrab, il est super ton site !
• 
  nami  le 16 juillet 2010, à 15h04

  Bonjour Abrab,
  J'ai un problème de fondu pour l'apparaition de ma page web.
  Ma page contient une animation flash et de textes. Et j'aimerais faire apparaitre tous les elements en fondu au même temps.
  Est-ce qu'il y a un moyen d'appliquer un script de fondu pour tous les éléments de ma page?
  ou je dois appliquer un par un?
  Merci pour ton aide.
• 
  Abrab  le 18 juillet 2010, à 23h34

  Salut.
  Si tu veux vraiment faire un fondu sur tout le contenu de ta page, tu prend le body comme cible :
  fade( document.getElementsByTagName('body')[0], 1);
  
  Sinon, tu peux te servir de mon script seek pour sélectionner facilement les cibles, et faire une boucle. Exemple avec tous les éléments de classe "fadeIn" :
  seek('.fadeIn').each(function(elem){
fade(elem, 1);
});
• 
  Baboulinet  le 09 août 2010, à 15h45

  Tres bien ce petit script, merci !
• 
  Fabien  le 03 octobre 2010, à 18h15

  Super script ! Merci
  
  J'aimerais faire un fade out lorsque je change de page (puis un fade in lors de l'apparition de la page suivante). Est-il possible d'exécuter un script jusqu'au bout avant que la page ne soit quittée ?
• 
  Abrab  le 03 octobre 2010, à 20h07

  J'ai encore jamais eu l'occasion de me pencher là-dessus.
  Mais tu dois pouvoir obtenir quelque chose à partir de l'événement onunload du <body>. Tu auras sans doute besoin d'un preventdefault pour empêcher le changement de page immédiat. Puis, une fois le fondu effectué, il faudra changer de page par javascript (window.location.href="xxx.html").
  Voici une piste. Je te laisse faire ton chemin. Bonne continuation.
• 
  fabien  le 03 octobre 2010, à 21h51

  Super, j'ai réussi à m'en tirer avec ça ! merci
• 
  Alexandre  le 04 octobre 2010, à 22h31

  Merci pour ce superbe script simplisime qui permet de faire des choses superbes !
  Juste une question : quelle option appeler pour demander au script de s'exécuter au bout d'un temps x après chargement de la page (en millisecondes j'imagine !)
  D'avance merci !
• 
  Abrab  le 05 octobre 2010, à 6h25

  Il n'y a pas d'option prévue pour ça. (S'il y avait des options prévues pour tout le script serait autrement plus lourd ;) ) Il faut coder un peu :
  setTimeout(function(){
fade(elem);
},delaiEnMillisecondes);
  
• 
  Alexandre  le 05 octobre 2010, à 8h22

  Merci !
• 
  Pierrot  le 08 octobre 2010, à 0h45

  Bonsoir Abrab,
  
  Tout d'abord, je trouve cette fonction, comme les autres, absolument formidable ! Débutant dans le monde du développement, c'est avec plaisir que j'ai découvert ce que tu pouvais offrir, et je me suis surpris à tout comprendre du premier coup !
  
  Ceci dit, je voudrais résoudre un petit casse-tête, et peut-être pourras-tu m'aider :
  
  J'ai un lien sur une page, qui "onclick" affiche une sorte de popup. Avant de découvrir tes fonctions, je jouais sur le display="none"/"block", et était par défaut sur "none" en ouvrant la page.
  
  Mon problème, c'est que je voudrais appliquer le fondu à cette popup, qui serait donc, par défaut, invisible. Vois-tu ce que je veux dire ? Et si oui, peux-tu m'aider ?
  
  D'avance merci !
• 
  Abrab  le 08 octobre 2010, à 7h12

  Salut Pierrot.
  Commencer en display:none c'est ce que je ferais aussi. Mais il faudrait le faire en agissant sur l'attribut style de ta popup, pour que fade puisse le lire : style="display:none". (Les puristes diraient qu'il faut le faire en javascript.)
  Ensuite, tu mets juste fade(this) sur le onclick.
  Ça devrait suffire.
• 
  Pierrot  le 08 octobre 2010, à 9h16

  Bonjour Abrab et merci, j'ai fini par avoir ce que je voulais ! Bon boulot ;p
• 
  shlavos  le 24 octobre 2010, à 3h22

  Bonjour Abrab,
  J'utilise ton script sur un div dont le background-image est un png déjà partiellement transparent. Seulement comme tu le sais peut-être, lorsque tu modifies la propriété filter d'un div sur IE8 dont le background est un png, le canal alpha du png n'est plus pris en compte.
  J'obtient donc un fond opaque après le fade :(
  Sais-tu comment pallier ce problème ?
• 
  cedycam  le 02 novembre 2010, à 11h53

  bonjour
  merci à toi pour cette fonction
  je l'essaye tout à l'heure
• 
  Niok  le 14 décembre 2010, à 14h31

  Hello Hello !
  J'ai un petit problème que je ne vois pas comment forcément résoudre ! En fait je met qu'en Onmouseover ça fait disparaitre l'élement et Onrollout ça le fait reapparaitre. Donc pas de problème cela fonction cependant j'utilise Fade à chaque coup sur ce type de lien et vu qu'ils sont assez rapprochés si on va vite sur un autre lien, la transparence de l'image précédente n'a pas le temps de se faire. Je pense c'est parcqu'ils appellent tous la fonction fade qui marche que sur un élément mais je n'ai aucune idée de comment résoudre le pb !
  Si tu as une idée je suis preneur :)
• 
  Abrab  le 15 décembre 2010, à 8h26

  Oui Niok, ton analyse est juste. Pour remédier à ton problème, je te suggère de faire une copie de fade pour chacun de tes éléments :
  var fade1, fade2, fade3, fadex;
fade1 = fade2 = fade3 = fadex = fade;
• 
  Skywalker  le 16 février 2011, à 20h56

  Bonjour, c'est sur c'est un très bon script. Mais je tiens à signaler deux erreur, dans la fonction next il faut remplacer 1000 par this.duration et surtout les 3 égal à la fin ( this.frameNb===this.totalFrames) il doit en avoir que 2 (sinon c'est un opérateur d'identité et non pas de valeur) . En tous cas ça m'a bien aidé, merci et bonne continuation.
• 
  Skywalker  le 17 février 2011, à 18h21

  oups je viens d'y repenser et non il n'y a pas d'erreur pour la valeur 1000 à changer ! surtout laisser comme tel :-)
• 
  anonyme  le 20 février 2011, à 19h40

  ... pensez au débutant que vous avez été. Un exemple concret svp.
  Ou et comment sur la page html , précisément ?
• 
  Guillaume  le 13 mars 2011, à 0h58

  Bonjour Abrab,
  
  Voila en fait je dispose d'un script d'infobulle et j'aimerais qui tu puisse y intégrer ton "Fade" !
  
  voila le code :
  _______________
  
  
  
  
  
  var xOffset=6
  var yOffset=15
  
  var affiche = false; // La variable i nous dit si le bloc est visible ou non
  var w3c=document.getElementById && !document.all;
  var ie=document.all;
  
  if (ie||w3c) {
  var laBulle
  }
  
  function ietruebody(){ // retourne le bon corps...
  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  }
  
  
  function deplacer(e) {
  if(affiche){
  var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
  var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;
  
  var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
  var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
  
  var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
  var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;
  
  var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000
  
  // modifier la largeur de l'objet s'il est trop grand...
  if(laBulle.offsetWidth > winwidth / 3){
  laBulle.style.width = winwidth / 3
  }
  
  // si la largeur horizontale n'est pas assez grande pour l'info bulle
  if(rightedge < laBulle.offsetWidth){
  // bouge la position horizontale de sa largeur à gauche
  } else {
  if(curX < leftedge){
  laBulle.style.left = "5px"
  } else{
  // la position horizontale de la souris
  laBulle.style.left = curX + xOffset + "px"
  }
  }
  
  // même chose avec la verticale
  if(bottomedge < laBulle.offsetHeight){
  laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
  } else {
  laBulle.style.top = curY + yOffset + "px"
  }
  
  
  }
  }
  function montre(text) {
  if (w3c||ie){
  laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : ""
  laBulle.innerHTML = text; // fixe le texte dans l'infobulle
  laBulle.style.visibility = "visible"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
  affiche = true;
  
  }
  }
  
  
  
  function cache() {
  if (w3c||ie){
  affiche = false
  laBulle.style.visibility="hidden" // avoid the IE6 cache optimisation with hidden blocks
  laBulle.style.top = '-1000px'
  laBulle.style.backgroundColor = ''
  laBulle.style.width = ''
  }
  }
  
  
  document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
  
  
  
  __________________
  
  
  Si tu pouvais le rendre entièrement refait pour qu'il y ai la fonction "fade"
  Je sais bien que sa doit te demander beaucoup de boulot mais cela m'arrangerais bien !
  
  Voilà merci d'avance !
• 
  Caro  le 01 avril 2011, à 12h17

  Bonjour !
  
  Alors voilà moi mon souci c'est que j'ai déjà un script de permutation,
  entre ma grande div et mes miniatures ( quand on passe la souris sur les miniatures elles s'affichent en grand dans la grande div à côté),
  
  et j'aimerais qu'elles apparaissent en fondu dans la grande div !
  
  Alors j'ai bien essayé d'utiliser ton script mais sans succès :(
  
  voilà mon script :
  
      <script>
           function permut(url)
           {
           document.getElementById('image_a_changer').src=url;
           }
      </script>
  
  et dans mon body ça donne ça:
  
  <div id="galerie">
  
  <div class="grande">
  <p><img src="img/conceptG/Ambiguity noir sans pierres.jpg" width="375" height="565" id="image_a_changer"/></p>
  
  </div>
  
  <div class="vignette">
  <p><img src="img/conceptG/Ambiguity noir sans pierres.jpg" width="114" height="172" OnMouseOver="permut('img/conceptG/Ambiguity noir sans pierres.jpg')"/></p>
  </div>
  
  Comment je peux faire ?
  
  Merci.
  
• 
  Loulou  le 02 juin 2011, à 22h39

  J'adore ton script, super simple à mettre en place, marche en 2 secondes...
  Juste bravo et merci :D
• 
  jikoo  le 24 juin 2011, à 20h31

  magnifique ! merci pour le partage.
• 
  Smocrate  le 29 juin 2011, à 23h06

  ça ne fonctionne pas avec deux instances quand on passe de l'un à l'autre d'un coup.
  code :
  <div id="page">
      <div id="index_partie_gauche">
           index_partie_gauche
           <div id="content_partie_gauche">
                texte
           </div>
      </div>
      <div id="index_partie_droite">
           index_partie_droite
           <div id="content_partie_droite">
                texte
           </div>
      </div>
  </div>
  
  <script type="text/javascript">
      var min=0.4;
      var max=1;
      document.getElementById("index_partie_gauche").onmouseover = function(){ fade( this, max, min, {duration : 1000} ); };
      document.getElementById("index_partie_gauche").onmouseout = function(){ fade( this, min, max, {duration : 1000} ); };
      document.getElementById("index_partie_droite").onmouseover = function(){ fade( this, max, min, {duration : 1000} ); };
      document.getElementById("index_partie_droite").onmouseout = function(){ fade( this, min, max, {duration : 1000} ); };
  </script>
  
  
  CSS :
  html { height: 100%; }
  body { height: 100%;     line-height: 1; }
  #page { background-color: none; height: 100%; color: WHITE; }
  #index_partie_gauche { position: relative; height: 100%; background-color: BLUE; width:50%; float: left; text-align:center; opacity:0.4; filter:alpha(opacity=40); }
  #index_partie_droite { position: relative; height: 100%; background-color: GREEN; width:50%; float: left; text-align:center; opacity:0.4; filter:alpha(opacity=40); }
  
  
• 
  Jeff  le 10 juillet 2011, à 11h42

  Bonjour, c'est exactement ce que je cherchais, mais les possibilités excitent ma curiosité. Je cherche maintenant à insérer une image à la place du message de fin :
      onFinish : function(){alert('fini!');} // fonction appelée à la fin de l'animation : afficher 'fini!'
  
  J'ai beau insérer du code, il n'est pas interpréter. Quelqu'un aurait une solution ? merci
• 
  Pierrot  le 10 juillet 2011, à 11h46

  Bonjour Jeff, pourrais-tu nous donner ton code afin qui nous puissions juger de ce qui ne va pas ? (http://pastebin.com/)
• 
  Jeff  le 10 juillet 2011, à 13h36

  onFinish : function(){alert('<img src="image-actu1.png" width="720" height="280" />');}
  
  Bonjour Pierrot, voilà.
  Merci de ton aide
• 
  Pierrot  le 10 juillet 2011, à 13h38

  C'est une image que tu veux donc faire apparaître dans une fenêtre alerte ?
  
  Je vais me pencher dessus, mais je suis pas optimiste, là à froid :D
  
  Ajoute moi à msn, si tu veux, ce sera plus pratique : pierre.gouchet@hotmail.fr
• 
  Pierrot  le 10 juillet 2011, à 13h58

  Bon bah je confirme que je n'y arrive pas. Ce qui ne veut pas dire que ce n'est pas possible , mais ça dépasse mon domaine de connaissance (qui n'est, sans me vanter, pas mince !).
  
  Ceci dit, fais moi savoir si tu trouves une solution à ce problème, ça m'intéresse !
• 
  Jeff  le 10 juillet 2011, à 14h34

  Ok merci, mais je pense que c'est une plutôt une limitation des possibilités offertes par les fenêtres d'alerte du navigateur... mais pas complétement sûr... peut-être que finalement il faudrait lancer l'ouverture d'une fenêtre type lightbox.
  
• 
  Pierrot  le 10 juillet 2011, à 14h58

  C'est précisement ce à quoi j'étais en train de penser. Sauf erreur, tu trouveras des scripts de lightbox ici : http://webbricks.org/bricks/msg/
• 
  Jeff  le 10 juillet 2011, à 16h43

  Merci Pierrot, j'ai regardé et j'ai laissé un message.
  
  Je me demande aussi comment indiquer un délais à l'ouverture du message.
      onFinish : function(){alert('fini!');}
  
  Au lieu de "onFinish", je voudrai que l'action se déroule après 5 secondes.
  Comment puis-je faire ?
• 
  Pierrot  le 10 juillet 2011, à 18h36

  Crée toi une fonction factice type :
  function fini(){
  alert('Fini !');
  }
  
  Puis :
  onFinish : function(){
  setTimeout(fini, 2000);
  }
  
  Sachant que 2000 correspond au délai en millisecondes.
  (J'viens de tester avec un click au lieu d'un onFinish, mais le principe reste le même !)
• 
  Jeff  le 10 juillet 2011, à 19h33

  Mouai.
  
  Actuellement j'ai ça <
  
  <script type="text/javascript">
      fade(document.getElementById('body'), 1, 0,
      {
           duration : 1000,
           frameRate : 12,
           onFinish : function(){alert('je suis content');}
      }
  );</script>
  
  Je tente donc d'insérer ce que tu me dis mais ça ne fonctionne pas :
  
  <script type="text/javascript">
      fade(document.getElementById('body'), 1, 0,
      {
           duration : 1000,
           frameRate : 12,
           onFinish : function fini(){alert('Fini !');
      }
  onFinish : function(){
  setTimeout(fini, 2000);
  }
  );</script>
  
  Et pour toi ? ça fonctionne ?
  
  Merci encore.
• 
  Pierrot  le 10 juillet 2011, à 19h58

  En fait, en relisant les explications d'Agorab sur son script, je réalise que mes conseils sont complètement décalés.
  
  Voici mon code :
  fade(document.getElementById('image'),0.1,1,
  {
  duration : 2000,
  frameRate : 48,
  onFinish : function(){alert('fini!');}
  }
  );
  
  Enfin "mon" code, non, c'est celui d'Agorab, présenté en haut ^^
  Mais il fonctionne parfaitement. Du coup, je comprends plus ce qui ne fonctionnait plus chez toi ? Tu veux que ton message apparaisse au moment où le fondu se termine, ou tu souhaites y rajouter un délai supplémentaire ?
  
  Si tu le veux au moment où le fondu se termine, le code ci-dessus suffit, sinon voici le code :
  fade(
  document.getElementById('image'),
  0.1,
  1,
  {
  duration : 1000,
  frameRate : 50,
  onFinish : function(){setTimeout(fini,2000);}
  }
  );
                
  function fini(){
  alert('Fini !');
  }
• 
  Jeff  le 10 juillet 2011, à 21h13

  Je dis un grand merci. Ca peut me prendre la journée un truc comme ça !
  C'est nikel. T'assures pas le service sur l'autre sujet par hasard !!!
  
  
• 
  Pierrot  le 10 juillet 2011, à 23h14

  Lequel ? ^^
• 
  Jeff  le 10 juillet 2011, à 23h44

  Celui que tu m'as indiqué !
  http://webbricks.org/bricks/msg/
• 
  Pierrot  le 11 juillet 2011, à 0h03

  Le plus simple serait soit que nous continuions nos conversations par mail, soit par msn !
  Par mail => pierre.gouchet@gmail.com
  Par msn => pierre.gouchet@hotmail.fr
• 
  Mike  le 04 septembre 2011, à 0h18

  Merci pour ce super script, mais est t'il possible de faire une sorte de réinitialisation du fade-in genre : setOpacity(document.getElementById(idImage),0);
  mais avec une opacité qui ne serait pas de zéro ? parce que si je change l'opacité de setOpacity alors mon fade-in ne va plus :(
• 
  VIPDEV  le 29 octobre 2011, à 3h17

  ce serait pour savoir si il est possible de l'adapté pour les menu déroulant en CSS ?
  En gros, j'ai un menu, mais... quand je passe la souris dessus, ça s'affiche brutallement, j'aimerai que ça s'affiche en fondu comme cela.
• 
  HoOnNeR  le 28 novembre 2011, à 22h22

  Bonjour!!
  Je voudrais savoir, s'il était possible que le fondu se réalise non en cliquant mais en passant juste la souris sur le lien par exemple (sur un fond ou une image déjà pré existante! Et que lorsqu'on retire le pointeur du lien l'ancienne image ou fond réapparaît!
• Navré, le formulaire de commentaires est temporairement indisponible.

hébergement : ovh.com | crédits | page générée en 0.333 secondes | admin