Slide Transition & Blast Style Image Slider
Ce slider est un slider pleine largeur, CSS-only qui est dramatique et beau. Il est compatible sur le toucher-glisser, ce qui le rend idéal pour les tablettes et les smartphones, et il est également très rapide à charger.
Parce que le slider est en pleine largeur, les images ont un impact maximum, ce qui fait ce slider un excellent choix pour les photographes et les autres personnes qui veulent la mise au point de leur site pour être sur les images.
Il ya deux flèches de navigation et un bouton pause / play qui apparaissent lorsque l'utilisateur interagit avec les diapositives ou les survole. Ceux-ci utilisent des icônes blanches en gras sur un fond circulaire bleu sombre. Ils semblent 'se déposer', en subissant une décoloration et rétrécissement. C'est un effet spectaculaire et attrayant, qui qui fonctionne aussi bien dans le sens inverse, lorsque les icônes semblent «remonter» du slider. Le tout donne un feeling de design en 3 dimensions.
En passant au-dessus des icônes, on crée une bordure bleue qui semble rayonner à partir du rond central, puis disparaît. Encore une fois, c'est un effet de style et dramatique qui fait que ce design de slider va vraiment se démarquer.
Les icônes font exactement ce que vous attendez d'elles: en cliquant sur les flèches suivant / précédent, vous arrivez aux diapositives pertinentes, et en cliquant sur le bouton Play / Pause vous allez soit arrêter le diaporama ou le relancez.
L'utilisateur peut aussi naviguer entre les diapositives en utilisant les cercles en bas au centre de l'écran. Ces cercles sont d'un bleu sombre, et chacun représente une image dans le diaporama. Lorsqu'une nouvelle image se déplace dans la fenêtre, les cercles pertinents vont avoir une bordure blanche en gras semi-transparente qui attire l'œil et aide l'utilisateur à comprendre comment fonctionnent ces cercles.
Alors que vous allez Interagir avec les cercles, une image d'aperçu va s'afficher dans un cadre bleu. Cette image d'aperçu "tombe" à l'intérieur et "s'envole" de la même manière que les autres icônes le font. En cliquant sur un cercle, vous allez faire que slider charge ensuite cette image dans le diaporama.
Chaque image dans le slidehow 'glisse' vers la suivante, soit à gauche ou à droite en fonction de si la diapositive est la diapositive suivante ou une précédente. Lorsque vous utilisez les cercles pour naviguer à une image qui est éloignée de deux ou trois diapositives, ou lorsque le diaporama atteint la «fin» des images et remonte au début, le slider fonctionne en accéléré à travers toutes les diapositives. Cela donne un aspect naturel, «réaliste» assez subtil, mais fait que le le slider a un feeling amical et vivant.
Une légende se trouve dans le coin en bas à gauche. Il y a un titre et un sous-titre, les deux sous forme d'un texte blanc sur un rectangle bleu semi-transparent. Les légendes "tombent" et "s'élèvent" de la même façon que les autres icônes et que les images d'aperçu. Le fond bleu semi-transparent permet aux couleurs de la photo ci-dessous d'apparaitre à travers, et donne à la légende une sensation légèrement plus douce.
Les légendes utilisent Duru Sans, une police sans-serif qui mêle un design humaniste et moderniste. Le résultat est très élégant, et donne une sensation de design sophistiqué.
Parce qu'il n'y a pas de JQuery, pas de javascript et aucune image, ce slider est rapide et fonctionne sur n'importe quelle plateforme. Il sera parfait pour les designers qui pensent aux mobiles en premier lieu.