Benchmark de différentes formes de diaporamas animés de sites Internet.

1. BENCHMARK DE DIAPORAMAS ANIMES
1
Groupe Happy Together (Modedemploi & It’s a Good Day) 8 rue des Champs 92600 Asnières Sur Seine / TÉL : 01 41 34 06 40 / FAX : 01 41 34 06 49

2. Diaporama centré avec 2 modalités d’affichage
Effet de transition :
Les images changent par effet de transition en fausse 3D
Le diaporama est composé Deux façon d’afficher le
de plusieurs zones diaporama
2
Source : http://www.total.fr/

3. Diaporama centré avec icônes et onglets
Effet de transition :
Les images changent par effet de défilement de droite vers la gauche
Le diaporama est composé L’onglet visionné est
de plusieurs icônes marqué par une flèche
3
Source : http://www.apple.com/fr/mac/

4. Diaporama centré mais intégré au background
Effet de transition :
Aucun effet de transition
Image centrale en png
intégrée comme un
background
4
Source : http://www.apple.com/fr/

5. Diaporama centré avec effet carrousel
Effet de transition :
Les images changent par effet de défilement de droite à gauche
Slide avec image cliquable Navigation par slider Aperçu des slides sous
qui s’affiche avec une horizontal et par flèches formes de carrousel
largeur figée en pixels gauche/droite
5
Source : http://www.tv5mondeplus.com

6. Diaporama centré avec superposition d’un tunnel d’actualités
Effet de transition :
Les images changent par effet de transition superposée
Slide avec image cliquable Navigation par slider Aperçu des slides sous
qui s’affiche avec une horizontal formes de vignettes
largeur figée en pixels
6
Source : http://www.arcelormittal.com

7. Diaporama arrondi avec affichage des actualités par dessus
Effet de transition :
Les images défilent de droite à gauche
Flèches de navigation Slide avec image et titre Affichage d’actualités par
situées à côté l’une de dessus le slide avec une
l’autre opacité
7
Source : http://www.veolia.fr/

8. Diaporama composé d’un mur de vignettes avec effet 3D et profondeur
Effet de transition :
Les images défilent en suivant le curseur de la souris
Le diaporama est composé
de vignettes
8
Source : http://www.france.fr/animation/donjons-et-forteresses-remparts-et-chateaux

9. Diaporama composé d’un mur de vignettes avec effet 3D et profondeur
Effet de transition :
Les vignettes sont ombrées lorsqu’elles ne sont pas survolées par le curseur de la souris
Le diaporama est composé
de vignettes
9
Source : http://www.m6replay.fr/#/choisir-par-genre

10. Diaporama de vignettes sous forme de planisphère
Effet de transition :
Les images défilent en suivant le curseur de la souris
Le diaporama est composé
de vignettes
10
Source : http://www.france.fr/monuments-et-sites-d-exception/animation/les-monuments-musees-et-sites-naturels-ne-pas-rater-lors-dun-sejour-en-france

11. Diaporama centré avec volets composé d’images
Effet de transition :
Les images changent par effet de passage d’un volet à l’autre
Un système de volets Slide avec image cliquable
permet de dévoiler la zone qui s’affiche avec une
associée largeur figée en pixels
11
Source : http://www.kriesi.at/themes/corona/

12. Diaporama centré avec superposition d’un tunnel d’actualités
Effet de transition :
Les images changent par effet de transition superposée
Le diaporama est composé Un volet dédié aux
de plusieurs images de actualités (ouvert/fermé)
fonds qui défilent s’affiche par dessus
12
Source : http://www.unibail-rodamco.fr

13. Diaporama avec effet 3D
Effet de transition :
Les images changent par effet de défilement
Aperçu des slides sous
formes de petites vignettes
s’affichant en roll over 13
Source : http://www.imtheme.net/themeforest/wordpress/idea3D/

14. Diaporama de type carrousel avec dimensions différentes
Effet de transition :
Les images changent par effet de défilement
Flèches de navigation Image avec dimensions
situées aux extrémités et figées
affichées par roll over
14
Source : http://www.orange.fr

15. Diaporama et son contenu s’affichant sur 100% de la largeur
Effet de transition :
Les images s’affichent par défilement horizontal de droite à gauche
Aperçu des slides sous Flèches de navigation Slide avec image complète Affichage d’un bloc texte
formes de petites vignettes situées aux extrémités et et cliquable sur 100% de la par dessus le slide avec
cliquables affichées par roll over largeur de l’écran une opacité
15
Source : http://www.airetcompagnie.com

