Rotate Transition & Agile Skin Image Gallery
Ce slider pur-CSS se charge rapidement et est complètement responsive. Il permet à l'utilisateur de faire des gestes touch-and-swipe pour naviguer dans le diaporama, le rendant idéal pour concepteurs en mobile. L'aspect général est propre et frais, mais avec quelques bizarreries intéressantes. Le slider utilise un schéma de couleurs blanche et orange.
La démonstration n'a pas de bordure, et est assez carrée. La forme carrée signifie que le diaporama est très flexible et peut être utilisé avec un large éventail de photographies.
En passant au-dessus l'image de diapositive, on affiche deux flèches de navigation de chaque côté, et une icône pause / play dans le centre. Les flèches de navigation sont des flèches blanches sur un cercle orange, et l'icône de lecture / pause est aussi blanche sur un cercle orange. Ces icônes 'tournent' pour se mettre en position, et si vous arrêtez planant au-dessus du slider filent et disparaître.
Si l'utilisateur survole les icônes, elles acquièrent une seconde bordure orange autour du cercle orange, créant un effet de «double-cercle». Les flèches de navigation se déplacent vers l'arrière et vers l'avant, en encourageant l'utilisateur à les cliquer. En cliquant sur l'une des flèches, vous pouvez aller d'avant en arrière à travers les images.
En cliquant sur le bouton 'pause', vous allez arrêter le slider de l'affichage de l'image suivante et l'icône va changer à un symbole «play». En cliquant sur le symbole "play", le diaporama reprendra.
La légende se trouve dans le coin inférieur gauche et utilise une police sans-serif appelé «Lato». Le texte est blanc, et il est "posé" sur un fond orange. Il y a à la fois un titre et un sous-titre, et les deux ont des arrière-plans rectangulaires séparés avec des coins arrondis qui se combinent pour créer une nouvelle forme. Ces légendes vont grandir lentement, l'une après l'autre, ce qui leur donne toute une sensation de vivant.
Au bas de la diapositive on voit un ensemble de cercles orange, qui représentent des images de diaporama. Le cercle qui représente l'image actuelle a une bordure orange qui crée un effet de «double cercle». Une belle touche, c’est que le deuxième cercle est légèrement de travers. C'est une petite touche subtile, mais le design devient très organique.
Lorsque l'utilisateur survole un cercle, une image d'aperçu dans un cadre orange zoome lentement en vue. Ces images d'aperçu permettent à l'utilisateur de voir les autres diapositives qui sont à venir, et en sélectionner une à charger.
L'effet de transition par défaut est «Rotation», qui tourne vers une nouvelle image et fait tourner une ancienne image. Cela donne un feeling propre et moderne, mais avec beaucoup de mouvement.
Le design est moderne et amusant, et va bien marcher pour un large éventail de sites Web. La conception adaptée, CSS-only le rend parfait pour les sites optimisés pour les mobiles, et est parfait pour les entreprises qui ont besoin de donner des informations et de vendre leurs services aux personnes en déplacement - comme les sites web des transports publics, des sites commerciaux «de dernière minute» et les sites de tourisme.