Benchmark de diaporamas animés
-
Upload
francois-sutter -
Category
Design
-
view
1.264 -
download
0
description
Transcript of Benchmark de diaporamas animés
![Page 1: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/1.jpg)
1
BENCHMARK DE DIAPORAMAS ANIMES
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
![Page 2: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/2.jpg)
2
Diaporama centré avec 2 modalités d’affichage
Source : http://www.total.fr/
Effet de transition : Les images changent par effet de transition en fausse 3D
Le diaporama est composé de plusieurs zones
Deux façon d’afficher le diaporama
![Page 3: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/3.jpg)
3
Diaporama centré avec icônes et onglets
Source : http://www.apple.com/fr/mac/
Effet de transition : Les images changent par effet de défilement de droite vers la gauche
Le diaporama est composé de plusieurs icônes
L’onglet visionné est marqué par une flèche
![Page 4: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/4.jpg)
4
Diaporama centré mais intégré au background
Source : http://www.apple.com/fr/
Effet de transition : Aucun effet de transition
Image centrale en png intégrée comme un background
![Page 5: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/5.jpg)
5
Diaporama centré avec effet carrousel
Source : http://www.tv5mondeplus.com
Effet de transition : Les images changent par effet de défilement de droite à gauche
Slide avec image cliquable qui s’affiche avec une largeur figée en pixels
Navigation par slider horizontal et par flèches gauche/droite
Aperçu des slides sous formes de carrousel
![Page 6: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/6.jpg)
6
Diaporama centré avec superposition d’un tunnel d’actualités
Source : http://www.arcelormittal.com
Effet de transition : Les images changent par effet de transition superposée
Slide avec image cliquable qui s’affiche avec une largeur figée en pixels
Navigation par slider horizontal
Aperçu des slides sous formes de vignettes
![Page 7: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/7.jpg)
7
Diaporama arrondi avec affichage des actualités par dessus
Source : http://www.veolia.fr/
Effet de transition : Les images défilent de droite à gauche
Flèches de navigation situées à côté l’une de l’autre
Slide avec image et titre Affichage d’actualités par dessus le slide avec une opacité
![Page 8: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/8.jpg)
8
Diaporama composé d’un mur de vignettes avec effet 3D et profondeur
Source : http://www.france.fr/animation/donjons-et-forteresses-remparts-et-chateaux
Effet de transition : Les images défilent en suivant le curseur de la souris
Le diaporama est composé de vignettes
![Page 9: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/9.jpg)
9
Diaporama composé d’un mur de vignettes avec effet 3D et profondeur
Source : http://www.m6replay.fr/#/choisir-par-genre
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
![Page 10: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/10.jpg)
10
Diaporama de vignettes sous forme de planisphère
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
Effet de transition : Les images défilent en suivant le curseur de la souris
Le diaporama est composé de vignettes
![Page 11: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/11.jpg)
11
Diaporama centré avec volets composé d’images
Source : http://www.kriesi.at/themes/corona/
Effet de transition : Les images changent par effet de passage d’un volet à l’autre
Un système de volets permet de dévoiler la zone associée
Slide avec image cliquable qui s’affiche avec une largeur figée en pixels
![Page 12: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/12.jpg)
12
Diaporama centré avec superposition d’un tunnel d’actualités
Source : http://www.unibail-rodamco.fr
Effet de transition : Les images changent par effet de transition superposée
Le diaporama est composé de plusieurs images de fonds qui défilent
Un volet dédié aux actualités (ouvert/fermé) s’affiche par dessus
![Page 13: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/13.jpg)
13
Diaporama avec effet 3D
Source : http://www.imtheme.net/themeforest/wordpress/idea3D/
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
![Page 14: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/14.jpg)
14
Diaporama de type carrousel avec dimensions différentes
Source : http://www.orange.fr
Effet de transition : Les images changent par effet de défilement
Flèches de navigation situées aux extrémités et affichées par roll over
Image avec dimensions figées
![Page 15: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/15.jpg)
15
Diaporama et son contenu s’affichant sur 100% de la largeur
Source : http://www.airetcompagnie.com
Aperçu des slides sous formes de petites vignettes cliquables
Flèches de navigation situées aux extrémités et affichées par roll over
Slide avec image complète et cliquable sur 100% de la largeur de l’écran
Affichage d’un bloc texte par dessus le slide avec une opacité
Effet de transition : Les images s’affichent par défilement horizontal de droite à gauche
![Page 16: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/16.jpg)
16
Diaporama s’étendant sur 100% de la largeur mais avec un contenu centré
Source : http://i.hawktheme.com/cross-apple/home-page-3/
Flèches de navigation aux extrémités des slides
Slide avec image transparente et cliquable sur 100% de la largeur
Matérialisation du slide visité par affichage d’un bouton radio stylé apple
Effet de transition : Les images défilent de droite à gauche
![Page 17: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/17.jpg)
17
Diaporama s’étendant sur 100% de la largeur
Source : http://i.hawktheme.com/cross-apple/home-page-3/
Slide avec image cliquable sur 100% de la largeur
Affichage d’un bloc texte par dessus le slide avec une opacité
Effet de transition : Les images changent par effet de transition superposée
Flèches de navigation aux extrémités des slides
![Page 18: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/18.jpg)
18
Diaporama centré dévoilant ses slides depuis des volets verticaux
Source : http://i.hawktheme.com/cross-apple/
Un système de volets permet de dévoiler la zone associée
Slide avec image cliquable qui s’affiche avec une largeur figée en pixels
Effet de transition : Les images défilent de droite à gauche
![Page 19: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/19.jpg)
19
Diaporama centré avec aperçus sous forme de grandes vignettes
Source : http://yourinspirationweb.com/demo/memento/
Effet de transition : Les images défilent de droite à gauche
Flèches de navigation situées aux extrémités
Slide avec image cliquable qui s’affiche avec une largeur figée en pixels
Aperçu des slides sous formes de grandes vignettes
![Page 20: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/20.jpg)
20
Diaporama centré avec des numéros correspondant aux slides
Source : http://i.hawktheme.com/cross-apple/home-page-2/
Flèches de navigation situées aux extrémités du diaporama
Slide avec image cliquable qui s’affiche avec une largeur figée en pixels
Aperçu des slides sous formes de numéros cliquables
Effet de transition : Les images descendent du haut du diaporama
![Page 21: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/21.jpg)
21
Diaporama centré mais intégré sous forme de background
Source : http://www.freaklife.com/cassiopeia/
Effet de transition : Les images changent de façon automatique par effet de transition
Flèches de navigation situées aux extrémités et affichées par roll over
Image centrale en png intégrée comme un background
![Page 22: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/22.jpg)
22
Diaporama centré avec un liserai horizontal cliquable
Source : http://themes.themegoods.com/styx_wp/
Système de navigation par liserai horizontal cliquable
Slide avec image cliquable qui s’affiche avec une largeur figée en pixels
Effet de transition : Les images s’affichent par défilement horizontal de droite à gauche
![Page 23: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/23.jpg)
23
Diaporama centré avec un mini liserai horizontal cliquable
Source : http://wptitans.com/sodales/
Slide avec image cliquable qui s’affiche avec une largeur figée en pixels
Système de navigation par mini liserai horizontal cliquable
Effet de transition : Les images changent par effet de transition superposée
![Page 24: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/24.jpg)
24
Diaporama centré avec aperçu des slides sous forme de vignettes
Source : http://www.eads.com
Effet de transition : Les images changent par effet de transition en fausse 3D
Flèches de navigation situées aux extrémités et affichées par roll over
Insertion de boutons de navigation dans le diaporama
Aperçu des slides sous formes de petites vignettes cliquables
Affichage d’un bloc texte par dessus le slide avec une opacité
![Page 25: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/25.jpg)
25
Diaporama centré composé de deux zones animées
Source : http://webdziner.im/lingeries-store/magento/
Slide avec transitions de plusieurs images
Deuxième zone avec défilement par flèches horizontales
Effet de transition : Chaque zone dispose de son propre effet de transition
![Page 26: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/26.jpg)
26
Mini diaporama centré avec des titres sous forme d’onglets
Source : http://www.vivendi.com
Les éléments de navigation sont composés d’onglets
Dimensions restreintes pour le diaporama
Effet de transition : Les images défilent de droite à gauche
![Page 27: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/27.jpg)
27
Diaporama centré avec des vignettes de navigation
Source : http://i.hawktheme.com/cross-apple/home-page-1/
Slide avec image cliquable qui s’affiche avec une largeur figée en pixels
Flèches de navigation situées aux extrémités des aperçus vignettes
Aperçu des slides sous formes de numéros cliquables
Effet de transition : Les images défilent de droite à gauche
![Page 28: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/28.jpg)
28
Diaporama sous forme de background du site
Source : http://www.technip.com/fr
Le diaporama fonctionne comme un background complet
Navigation par roll over sur un des tunnels d’entrée
Effet de transition : Le fond change en fonction d’un survol d’un des 3 tunnels d’entrée
![Page 29: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/29.jpg)
Fin
http://www.twitter.com/buzzmodedemploi
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
8 rue des Champs92600 Asnières
01 41 34 06 40
8 rue des Champs92600 Asnières
01 41 34 06 40
![Page 30: Benchmark de diaporamas animés](https://reader033.fdocument.pub/reader033/viewer/2022061214/54999191b47959216d8b457a/html5/thumbnails/30.jpg)
30Groupe 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