Le design réactif est omniprésent, et que vous utilisiez un framework ou que vous écriviez vous-même des requêtes sur les médias, certains éléments de votre page sont susceptibles de bouger ou de se redimensionner.
Si vos requêtes de médias sont basées sur les dimensions du navigateur et que le navigateur est redimensionné, vos éléments se mettront en place. Ajouter une petite animation à ces propriétés est une bonne idée pour tout site réactif.
Aujourd'hui, je vais vous montrer à quel point il est facile d'ajouter cette touche supplémentaire en animant la largeur et l'opacité des éléments entre les requêtes multimédia.
Pour cet exemple simple, nous utiliserons un div contenant 3 divs plus petits. Les divs seront mis à l'échelle en fonction de la taille de la fenêtre du navigateur. Le HTML est simple:
Maintenant, notre CSS principal placera les trois cases à l'intérieur du div principal et aussi, en ligne avec une marge à droite:
.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}Ceci est notre mise en page principale, sans requêtes média, cette mise en page ne s’adapte pas si la fenêtre change. Maintenant que nous avons les bases en place, ajoutons les requêtes média.
Les requêtes médias sont fréquemment utilisées de nos jours. La plupart des concepteurs Web les comprennent, mais au cas où ce serait la première fois, voici un rappel rapide: les requêtes multimédias vérifient la capacité du périphérique que vous utilisez (largeur, orientation et résolution) et exécutent des CSS spécifiques si les conditions spécifiées pour le média requête sont remplies. Dans notre exemple, nous utiliserons deux requêtes multimédias qui vérifieront si le navigateur est plus petit que 960px et si sa taille est inférieure à 660px. Nous allons ensuite définir la largeur des éléments en conséquence, nous cacherons également le dernier div enfant afin que les deux autres aient plus d'espace:
@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}C'est tout ce dont nous avons besoin pour nos requêtes médiatiques. Notez qu'il est important que ce code soit placé sous le code CSS d'origine ci-dessus afin que les requêtes de média écrasent le code au-dessus. Si vous testez votre fichier maintenant, vous verrez la taille du changement de divs et l'opacité du dernier div enfant changer lorsque vous redimensionnez la fenêtre du navigateur.
Vous remarquerez que pour masquer la dernière div enfant, nous définissons son opacité sur 0 au lieu de la définir pour afficher: none. C'est parce que nous voulons pouvoir animer la propriété; l'opacité a beaucoup de degrés différents, alors que l'affichage est vrai ou faux (et ne peut donc pas être animé).
Les animations CSS se sont avérées très utiles lors de l'exécution de ces petites animations que nous utilisions dans jQuery, telles que l'animation des couleurs, de la largeur et de l'opacité.
Parce que nous voulons que la page s'anime dans son ensemble, nous utilisons le sélecteur * CSS et nous configurons notre animation. Les animations CSS se dégradent avec élégance, mais vous souhaitez également ajouter les préfixes du fournisseur, de manière à prendre en charge le plus possible:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Vous pouvez voir le résultat final ici.
L'ajout d'animations simples comme celles-ci est une belle touche finale à tout site Web. Quelques lignes de code ajoutent une touche très agréable à votre site responsive.
Avez-vous animé des requêtes médiatiques dans un projet? Quels effets avez-vous obtenus? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image à l'échelle via Shutterstock.