En jouant avec les animations d'images clés du Webkit, j'ai trouvé un moyen de créer un petit curseur d'image génial en utilisant uniquement du CSS. C’est certes un peu non conventionnel, mais c’est un excellent moyen d’apprendre à penser en dehors de la boîte avec ce que vous pouvez faire avec CSS3.
N'oubliez pas que, dans la mesure où nous utilisons des images clés Webkit, il s'agit d'une expérience purement pédagogique qui ne fonctionne que dans Safari ou Chrome. Alors que de plus en plus de navigateurs prennent en charge les animations d’images clés à l’avenir, cette méthode devrait devenir parfaitement utilisable dans vos propres projets Web.
Ce que nous construisons
Diaporama Live Demo: Cliquez ici
Hublot Live Demo: Cliquez ici
Pourquoi Pure CSS?
Avant que quiconque ne soit trop excité, je veux reconnaître que, pour le moment, il s'agit d'un travail pour JavaScript. Bien que certaines âmes rares et confuses parcourent avec JavaScript désactivé, cela laissera un pourcentage beaucoup plus faible de votre auditoire que la méthode actuelle.
Cela dit, je pense qu'il est important et même amusant d'essayer les technologies à venir pour voir comment nous allons coder dans un proche avenir. Comme nous l'avons vu dans notre récent article sur la création d'arrière-plans colorés, Pulsing, les animations Webkit Keyframe étirent vraiment les possibilités offertes par CSS et sont en fait assez faciles à utiliser.
Mise en route: HTML de base
Pour commencer, créons la page comme si elle ne contenait que des éléments statiques. Nous n'allons pas trop nous soucier de créer une conception de page complexe cette fois-ci, mais simplement un simple conteneur avec le diaporama et un titre.
Dans cet esprit, le balisage de ce projet est très simple:
Après cela, vous ne devriez plus avoir qu'une page blanche avec du texte:
CSS de base
Maintenant que notre balisage est entièrement disposé, il est temps de commencer à styliser la page pour la rendre présentable. La première chose que je vais faire est d'ajouter une réinitialisation de marge / remplissage de base, d'appliquer un arrière-plan au corps et de centrer le conteneur.
La réinitialisation aide simplement à effacer tous les préréglages du navigateur et centrer la div est aussi simple que d’appliquer une largeur et de définir les marges gauche et droite sur auto.
Styliser le texte
Maintenant que notre arrière-plan et notre conteneur sont configurés, rendons le titre un peu meilleur. Notre balisage a créé trois sections pour travailler avec: le titre div, le h1 et le paragraphe.
J'ai commencé par appliquer des marges à l'ensemble de la div, en centrant le texte à l'intérieur et en définissant la couleur par défaut en blanc. Après cela, j'ai appliqué un style de police de base (en utilisant un raccourci) aux balises h1 et paragraphe.
Notez que j'ai utilisé 'Josefin Sans' pour la police. Cela provient de la bibliothèque de polices de Google. Pour que cela fonctionne, assurez-vous que cet extrait de code figure dans la section head de votre code HTML.
Et avec cela, notre page commence à être beaucoup plus agréable!
Styliser l'image
Nous devons maintenant appliquer un arrière-plan au diaporama div. Dans la prochaine étape, nous en ferons beaucoup plus avec cela, mais pour l’instant, vous voulez simplement choisir une image de substitution et appliquer une largeur et une hauteur au div.
Notre page est superbe en ce moment. Maintenant que nous avons ce que nous voulons, nous pouvons procéder pour lui donner vie!
Configuration de l'image du diaporama
La manière dont nous allons configurer ce diaporama consiste essentiellement à utiliser une version modifiée des sprites CSS. L'idée est de créer une grande image contenant toutes nos diapositives, puis d'utiliser des animations par images clés pour révéler des parties spécifiques de l'image à certains endroits de l'animation.
Si cela n'a pas encore de sens, ne vous inquiétez pas, c'est beaucoup plus facile que vous ne le pensez! Pour commencer, nous devons aller dans Photoshop et construire notre image. Maintenant, étant donné que la taille que nous avons définie ci-dessus pour le diaporama mesure 465 pixels de large sur 300 pixels de haut, nous devons créer un document Photoshop de 930 pixels de 600 pixels (double la largeur et la hauteur). Cela nous donnera assez d'espace pour quatre images. Si vous voulez plus d'images, agrandissez-les simplement!
À partir de là, vous souhaitez déposer quatre images de 465 pixels sur 300 pixels chacune. Placez-les dans une grille sans espace et sauvegardez un fichier JPG en taille réelle. Votre résultat devrait ressembler à l'image ci-dessous.
Diaporama CSS
Les animations Webkit Keyframe sont très simples à utiliser. Tout ce que vous avez à faire est de choisir quelque chose à animer, puis de définir l'état de cet élément à différents points de l'animation, définis par des pourcentages. Ainsi, si vous définissez la largeur d'une div sur 100px à 0%, 50px sur 50% et 10px sur 100%, la div diminuera au cours de l'animation.
Aujourd'hui, nous allons animer la propriété background-position. Notre diaporama est configuré pour ne montrer que le quadrant supérieur gauche de notre image par défaut et nous pouvons utiliser la position de l’arrière-plan pour la déplacer et montrer les autres.
Pour visualiser cela, décrivez notre page Web comme un fond sombre avec un trou rectangulaire coupé. L'image que nous venons de créer est ensuite placée sous ce trou et nous allons la déplacer.
Premièrement, nous voulons aller de l’image en haut à gauche à l’image en haut à droite, nous allons donc définir le «droit». valeur (le premier nombre) à la largeur négative d’une image (465px). Ensuite, nous mettons en place le? valeur (la deuxième valeur) à la hauteur négative d’une image (300px). Enfin, nous restons à -300 sur la hauteur, mais nous ramenons la bonne valeur à zéro. Cela aura pour effet d'afficher l'image en haut à gauche, l'image en haut à droite, l'image en bas à droite, puis l'image en bas à gauche.
Remarquez que j’ai lancé un peu la boule courbe et que tout est réglé sur 0 à 10%. C’est parce que je n’ai pas aimé que le diaporama commence tout de suite sans vous donner une chance de regarder la première image. Cela crée simplement une brève pause.
En outre, l'un des éléments les plus importants ici est la syntaxe au début:? @ - webkit-keyframes slider ?. Les? @ - webkit-keyframes? partie indique au navigateur ce que vous définissez avec le code ci-dessous mais avec le curseur? la partie est un titre personnalisable que vous donnez à l'animation. Cela peut être ce que vous voulez, mais n'oubliez pas de l'utiliser à nouveau lors de la prochaine étape lorsque nous activerons cette animation.
Activer le diaporama
Le lancement du CSS ci-dessus définit le comportement du diaporama, mais ne l’active pas. Pour ce faire, vous devez ajouter une nouvelle ligne à votre diaporama.
Ici, j'ai appelé le curseur? l'animation que nous venons de définir, puis définissez la durée sur 20 secondes, les itérations sur l'infini et la direction sur laquelle alterner (une fois l'animation terminée, elle reviendra au début).
Démo
Avec ça, nous avons tous fini! Consultez la démo en direct pour la voir en action. Encore une fois, assurez-vous que vous utilisez Safari ou Chrome.
Exécution alternative: effet de hublot
Notez que cette technique n'utilise pas réellement plusieurs images, mais consiste simplement à effectuer un panoramique autour d'une seule image. Pour cette raison, vous pouvez obtenir un effet vraiment cool en utilisant simplement une grande photo.
Pour voir comment cela fonctionne, j'ai saisi une image sous-marine et modifié la page ci-dessus pour créer une sorte de hublot océanique. Le code est indiqué ci-dessous. Notez que cette fois, au lieu de faire démarrer automatiquement l'animation, elle ne se produit que lorsque l'utilisateur survole l'image.
Pour le style, j'ai simplement arrondi les coins de la div afin que ce soit un cercle et appliqué un jeu d'ombre de boîte à insérer pour lui donner cet aspect découpé.
Démo
Pour voir la démo du hublot, cliquez sur l'image ci-dessous.
Conclusion
En résumé, les animations de la boîte à outils Webkit recèlent un potentiel considérable pour rendre les pages Web extrêmement dynamiques sans utiliser le moindre JavaScript. Typiquement, ce type d’effet nécessiterait une bonne quantité de code, mais avec CSS, c’est incroyablement facile.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez de l'effet. Êtes-vous heureux que CSS développe actuellement ce type de comportement ou pensez-vous que cela devrait toujours être le travail de JavaScript? Laissez nous savoir!