index.php

Photos de la place d’Espagne à Barcelone.

Photos de Barcelone.

Marché St Joseph
Lampadaire

Photo de la flamme olympique barcelonaise et de El Molino.

Flamme Olympique
El Molino

Photo du terminal d’arrivée et d’une rue barcelonaise.

Terminal d’arrivée de l’Aéroport
Petite Rue de Barcelone

Photos du Parc Floral du Château de Chaumont sur Loire.

Nénuphar
Feuille

Photos du Parc Floral du Château de Chaumont sur Loire.

Nénuphar
Aloe Vera

Que ce soit pour mettre en place un panorama 360° d’un paysage sur votre site, ou un slider 360° pour présenter vos produits sur votre e-commerce, l’utilisation de slider 360° peut apporter une vraie plus value pour vos visiteurs. ThreeSixty Slider, est un plugin jQuery permettant de le faire.

Le fonctionnement est plutôt simple, vous découpez en plusieurs images votre panorama (Plus il y’a d’images, plus le slider est fluide) et l’API du plugin permet de créer vos propres contrôles personnalisés pour naviguer dans le 360. Il y a également une fonction lecture qui permet de faire défiler automatiquement le slider.

D’un point de vue code, vous définissez l’architecture HTML avec le spinner qui permettra d’indiquer les % de chargement à vos visiteurs (à styler en CSS):

<div class="threesixty car">
<div class="spinner">0%</div>
</div>

(suite…)

Photos de Pont Aven.

Pont Aven
Pont Aven

Photos de la préfecture du Finistère à Quimper.

Préfecture du Finistère
Préfecture du Finistère

AyaSlider est un petit nouveau dans le monde des sliders jQuery fait son entrée. En plus de remplir ses fonctions de slider pour faire défiler les images ou contenu HTML, AyaSlider ajoute une dimension de contenu animé à l’intérieur des slides.

Ainsi, le plugin jQuery propose 2 niveaux d’options, au niveau global :

  • easeIn : Effet d’animation à l’ouverture du slide
  • easeOut : Effet d’animation à la fermeture du slide
  • delay : Délai en ms entre 2 slides
  • next : Sélecteur jQuery pour passer à la slide suivante
  • previous : Sélecteur jQuery pour aller à la slide précédente
  • list : Conteneur des slides

Puis pour chaque slide, on peut définir l’animation interne :

  • top : Point de départ de l’animation en vertical
  • left : Point de départ de l’animation en horizontal
  • opacity : Opacité de départ de l’animation
  • duration : Durée de l’animation
  • delay : Délai avant le démarrage de l’animation
  • ease : Effet

Ainsi, vous pourrez faire apparaître par dessus une image, des contenus HTML designés via du CSS.
(suite…)