Slices Animation & Flat Design

Ce diaporama a un design brillant et stylisé. Il utilise un rose vif, du blanc et du noir pour les effets impactant.

L’image principale a une bordure fine rose chaud en haut et en bas qui fait vraiment ressortir le diaporama. Ce diaporama fonctionnerait bien sur les sites web avec des arrière-plans foncés ou noirs qui feraient paraître le rose vif vraiment spectaculaire.

Déplacer la souris sur les images fait apparaître les flèches de navigation. Elles sont assez discrètes. La tête de la flèche est juste une fine ligne blanche, et elle est affichée sur une case noire semi-transparente qui s’étend directement depuis le bord du diaporama. Déplacer la souris sur la flèche de navigation transforme la case d’arrière-plan en rose vif comme le cadre, et la fait immédiatement ressortir davantage. Cliquer sur les flèches permet à l’utilisateur de faire défiler les diapositives.

Il y a une légende en bas à gauche du diaporama. La légende a un titre principal de grand texte blanc sur un arrière-plan rose vif et un sous-titre de texte blanc plus petit sur un arrière-plan noir. La légende est semi-transparente et s’étend directement depuis le bord du cadre. Cela l’aide à rester assez discret. La police utilisée est ‘Signika, une police sans-serif qui a été conçue pour la lisibilité dans des situations de faible contraste. Ainsi, malgré la semi-transparence des légendes, le texte est clair et facile à lire.

En bas à droite il y a une fine ligne noire semi-transparente de la même largeur que la bordure. Elle est divisée en sections, et chacune correspond à une image dans le diaporama. Déplacer la souris sur une section de la ligne la transforme en gris et affiche un aperçu de la diapositive dans un cadre blanc avec une ombre portée. Cliquer sur cette section chargera l’image dans le diaporama principal et permet à l’utilisateur de naviguer à l’encadrement qu’il choisit.

La section de la ligne qui correspond à l’image actuelle devient rose vif, rendant clair que la ligne est reliée au diaporama et encourageant les utilisateurs à interagir avec.

L’impact global de cette ligne est stylisé et unique, assez différent des autres diaporamas qui utilisent des points ou nombres.

L’effet de changement par défaut est appelé ‘slices’. Cet effet offre une transition de chaque image vers la prochaine en divisant l’image en plusieurs parts fines et les replaçant d’une manière différente. C’est une transition épurée mais stylisée, qui complémente le design du diaporama. Il y a une vaste gamme d’autres effets de changement qui fonctionneraient avec ce diaporama, incluant ‘bubbles’ et ‘dribbles’, qui sont tous deux amusants et funky, et ‘glass parallax’ qui est stylisé.

Ce diaporama serait parfait pour les sites internet qui veulent une apparence théâtrale et stylée. Il irait bien pour les entreprises de mode qui vendent des vêtements 'alternatifs', les sites internets qui vendent du maquillage et des produits de beauté et également tout site internet qui vend des produits fun et funky, les bloggers et les sites internet personnels. Il serait aussi génial pour les compagnies de théâtre et les sites internet de divertissement.