16. Diaporama s’étendant sur 100% de la largeur mais avec un contenu centré
Effet de transition :
Les images défilent de droite à gauche
Flèches de navigation aux Slide avec image Matérialisation du slide
extrémités des slides transparente et cliquable visité par affichage d’un
sur 100% de la largeur bouton radio stylé apple
16
Source : http://i.hawktheme.com/cross-apple/home-page-3/

17. Diaporama s’étendant sur 100% de la largeur
Effet de transition :
Les images changent par effet de transition superposée
Slide avec image cliquable Affichage d’un bloc texte Flèches de navigation aux
sur 100% de la largeur par dessus le slide avec extrémités des slides
une opacité
17
Source : http://i.hawktheme.com/cross-apple/home-page-3/

18. Diaporama centré dévoilant ses slides depuis des volets verticaux
Effet de transition :
Les images défilent de droite à gauche
Un système de volets Slide avec image cliquable
permet de dévoiler la zone qui s’affiche avec une
associée largeur figée en pixels
18
Source : http://i.hawktheme.com/cross-apple/

19. Diaporama centré avec aperçus sous forme de grandes vignettes
Effet de transition :
Les images défilent de droite à gauche
Flèches de navigation Slide avec image cliquable Aperçu des slides sous
situées aux extrémités qui s’affiche avec une formes de grandes
largeur figée en pixels vignettes
19
Source : http://yourinspirationweb.com/demo/memento/

20. Diaporama centré avec des numéros correspondant aux slides
Effet de transition :
Les images descendent du haut du diaporama
Flèches de navigation Slide avec image cliquable Aperçu des slides sous
situées aux extrémités du qui s’affiche avec une formes de numéros
diaporama largeur figée en pixels cliquables
20
Source : http://i.hawktheme.com/cross-apple/home-page-2/

21. Diaporama centré mais intégré sous forme de background
Effet de transition :
Les images changent de façon automatique par effet de transition
Flèches de navigation Image centrale en png
situées aux extrémités et intégrée comme un
affichées par roll over background
21
Source : http://www.freaklife.com/cassiopeia/

22. Diaporama centré avec un liserai horizontal cliquable
Effet de transition :
Les images s’affichent par défilement horizontal de droite à gauche
Système de navigation par Slide avec image cliquable
liserai horizontal cliquable qui s’affiche avec une
largeur figée en pixels
22
Source : http://themes.themegoods.com/styx_wp/

23. Diaporama centré avec un mini liserai horizontal cliquable
Effet de transition :
Les images changent par effet de transition superposée
Slide avec image cliquable Système de navigation par
qui s’affiche avec une mini liserai horizontal
largeur figée en pixels cliquable
23
Source : http://wptitans.com/sodales/

24. Diaporama centré avec aperçu des slides sous forme de vignettes
Effet de transition :
Les images changent par effet de transition en fausse 3D
Flèches de navigation Insertion de boutons de Aperçu des slides sous Affichage d’un bloc texte
situées aux extrémités et navigation dans le formes de petites vignettes par dessus le slide avec
affichées par roll over diaporama cliquables une opacité
24
Source : http://www.eads.com

25. Diaporama centré composé de deux zones animées
Effet de transition :
Chaque zone dispose de son propre effet de transition
Slide avec transitions de Deuxième zone avec
plusieurs images défilement par flèches
horizontales
25
Source : http://webdziner.im/lingeries-store/magento/

26. Mini diaporama centré avec des titres sous forme d’onglets
Effet de transition :
Les images défilent de droite à gauche
Les éléments de navigation Dimensions restreintes
sont composés d’onglets pour le diaporama
26
Source : http://www.vivendi.com

27. Diaporama centré avec des vignettes de navigation
Effet de transition :
Les images défilent de droite à gauche
Slide avec image cliquable Flèches de navigation Aperçu des slides sous
qui s’affiche avec une situées aux extrémités des formes de numéros
largeur figée en pixels aperçus vignettes cliquables
27
Source : http://i.hawktheme.com/cross-apple/home-page-1/

28. Diaporama sous forme de background du site
Effet de transition :
Le fond change en fonction d’un survol d’un des 3 tunnels d’entrée
Le diaporama fonctionne Navigation par roll over sur
comme un background un des tunnels d’entrée
complet 28
Source : http://www.technip.com/fr

29. Fin
http://www.twitter.com/buzzmodedemploi
8 rue des Champs
92600 Asnières
01 41 34 06 40
http://www.facebook.com/agencemodedemploi
http://www.agence-modedemploi.com/buzz/fr/
http://feeds2.feedburner.com/agence
http://www.buzz-observer.com/
http://www.agence-modedemploi.com
http://www.itsagoodday.net

30. 30
Groupe Happy Together (Modedemploi & It’s a Good Day) 8 rue des Champs 92600 Asnières Sur Seine / TÉL : 01 41 34 06 40 / FAX : 01 41 34 06 49