FONDU ENCHAINER ENTRE PLUSIEURS IMAGES

Information sur la source

Catégorie :Effets Classé sous : fondu, défilement, effet, transparent, galerie Niveau : Débutant Date de création : 31/07/2006 Date de mise à jour : 17/01/2007 16:14:47 Vu / téléchargé: 17 843 / 2 575

Auteur : ryosama

Ecrire un message privé

Note :

8,50 / 10

Commentaire sur cette source (24)

Ajouter un commentaire et/ou une note

Description

Ce code JS vous permettra de faire défiler plusieurs images contenu dans un répertoire les une après les autres via un fondu.
- Il est compatible IE et Mozilla
- Fonctionne avec GIF, JPEG, PNG
- Entièrement paramètrable (fluidité, temps de pause, nombres d'images, ...)
- Très simple a mettre en oeuvre

Démo visible ici : http://www.3dxmakina.fr/demo/fondu/fondu.html

Source

<HTML>
<HEAD>
<TITLE>Fondu de plusieurs images</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
// mettre un minimum de 4 images !!!
var coef = 0.05 ; // avancement de l'opacité
var temps = 50 ; // temps entre chaque changement d'opacité
var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
var nombre_image = 5 ; // nombre d'images a faire bouger
var prefix_image = 'gfx/'; // chemin + prefix du nom des images
var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images
// pas touche
var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
var img1 = null;
var img2 = null ;
var sens = 1;
var tabImg; // tab contenant les images
function prechargerImg(){
tabImg = new Array(nombre_image);
for (i=0; i<=nombre_image -1; i++){
tabImg[i]=new Image();
tabImg[i].src = prefix_image+(i+1)+suffix_image;
}
}
function init()
{
img1 = document.getElementById("defilement1") ;
img2 = document.getElementById("defilement2") ;
prechargerImg();
change_opacity();
}
function change_opacity()
{
var opacity1 = 0 ;
var opacity2 = 0 ;
if (isIE) // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else // for mozilla
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}
if (sens)
{ if (isIE) // for IE
{ img1.filters.alpha.opacity = opacity1 + coef * 100;
img2.filters.alpha.opacity = opacity2 - coef * 100;
}
else // for Mozilla
{ img1.style.MozOpacity = opacity1 + coef;
img2.style.MozOpacity = opacity2 - coef;
}
}
else
{
if (isIE) // for IE
{ img1.filters.alpha.opacity = opacity1 - coef * 100;
img2.filters.alpha.opacity = opacity2 + coef * 100;
}
else // for Mozilla
{ img1.style.MozOpacity = opacity1 - coef;
img2.style.MozOpacity = opacity2 + coef;
}
}
if (isIE) // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else // for mozilla
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}
// on fait varié le sens d'opacité du bazar
if (opacity2 <= 0)
{ img2.src=tabImg[indice++].src;
sens = 0;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
else if (opacity1 <= 0)
{ img1.src=tabImg[indice++].src;
sens = 1;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec
}
-->
</SCRIPT>
</HEAD>
<BODY onload="init();">
<img id="defilement1" src="gfx/1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);margin-bottom:10px;">
<img id="defilement2" src="gfx/2.jpg" style="-moz-opacity:1;filter:alpha(opacity=100);position:relative;top:-10px;left:-174px;">
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Fondu de plusieurs images</TITLE>

<!-- On déclare le code source -->
<SCRIPT LANGUAGE="JavaScript">
<!--

// mettre un minimum de 4 images !!!

var coef = 0.05 ; // avancement de l'opacité
var temps = 50 ; // temps entre chaque changement d'opacité
var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
var nombre_image = 5 ; // nombre d'images a faire bouger
var prefix_image = 'gfx/'; // chemin + prefix du nom des images
var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images

// pas touche
var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
var img1 = null;
var img2 = null ;
var sens = 1;
var tabImg;  // tab contenant les images

function prechargerImg(){
  tabImg = new Array(nombre_image);
  for (i=0; i<=nombre_image -1; i++){
	tabImg[i]=new Image();
	tabImg[i].src = prefix_image+(i+1)+suffix_image;
  }
}

function init()
{
	img1 = document.getElementById("defilement1") ;
	img2 = document.getElementById("defilement2") ;

	prechargerImg();
	change_opacity();
}

function change_opacity()
{	
	var opacity1 = 0 ;
	var opacity2 = 0 ;
	if (isIE)  // for IE
	{	opacity1 = parseFloat(img1.filters.alpha.opacity);
		opacity2 = parseFloat(img2.filters.alpha.opacity);
	}
	else       // for mozilla
	{	opacity1 = parseFloat(img1.style.MozOpacity);
		opacity2 = parseFloat(img2.style.MozOpacity);
	}

	if (sens)
	{	if (isIE)  // for IE
		{	img1.filters.alpha.opacity = opacity1 + coef * 100;
			img2.filters.alpha.opacity = opacity2 - coef * 100;
		}
		else // for Mozilla
		{	img1.style.MozOpacity = opacity1 + coef;
			img2.style.MozOpacity = opacity2 - coef;
		}
	}
	else
	{
		if (isIE)  // for IE
		{	img1.filters.alpha.opacity = opacity1 - coef * 100;
			img2.filters.alpha.opacity = opacity2 + coef * 100;
		}
		else // for Mozilla
		{	img1.style.MozOpacity = opacity1 - coef;
			img2.style.MozOpacity = opacity2 + coef;
		}
	}

	if (isIE)  // for IE
	{	opacity1 = parseFloat(img1.filters.alpha.opacity);
		opacity2 = parseFloat(img2.filters.alpha.opacity);
	}
	else       // for mozilla
	{	opacity1 = parseFloat(img1.style.MozOpacity);
		opacity2 = parseFloat(img2.style.MozOpacity);
	}

	// on fait varié le sens d'opacité du bazar
	if (opacity2  <= 0)
	{	img2.src=tabImg[indice++].src;
		sens = 0;
		if (indice == (tabImg.length)) indice=0;
		window.setTimeout("change_opacity()",temps_pause) ; // attente
		return 0;
	}
	else if (opacity1 <= 0)
	{	img1.src=tabImg[indice++].src;
		sens = 1;
		if (indice == (tabImg.length)) indice=0;
		window.setTimeout("change_opacity()",temps_pause) ; // attente
		return 0;
	}
	window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec
}
-->
</SCRIPT>
</HEAD>

<!-- On charge le script et les images -->
<BODY onload="init();">

<!-- Premiere image id=defilement1 -->
<img id="defilement1" src="gfx/1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);margin-bottom:10px;">

<!-- Deuxieme image id=defilement2    /!\ positionnée RELATIVEMENT par rapport à la 1ère pour qu'elles se superposent /!\ -->
<img id="defilement2" src="gfx/2.jpg" style="-moz-opacity:1;filter:alpha(opacity=100);position:relative;top:-10px;left:-174px;">

</BODY>
</HTML>

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

fondu.js 2 860 octets
index.html 695 octets
gfx
- 1.jpg 8 520 octets
- 2.jpg 4 098 octets
- 3.jpg 4 596 octets
- 4.jpg 3 846 octets
- 5.jpg 5 053 octets

Télécharger le zip

Historique

17 janvier 2007 16:14:47 :: Demo mise en ligne

Sources du même auteur

Toutes les sources de ryosama

Sources de la même categorie

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

Commentaires

Commentaire de stef1589 le 01/08/2006 10:15:23

merci c est ce que je cherchais. mais pourquoi faut mettre au moins 4 images ? ca pourrait pas marcher avec moins ?
Commentaire de ryosama le 01/08/2006 10:51:17

J'ai mis 4 images minimum car il y a un effet de bords lorsque l'on en met moins. Au premier passage les images ne "tournent" pas dans le bon sens, ca redevient ensuite normal. Avec 4 c'est nikel. C'est pas très grave mais je n'avais pas le courage de changer ça. Le site pour lequel j'ai developpé ce bout de code avait 5 images.
Commentaire de jjdagadir le 01/08/2006 22:34:01

C'est propre, simple et çà marche bien, merci et bravo
Kenavo
Commentaire de atiladiffusion le 05/09/2006 15:02:33

salu, votre script fais ce que je voulai graphiquement, par contre il me prend l'equivalent de deux images dans mon tableau, alors que j'aimerai n'en avoir qu'une...
Commentaire de ryosama le 05/09/2006 15:07:05

Je ne comprend pas votre commentaire :
"il me prend l'equivalent de deux images dans mon tableau, alors que j'aimerai n'en avoir qu'une"

Pouvez vous m'en dire plus ?
Commentaire de atiladiffusion le 05/09/2006 15:09:53

en fait, je voulez mettre cette fondue dans le header en remplacement d'un fichier flash.
J'ai créé 5 images avec different textes dessus.
Et j'ai fais un include du ce fichier dans le header.
et au lieu de prendre la place d'une image, la case fait la hauteur de deux. comment faire?
Commentaire de atiladiffusion le 05/09/2006 15:19:26

voila la page appelé dans le header ( les images font 800*80 )

  <HTML>
   <HEAD>
   <TITLE>Fondu de plusieurs images</TITLE>

   
   <SCRIPT LANGUAGE="JavaScript">
   
</SCRIPT>
</HEAD>


<BODY onLoad="init();">


<img id="defilement1" src="http://localhost/sites2006/peel/modeles/images2/test1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);">


<img id="defilement2" src="http://localhost/sites2006/peel/modeles/images2/test2.jpg" style="-moz-opacity:1;filter:alpha(opacity=100);position:relative;top:-80px;">

</BODY>
</HTML>
Commentaire de ryosama le 05/09/2006 15:35:22

Ah je vois votre probleme. Vous avez un blanc sous le fondu de 80px de haut ?
Je n'ai pas réussi à palier ce problème. Le site pour lequel j'ai développé ce fondu n'avait rien sous le fondu donc pas de problème pour le blanc.

La technique pour pallier à ça serait de faire un div contenant tout le texte de votre page (car chez vous c'est un header apparement) et de lui donner le style suivant = position:relative;top:-80px;

Avec un peu de chance, ça devrait marcher.
Commentaire de atiladiffusion le 05/09/2006 15:38:59

je vais essayer des fondues de 40 px de haut pour remedier à ca, mais ca ne laisse pas bcp de place...
peut etre y a til un moyen de faire autrement sans utiliser de flash...

Justement ce ne serait pas possible de ne charger qu'une image au départ, de sorte que l'on puisse avoir tout sur la meme image, cela ne me fait rien d'avoir un temps de latence, il y aura un background derriere.
Commentaire de guinnessboy le 05/09/2006 22:28:38

Bonjour, un super script qui fonctionne (pas qui devrai fonctionner....) Par contre je rencontre effectivement le même souci que 'atiladiffusion'. si tu mets l'animation dans un tableau la colonne fais 2 fois la taille des images. Cela doit venir du positionnement du calque à la base (que l'on replace avec un - x px (x etant la hauteur de l'image) de cefait la hauteur d'un <TD> avec une image de 100 sera de 200. C'est le seul souci. Sinon c'est cool et joli avec des images bien détourées.
Une solution, pas propre (c'est mon habitude mais qui fonctionne). tu crée une page avec juste ton animation et tu la positionne ou tu veux dans ton tableau avec une balise <iframe>. De cette façon tu peux forcer la taille de ton cadre.
Je sais 'C'EST PAS BIEN' mais çà le fait.
Merci pour ce script, @+
Commentaire de guinnessboy le 08/11/2006 13:19:33

Hello, Un souci de fonctionnement sous opéra. Sous tous les autres navigateurs cela fonctionne mais je viens de tester sous opera et l'animation ne se déclenche pas.
Commentaire de ryosama le 08/11/2006 15:04:11

En effet ce script n'a jamais été tester sous Opera car je ne l'ai pas.
Comme précisé dans le descriptif :
- Il est compatible IE et Mozilla
Commentaire de atiladiffusion le 08/11/2006 18:09:05

Il est aussi compatible safari sur mac
Commentaire de atiladiffusion le 08/11/2006 18:09:54

voir sur mon avant dernier post--> code amélioré pour compatibilité safari en plus!
Commentaire de Fix300 le 17/12/2006 22:12:16

Super effet. Moi aussi j'ai le même problème, il prend 2 fois la taille de l'image. J'ai essayé l'iFrame mais ... il ne prend pas du tout. Il charge 2 photos et puis il y a des espaces blancs entre, sur pc apparement ça passe avec les blancs, sur mac ça boucle sur la même image. Pourtant quand j'ouvre l'iFrame, aucun problème tout fonctionne. Si par hasard vous auriez entre temps trouver une solution... Merci
Commentaire de Wedgis le 12/01/2007 19:01:08

Très joli effet :D, par contre j'aimerais l'utiliser autrement, en faite au lieu de changer d'image automatiquement j'aimerais le faire avec 2 boutons (avnt;arrière), je sais à quel endroit le modifier mais par contre je ne sais pas comment exactement... Une âme charitable pourait elle m'aider ?
Merci
Commentaire de funewik le 16/01/2007 17:58:02

Salut,

Merci beaucoup pour cette source qui fonctionne très bien. En ce qui me concerne je l'ai modifiée, parce que j'avais besoin de faire des fondus sur des div avec textes et des images à l'intérieur, ce que j'ai très bien réussi... pour IE et FF.

Mon problème est que ça ne fonctionne pas sur Mac avec Safari. Quelle est la syntaxe pour l'opacité sur Safari?

Atiladiffusion, tu dis avoir réussi à le faire fonctionner sur Safari, peux-tu m'aider stp?

Merci d'avance!

Bye!
Commentaire de blueangel le 25/07/2007 12:01:33

Bonjour,
Trés beau script avec un bel effet, j'ai un petit souci j'ai les 2 images dans un UserControl elles ont une taille 559*323 quand je place ce control dans une table les 2 image sont supperposé mais il y a un espace blanc qui la taille de l'image en dessous.
comment fais t pour supprimer ce blanc?
Merci!!
Commentaire de ryosama le 25/07/2007 16:21:05

Je suis au courant du problème mais je n'ai pas la solution. Sur le site pour lequel j'avais developpé ce petit bout de code ce n'était pas génant donc je ne m'y étais pas penché plus que ça.

La solution de fortune est de remonter tout ce qui se trouve sous l'effet ... pas très propre mais ça marche.
Commentaire de blueangel le 25/07/2007 16:38:22

ok merci je crois que je vais faire ça;)
Commentaire de Mamacx le 29/09/2007 23:46:10

Bonjour.
Ce script est exactement ce que je cherche pour mon site que je dévelope avec "Cool Page".
Le problème est que je suis archi débutant et je ne comprends pas ou et comment je peux "insérer" mes photos dans ce script.
Pouvez-vous SVP m'aider car j'aimerais tellement utiliser ce script...
Merci d'avance.
Mamacx
Commentaire de jpcreation le 10/02/2008 12:47:53

Bonjour,

je trouve ce script très bien mais vous parait-il possible de l'adapter pour lire des dossiers remplis dynamiquement (si je ne suis pas clair, je voudrais qu'il lise le contenu d'un dossier et non une liste d'image pour laquelle je mets des noms précis).

C'est peut être simple mais je suis nul en javascript.

JPCREATION

PS : Salut Atila, le monde du développement est décidément très petit !!!
Commentaire de atiladiffusion le 10/02/2008 13:17:56

En effet JPCREATION...

pour ton soucis, tu dois le gerer en php et générer la liste de images de maniere dynamique dans une parties cript javascript de ta page.. tu n'a qu'à faire une boucle sur le contenu de ton dossier. Pour cela renseigne toi sur la lecture et le parcour de dossier en php.

Bonne chance à toi.
Commentaire de Ma4xime le 15/03/2008 16:07:42

J'ai un probléme, j'arrive à télécharger le Logiciel, à l'ouvrir dans WinRar, mais pas à Ouvrir ce Logiciel ... Rep

Ajouter un commentaire

Discussions en rapport avec ce code source

effet de fondu par seb019

Défilement horizontale d'un texte par NestleMatt

effet ouverture de page réactualisé par jlagabrielle

Effet de texte par romain2boss

Problème barre de défilement horizontal sur mes pages par rem78

effet livre par guyman

gif transparent par djnos

donner un fond transparent à une image par cz1702

Défilement automatique des pages d'un site ? par adelysnet

Effet panoramique par isu_san