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