begin process at 2012 02 14 09:10:44
  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 :
6,5 / 10 - par 2 personnes
6,50 / 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é :9 755 / 778
Auteur : adelami

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

Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip Source avec une capture SCROLLBAR CLASS par heycraft
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Source avec Zip Source avec une capture SCRIPT DE PRÉCHARGEMENT D'IMAGES par heycraft
Source avec Zip Source avec une capture DEFILEMENT A LA IPHONE 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

Commentaire de dploux le 15/05/2010 11:09:21 4/10

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

 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


Apple iPhone 4 Noir (16 Go)
Entre 0€ et 0€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Monument Valley Utah known as The Mittens
Photo DSLR Camera Taking a Photograph of a Sunflower Field 

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 : 2,262 sec (3)

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)