Upload
francois-sutter
View
1.265
Download
0
Embed Size (px)
DESCRIPTION
Benchmark de différentes formes de diaporamas animés de sites Internet.
Citation preview
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
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
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
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
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
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
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é
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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é
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
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
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
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
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
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