Diaporamas

Ce type de diaporama permet de présenter toutes images ou contenu de page avec animation automatique et/ou manuelle. Simple à créer et à mettre en place dans vos pages, il est construit en HTML5 and CSS3.
Il s'intégera parfaitement dans votre site internet et sera parfaitement compatible avec tous les navigateurs internet et bien sûr téléphones mobiles et tablettes du marché.

Nota : il est possible que vous ne visualisiez pas correctement les photos ci-dessous. Veuillez télécharger gratuitement un logiciel de navigation internet moderne, compatible HTML5.
Toutes les photos de cette page sont © 2011 Didier Gautron.

Fonctionnalités

  • 17 effets de transition
  • Code propre et léger pour un téléchargement des images et des effets très rapide
  • Intégralement compatible pour terminaux Full Responsive
  • Utilise l'accélération des animations écrites en CSS3
  • Utilise les animations JavaScript pour une compatibilité totale avec Internet Explorer
  • Intègre les légendes HTML intégrant des liens
  • Fonctionne avec tous les systèmes de navigation sur téléphones mobiles
  • Ecrit en HTML5, CSS3, PHP 5.2+, et la dernière version de jQuery

Exemple avec écran

Jeu de photos avec effet Ken Burns dans un écran type téléviseur, écran tactile, ...

  • Dordogne - oct-2011 - Macro photo - © 2011 Didier Gautron
  • Dordogne - oct-2011 - Macro photo - © 2011 Didier Gautron
  • Dordogne - oct-2011 - Macro photo - © 2011 Didier Gautron
  • Dordogne - oct-2011 - Macro photo - © 2011 Didier Gautron
  • Dordogne - oct-2011 - Macro photo - © 2011 Didier Gautron
  • Ceci est une légende en HTML intégrant un lien.
  • Ceci est une autre légende en HTML intégrant un lien.

Exemple par défaut

Jeu de photos intégrant légende et lien.

  • Dordogne - oct-2011 - Macro photo - © 2011 Didier Gautron
  • Dordogne - oct-2011 - Macro photo - © 2011 Didier Gautron
  • Dordogne - oct-2011 - Macro photo - © 2011 Didier Gautron
  • Dordogne - oct-2011 - Macro photo - © 2011 Didier Gautron
  • Dordogne - oct-2011 - Macro photo - © 2011 Didier Gautron
  • Ceci est une légende en HTML intégrant un lien.
  • Ceci est une autre légende en HTML intégrant un lien.

Exemple effet box

Intégration de contenus actifs via boutons. Animation automatique ou par bouton de déplacement.

  • Image 01

    Info 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    En savoir plus
  • Image 02

    Info 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    En savoir plus
  • Image 03

    Info 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    En savoir plus
  • Image 04

    Info 4

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    En savoir plus
  • Image 05

    Info 5

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    En savoir plus
  • Image 06

    Info 6

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    En savoir plus
  • Image 07

    Info 7

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    En savoir plus
  • Image 08

    Info 8

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    En savoir plus
  • Image 01 Info 1
  • Image 02 Info 2
  • Image 03 Info 3
  • Image 04 Info 4
  • Image 05 Info 5
  • Image 06 Info 6
  • Image 07 Info 7
  • Image 08 Info 8

Exemple avec boutons

Diaporama d'images avec boutons d navigation.

  • Image 01
  • Image 02
  • Image 03
  • Image 04
  • Image 01 Info 1
  • Image 02 Info 2
  • Image 03 Info 3
  • Image 04 Info 4

Exemple avec onglets

Diaporama de contenus avec choix par onglet. Animation automatique ou par bouton de déplacement. Les onglets peuvent être alignés à gauche, centrés ou à droite.

  • Icon 04

    Info 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Icon 05

    Info 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Icon 06

    Info 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Exemple de liste

Liste avec animation par navigation verticale.

  • Info 1

    Icon 09

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Info 2

    Icon 08

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Info 3

    Icon 07

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Restons en contact

DO-design

Appelez, écrivez moi