begin process at 2010 03 19 05:48:33
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > EFFET DE CASCADE SUR DES IMAGES AVEC TRANSPARENCE...

EFFET DE CASCADE SUR DES IMAGES AVEC TRANSPARENCE...


 Information sur la source

Note :
9 / 10 - par 1 personne
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :images, effet, defilement Niveau :Débutant Date de création :10/05/2008 Vu / téléchargé :8 042 / 672
Auteur : adelami

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (5)
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture ALBUM PHOTOS "3D"
Source avec Zip Source avec une capture MANÈGE 3D
Source avec Zip Source avec une capture LOUPE SUR IMAGE AU PASSAGE DE LA SOURIS !
Toutes les sources de adelami

 Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3
Source avec Zip Source avec une capture MARQUEE EN JAVASCRIPT par Kimjoa
Source avec Zip Source avec une capture DEFILEMENT D'IMAGE PAR TABLEAU par kazma

Commentaires et avis

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 !

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!

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

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>



Commentaire de devsteph le 13/12/2009 09:44:15

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

 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 Defilement aleatoire d'images [ par grolix ] Bonjour,J'ai un bloc div dans lequel je souhaite faire défiler des images aléatoirements (toutes de meme taille).J'ai codé comme ça: &lt;!DOCTYPE Defilement d'image horizontal [ par toons43 ] Bonjour à tous, Je recherche désespérement un script comme celui-ci http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htmqui permet de faire Effet fade in sur des images/liens [ par piregproduction ] Bonjour, Pour le centre d'un menu, je souhaite appellé via une frame une page dans laquelle j'aurais les images/liens de mon menu central, et je souha script image [ par ptipat ] bonjour, je cherche un script qui ferai apparaitre des images aléatoirement, du moin comme cela : j'ai 6 image sur ma page et j'aimerai quel change un CSS/JS gestion d'images [ par Zestyr ] Salut, je voudrais créer un petit jeu Rayman en 2D plaqué (en JS), j'ai toutes les ressources qui me faut, mais je sait pas comment faire pour rendre ProgressBar de préchargement d'images, avec une pergress bar esthétique [ par Mouk32 ] Bonjour, bonjour ! Premier message, premier appel au secours [^^happy8] Alors pour résumer, je voudrais mettre une ProgressBar qui charge mes images a


Nos sponsors


Sondage...

Comparez les prix


Samsung Galaxy I7500 (8 Go)
Entre 129€ et 575€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

  
  

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,718 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)