EFFET DE CASCADE SUR DES IMAGES AVEC TRANSPARENCE...
nicomilville
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
-
13 mai 2008 à 07:35
dploux Messages postés 2 Date d'inscription mercredi 4 février 2009 Statut Membre Dernière intervention 15 mai 2010 - 15 mai 2010 à 11:09
dploux Messages postés 2 Date d'inscription mercredi 4 février 2009 Statut Membre Dernière intervention 15 mai 2010 - 15 mai 2010 à 11:09
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/46624-effet-de-cascade-sur-des-images-avec-transparence
https://codes-sources.commentcamarche.net/source/46624-effet-de-cascade-sur-des-images-avec-transparence
15 mai 2010 à 11:09
13 déc. 2009 à 09:44
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
15 mai 2008 à 10:43
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>
13 mai 2008 à 11:11
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é ;)
13 mai 2008 à 10:24
13 mai 2008 à 07:35
comme tu l'a dit il y a une de ces lenteur sur firefox, je crois que j'ai atendu 2 minutes !
Sinon très bel effet !
PS : j'attend de voir l'amélioration si il y en a une pour noter !