Construire un slider CSS impressionnant avec quatre superpositions

Le projet d'aujourd'hui est amusant. Nous allons créer un curseur d'image CSS standard avec une torsion: la zone d'image visible sera divisée en quatre sections distinctes, chacune avec un message caché qui sera révélé lorsque l'utilisateur la survolera.

L'effet ultime est assez impressionnant et je pense que vous allez l'aimer beaucoup. En cours de route, nous jouerons avec des animations, des transitions, des contextes de positionnement et bien plus encore. Plongeons dedans et commençons!

Aperçu

Si vous souhaitez jeter un coup d'œil au produit fini avant sa fabrication, consultez le lien ci-dessous.

Démo: Cliquez ici pour lancer la démo en direct.

Comment roulez-vous?

Mon inspiration pour le tutoriel d'aujourd'hui vient du sushi où je prévois de dîner ce soir. Je me suis arrêté sur leur site Web pour obtenir des instructions et j'ai immédiatement voulu voir si je pouvais reproduire l'effet sur la page d'accueil. Le restaurant s'appelle How Do You Roll, n'hésitez pas à aller voir leur site génial.

HTML

Commençons ce projet! Comme toujours, la première chose à faire est de définir notre structure HTML de base. Ce curseur est composé d'une grande zone d'image divisée en quatre colonnes verticales. Par conséquent, nous avons besoin d’un div wrapper avec un curseur? classe et quatre divs intérieurs, chacun avec un? panneau? classe.

C’est notre structure de base, mais nous devons préciser un peu le contenu. Je veux que chaque groupe serve à la fois de source d’information et de lien. Ainsi, l'utilisateur devrait pouvoir survoler, voir de quoi le panneau parle, puis cliquer pour passer à une autre page. Pour ce faire, nous allons ajouter un h2 et un paragraphe et envelopper le tout dans une ancre. Cela ressemble à une façon étrange d'utiliser une ancre, mais c'est parfaitement valable en HTML5.

Maintenant que nous avons une structure globale et que la formation des panneaux individuels a été déterminée, nous avons tout mis ensemble et nous avons tout le code HTML dont nous aurons besoin pour ce projet.

Styles de départ

Pour lancer notre CSS, récupérons quelques éléments génériques. J'ai d'abord lancé une petite réinitialisation universelle pour nous mettre tous sur la même page. Remplacez-le par une meilleure technique de réinitialisation ou de normalisation si vous l'utilisez dans un projet réel.

J'ai également ajouté une texture de fond et réinitialisé les styles de lien pour le curseur, juste pour faire bonne mesure.

CSS curseur

Il est maintenant temps de styler le curseur div. Fondamentalement, nous voulons définir une taille spécifique pour elle, puis lui donner une image d’arrière-plan de la même taille. Ensuite, nous ajouterons quelques marges pour le centrer, une bordure-rayon pour arrondir les coins et une zone d'ombre pour le distinguer un peu de l'arrière-plan.

La grande chose que vous pourriez manquer dans ce morceau est le débordement: ligne automatique. Ceci est important car nous souhaitons que nos panneaux prennent l’effet d’angle arrondi que nous appliquons au curseur div.

Vérification des progrès

À ce stade, vous devriez avoir une grande image avec des coins arrondis et une ombre portée ainsi qu'un tas de textes laids et désordonnés que nous corrigerons à l'étape suivante!

Panneau CSS

Notre conteneur coulissant a l’air vif, il est maintenant temps de mettre les panneaux en ordre. Étant donné que notre conteneur mesure 800 x 400 pixels, chaque panneau doit être réglé sur 200 x 400 pixels, ce qui signifie que chaque panneau occupera toute la hauteur et un quart de la largeur. À partir de là, il suffit de les faire flotter à gauche et ils s'aligneront comme nous le souhaitons.

La partie intéressante ici est que j'ai défini la couleur et l'arrière-plan sur transparent, ce qui rend les panneaux invisibles. C'est parce que nous voulons seulement qu'ils apparaissent en vol stationnaire. L'état par défaut devrait en effet être caché.

