AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2008 12 04 00:50:26
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

EFFET DE CASCADE SUR DES IMAGES AVEC TRANSPARENCE...


Information sur la source

Catégorie :Effets Classé sous : images, effet, defilement Niveau : Débutant Date de création : 10/05/2008 Vu / téléchargé: 6 557 / 429
Auteur : adelami Site perso
Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Note :
9 / 10 - par 1 personne
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
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...)
 

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 !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de nicomilville le 13/05/2008 07:35:18

Salut,

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 !

signaler à un administrateur
Commentaire de lakichemole le 13/05/2008 10:24:51 9/10

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!

signaler à un administrateur
Commentaire de mickaelpfr le 13/05/2008 11:11:56

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é ;)

signaler à un administrateur
Commentaire de ralecul le 15/05/2008 10:43:00

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>

<body>

<div id="container">
<img style="position:absolute" src="Images\image.jpg">
<img style="position:absolute" src="Images\image.jpg">
<img style="position:absolute" src="Images\image.jpg">
<img style="position:absolute" src="Images\image.jpg">
<img style="position:absolute" src="Images\image.jpg">
<img style="position:absolute" src="Images\image.jpg">
</div>

<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>
</body>
</html>



Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Cherche script pour images [ par vcloclo1 ] Salut je cherche un script pour les image de mes partenaire, voici l'effet que je recherche: http://forumgsxr.free.fr/textedefilant.html Pour cette ex Class Defilement auto d'images avec animation [ par MeTh ] Je suis sur d'etre pret du but et je suis &#233;galement convaincu que ce script peut servir &#224; bcp de personne. Ceci ma premi&#232;re tentative Defilement d'images et Editeur Javascript [ par queeny933 ] 1) J'ai fait une page HTML qui contient  un "bandeau" horizontal de 10 petites images qui se trouvent agrandies dans un cadre quand la souris passe de Mon defilement d'images en ajax fonctionne sous IE mais pas FIREFOX [ par VBFRANCE ] Thierry Cadre qui s'adapte au contenu [ par ov3rdoze ] Bonjour à tousJ'ai une page dans laquelle je fais apparaitr un cadre quand on clique un bouton. Ce cadre en contient 2 autres :      - Un premier qui iframe images visibles impression [ par ju0123456789 ] Bonjour,Je voudrais integrer une iframe pour mon site web mais qui cache les images (qui elles seront visibles à l'impression).En fait, sur mon site j problème défilement d'images de façon aléatoire [ par jr5818 ] Bonjour,j'ai récupéré sur le net des bouts de codes afin de faire un défilement d'images aléatoires sur mon site. j'arrive à faire le défilement de la aligner images en java script [ par PatrickHumbert ] Bonjour, j'aimerais pouvoir faire qch comme align:center; mais en java script sans passer par le code css. Merci de l'aide. Patrick Améliorer un code trouvé sur ce site [ par chriss22 ] Bonjour,je suis nouveau sur le forum et complètement novice en javascript. Moi je suis plus php.Cependant j'ai trouvé un code pour mon site qui permet Problème avec effet lightbox + menu déroulant javascript [ par kevinbp ] Bonjour,j'aurais aimé avoir de l'aide avec mon site internet. Je n'arrive pas à avoir sur la même page un effet de lightbox ajouté à une animation fla


Nos sponsors

Sondage...

CalendriCode

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,390 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.