Effet de cascade sur des images avec transparence...

Soyez le premier à donner votre avis sur cette source.

Vue 11 530 fois - Téléchargée 982 fois

Description

Effet de style avec des images en cascade... Pour l'instant, seules six images peuvent être mises.

Conclusion :


Des mises à jour sont à venir, pour pouvoir choisir le nombre d'images (affichées et une liste "à afficher"), la vitesse, pour pouvoir, aussi, integrer le script à l'interieur de n'importe quelle page...
Bref, il y a du boulot, sans parler de la lenteur sous firefox (mais ça...)

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
mercredi 4 février 2009
Statut
Membre
Dernière intervention
15 mai 2010

Le script est parfait pour un effet sur une image mais quel dommage de ne pas pouvoir l'utiliser avec six images différentes sur le NET alors qu'il fonctionne très bien sur IE. à suivre
Messages postés
15
Date d'inscription
mercredi 19 mars 2008
Statut
Membre
Dernière intervention
25 octobre 2010

salut

pourquoi mes images ne passent pas sous FF. On voit le cadre des images sans les images alors que sous IE7, c est impec.

merci

steph
Messages postés
111
Date d'inscription
dimanche 23 mars 2003
Statut
Membre
Dernière intervention
1 août 2008

Salut!

J'ai modifié ton code sans chercher à comprendre comment il marche, il y a donc peut-être quelques erreurs.
Voici donc une version objet de ton code (bien que l'on ne puisse pas vraiment l'instancier plusieurs fois).

<html>
<head>
<title>Cascading Effect</title>
</head>

<script type="text/javascript">
new CascadingStyle("container");

/*
var effect = new CascadingStyle("container", {
onStart : function() { alert('start') },
onStop : function() { alert('stop') },
disableAutostart : true,
interval : 150
});

effect.start();

setTimeout(function() { effect.stop(); }, 10000);
*/

function $(id)
{
return document.getElementById(id);
}

function CascadingStyle(div, options)
{
var _options = options || {};var _div typeof(div) "string" ? $(div) : div;
var _imgs = _div.getElementsByTagName('img');
var _interval = _options.interval || 100;
var _disableAutostart = _options.disableAutostart || false;
var _onStart = _options.onStart || false;
var _onStop = _options.onStop || false;
var _working;

var _haut = [0,25,50,75,100,125];
var _hmax;
var _pic;
var _int;

function move()
{
for (var i=0; i<_imgs.length; ++i)
{
var img = _imgs[i];
img.style.top = _haut[i] + "px";
img.height = 50+2*_haut[i];
img.style.left = document.body.clientWidth/2 - img.width/2 + "px";
img.style.zIndex = _haut[i];
var pctge = 95*_haut[i]/(document.body.clientHeight - img.height);
img.style.filter = "alpha(opacity="+2*Math.sqrt(2500-(pctge-50)*(pctge-50))+")";
img.style.opacity = pctge/100;

if (_haut[i] < (document.body.clientHeight - img.height))
_haut[i] = _haut[i]+2;
else
{
if (i+1 == _imgs.length)
_haut[i] = _haut[0] - _int;
else
_haut[i] = _haut[i+1] - _int;
}
}
}

this.start = function()
{
_hmax = (document.body.clientHeight-50)/(1+2);
_int = _hmax/6.25;
for(var i=1; i<_imgs.length+1; i++)
_haut[i]=i*_int;

clearInterval(_working);
_working = setInterval(move, _interval);

if (_onStart)
_onStart(this);
};

this.stop = function()
{
clearInterval(_working);

if (_onStop)
_onStop(this);
};

if (!_disableAutostart)
this.start();
}
</script>

</html>
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
Salut :)

alors , je vais essayer de faire quelques remarque constructives ;)

- code absolument pas commenté /!\
- Lenteur due au fait que tu lance un timer a chaque boucle
- tu refait des calculs qui devrait être des constantes ( exemple : document.body.clientWidth/2 )
- essaye de passer en objet tu y gagnera en clarté, en utilisation et en rapidité ;)
Messages postés
253
Date d'inscription
vendredi 13 juin 2003
Statut
Membre
Dernière intervention
18 mai 2009

Ba moi c'est le contraire^^ Sous Firefox ça marche nikel sous IE6 ça rame un peu :) Sinon jolie effet ça me donne des idée notement pour faire un diaporama!
Afficher les 6 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.