DevKB
Web Development Knowledge Base
HOME | TOP 20 | WRITE AN ARTICLE |
Sections :



RSS RSS Feed

You too, please publish your useful code snippets in any programming language :
write an article !


Valid HTML 4.0 Transitional

Plateforme d'envoi de gros fichiers en ligne
Dépannage site web
Blog infogérance
Hébergement e-mail

Olivier Ligny - - 11/03/2008 - vue 13697 fois

Diaporama de photos avec effets spéciaux en transition - JavaScript-DHTML (IE Only)

Avec Internet Explorer, des effets spéciaux sont disponibles pour fondre une image dans une autre, et ainsi réaliser des diaporamas avec des effets de transitions surprenants.

Il suffit d'un bout de CSS et de JavaScript :

<img id=MyImg src=image1.jpg style="filter:progid:DXImageTransform.Microsoft.RandomDissolve()">

Et quelques secondes plus tard, déclencher le script suivant :

MyImg.filters[0].apply();
MyImg.src = 'image2.jpg';
MyImg.filters[0].play();

Et ainsi de suite pour les images suivantes ...

Attention : si les images à afficher sont lourdes, il est conseillé d'utiliser un script de préchargement pour ne démarrer l'animation que quand toutes les images ont été préchargées par le navigateur.

Voici une liste non exhaustive des effets disponibles :

filter:progid:DXImageTransform.Microsoft.Wipe(Gradientsize=1.0, wipeStyle=0, motion='forward')
filter:progid:DXImageTransform.Microsoft.Barn(orientation=horizontal, motion=out)
filter:progid:DXImageTransform.Microsoft.Blinds(bands=2, direction='RIGHT')
filter:progid:DXImageTransform.Microsoft.Checkerboard(squaresX=12, squaresY=8, direction='right', duration=1)
filter:progid:DXImageTransform.Microsoft.Inset()
filter:progid:DXImageTransform.Microsoft.Iris(irisStyle='CIRCLE', motion='out')
filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50, Duration=1, Enabled=false)
filter:progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle='clock')
filter:progid:DXImageTransform.Microsoft.RandomBars(orientation='horizontal')
filter:progid:DXImageTransform.Microsoft.RandomDissolve()
filter:progid:DXImageTransform.Microsoft.Slide(slideStyle='HIDE', bands=1)
filter:progid:DXImageTransform.Microsoft.Spiral(GridSizeX=16, GridSizeY=16)
filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='HIDE')
filter:progid:DXImageTransform.Microsoft.Strips(Duration=5, Motion='leftdown')
filter:progid:DXImageTransform.Microsoft.Wheel(spokes=4)
filter:progid:DXImageTransform.Microsoft.zigzag(GridSizeX=16, GridSizeY=16)

Pour plus d'info sur les transitions :
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/fade.asp

Un script tout fait pour gérer le diaporama (changement d'image toutes les X secondes) :
http://www.miraks.com/index.php?url=print_javascript&id=20026

 


SAM - 14/03/2008
Voici un fondu-enchainé qui a l'avantage de fonctionner AUSSI avec autre chose que IE :
http://ygda.free.fr/fonduEnchaine.htm


Write a comment :
Your name :     E-mail (optional) :

AntiSpam : what animal is visible on this picture ? :

Nos partenaires : iPhone 8 Cases & Protection