La dernière étape consiste ici à ajouter le CSS pour une transition afin que les panneaux se fondent en place lorsque l'utilisateur survole. Notez que j'ai en fait déclaré deux transitions séparées séparées par une virgule (une pour la couleur et une pour la couleur d'arrière-plan).

Typographie de panneau

Ensuite, il est temps de mettre la typographie en ordre. Certes, je n’ai pas fait cela avec les panneaux réglés sur invisible mais à la place donné une couleur aux éléments, leur style, puis les est retournés à cachés.

Assurez-vous de styler à la fois le paragraphe et le h2. J'ai fait la tête grosse, audacieuse et descendu du haut un peu. L'en-tête et le paragraphe ont également une largeur définie de 150 pixels, ce qui facilite leur centrage dans l'espace malgré l'alignement à gauche.

Volet du panneau

Lorsque l'utilisateur survole l'un de nos panneaux, je souhaite qu'il redevienne visible. Je le fais en donnant une couleur au fond et au texte. J'ai défini le fond en noir, avec un peu de transparence pour laisser apparaître l'image sous-jacente et le paragraphe en blanc.

Vérification des progrès

Vous devriez maintenant avoir des panneaux pleinement opérationnels! Si c'est tout ce que vous cherchiez à réaliser, vous pouvez vous arrêter ici, aucun travail supplémentaire n'est nécessaire. Même sans la prochaine étape, c'est toujours un très bon effet.

Animer l'arrière-plan

Cette dernière étape est totalement facultative, et notez que cela ne fonctionnera pas du tout sur les anciens navigateurs, mais l'inspiration initiale de cette pièce avait un curseur d'image en arrière-plan. Nous avons une image statique là-bas et nous allons maintenant revenir en arrière et l'animer.

Pour ce faire, nous devons revenir au bloc de déclaration du curseur et ajouter quelques éléments. Pour commencer, transformez votre arrière-plan unique en quatre images d'arrière-plan, la dernière étant la même que la première pour que tout se passe bien.

Ensuite, assurez-vous de ne pas répéter l’arrière-plan des images d’arrière-plan et copiez les valeurs de position indiquées ci-dessous pour aligner les images sur une longue ligne horizontale.

Comme vous pouvez le constater, j'ai également ajouté l'animation CSS. Nous appelons d’abord notre animation (curseur), puis définissons la durée et le nombre d’itérations. Pour terminer l'ensemble du projet, nous devons définir le fonctionnement de cette animation avec les images clés. Le code utilisé est confus, alors décrivons chaque étape.

  • Première étape: première image d'arrière-plan visible
  • Deuxième étape: tout déplacer vers la gauche 800px, deuxième image d'arrière-plan visible
  • Troisième étape: Tout déplacer vers la gauche 800px, troisième image d'arrière-plan visible
  • Quatrième étape: tout déplacer vers la gauche, 800 pixels, quatrième image d'arrière-plan visible (identique à la première image)

Pour diviser cela, nous devons commencer à 0% et finir à 100%, ce qui laisse deux étapes intermédiaires. La solution facile est de faire les étapes deux et trois à 33% et 66%. Le calcul n'est pas parfait, mais c'est assez proche. Notez que les images se déplacent à chaque fois, faisant apparaître le prochain arrière-plan.

  • 0%: position d'arrière-plan: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
  • 33% position d'arrière-plan: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
  • 66%: position d'arrière-plan: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
  • 100%: position d'arrière-plan: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;

Maintenant, cela seul fera bouger le diaporama, ce que nous ne voulons pas. Ce que nous souhaitons plutôt, c’est que chaque diapositive reste immobile pendant quelques secondes avant de progresser. Ceci est accompli en ajoutant quelques étapes redondantes afin que les diapositives n'avancent que de 10% avant l'étape suivante.

  • 0%: position d'arrière-plan: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
  • 23%: position d'arrière-plan: 0px 0px, 800px 0px, 1600px 0px, 3200px 0;
  • 33% position d'arrière-plan: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
  • 56% position d'arrière-plan: -800px 0px, 0px 0px, 800px 0px, 1600px 0;
  • 66%: position d'arrière-plan: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
  • 90%: position d'arrière-plan: -1600px 0px, -800px 0px, 0px 0px, 800px 0;
  • 100%: position d'arrière-plan: -3200px 0px, -1600px 0px, -800px 0px, 0px 0;

Maintenant que le traitement est défini, nous pouvons y arriver avec CSS. Cela nécessite une tonne de code pour les différents navigateurs, mais c’est le seul moyen de le récupérer, nous devons donc vivre avec.

Voyez-le en action!

Nous avons tous fini! Il est maintenant temps de jeter un dernier coup d'œil à la démo.

Démo: Cliquez ici pour lancer la démo en direct.

Conclusion

J'espère que vous avez aimé construire ce petit curseur aussi amusant que moi. J'adore la façon dont cela représente une légère modification d'une vieille idée. C'est assez pratique et vous permet vraiment de pousser vos curseurs un peu plus loin.

Laissez un commentaire ci-dessous et dites-nous ce que vous pensez. Avez-vous déjà vu un curseur se séparer de la sorte? Comment pourriez-vous l'améliorer?