Créer des animations slick ui

Sep 12, 2025

Comment

[dix] [dix] [dix]

[dix]

De plus en plus fréquemment, des concepteurs et des développeurs reconnaissent l'importance de la conception de mouvement dans le contexte de expérience utilisateur . L'animation sur le Web n'est plus un moyen de ravir et de wow l'utilisateur, mais un outil fonctionnel qui facilite les expériences, amusantes et mémorables. Et il existe un certain nombre d'outils et d'approches différents disponibles, de Animation CSS Techniques utilisant Bootstrap ou HTML.

[dix]

L'animation dans le contexte des interfaces utilisateur est toujours un très nouveau champ. Il n'y a pas beaucoup de ressources qui enseigne la meilleure pratique ou montrent des schémas courants d'une animation d'interface utilisateur que nous pouvons suivre. La plupart du temps, il s'agit de l'expérimentation, Test de l'utilisateur et peut-être un peu d'essai et d'erreur.

15 tutoriels de conception Web réactifs

Donc, dans ce tutoriel, nous créerons quelque chose qui ne confondra pas, suit des modèles courants et est élégant. Ce sera la section de profil de l'équipe que vous voyez souvent sur les sites Web de l'entreprise. L'idée est de montrer un peu plus d'informations sur l'équipe / membre du personnel lorsque chacun est survolé. Tout au long du tutoriel, nous utiliserons CodePen, mais vous pouvez bien sûr utiliser votre propre éditeur et votre environnement de développement préféré. N'oubliez pas que la création d'un site plus complexe pourrait changer votre hébergement Web A besoin d'être donc sûr que vous avez un service qui fonctionne pour vous.

Souhaitez-vous un outil simple pour faire un site? Utiliser un brillant Générateur de site Web .

01. Get Mise en place

Commencez par ouvrir CodePen et créer un nouveau stylo. Nous allons utiliser BootsTrap 4 et Sass (.scss), assurez-vous donc que dans les réglages, vous incluez la BOOTSTRAP CSS et JS comme liens de ressources et définissez également le CSS sur SCSS. Une autre liaison de ressources dont vous aurez besoin d'ajouter est la police géniale, ce que nous utiliserons pour nos icônes sociales.

[dix]

02. Créer des conteneurs, des rangées et des colonnes

Les conteneurs sont ce que Bootstrap utilise comme élément de mise en page de base et qu'elles sont nécessaires lorsque vous utilisez le système de grille par défaut. Dans des conteneurs, vous devez ajouter une rangée. Les lignes sont des emballages pour les colonnes et vous pouvez spécifier le nombre de colonnes que vous souhaitez sortir d'une éventuelle 12 et quel sera le point d'arrêt. Dans notre cas, nous voulons un élément qui a un point d'arrêt de taille moyenne et remplit trois colonnes de largeur.

 & lt; div class = "conteneur" & gt;
 & lt; div class = "rangée" & gt;
 & lt; div class = "col-md-3" & gt;
 & lt;! - Ajouter un lien d'image et la couleur ici
 & lt; / div et gt;
 & lt; / div et gt;
& lt; / div & gt;

03. Définir l'image de profil et la couleur

Le premier élément de l'interface utilisateur du profil que nous allons commencer sera pour un membre de l'équipe féminine et elle fera partie de l'équipe bleue. La couleur sera spécifiée à l'aide d'une classe appelée bleue et la couleur réelle sera éventuellement définie à l'aide de variables Sass, que nous ferons dans une étape ultérieure. Ensuite, nous devrons ajouter une photo et leur donner une classe appelée photo.

 & lt; div class = "Team Blue" & GT;
    & lt; div class = "photo" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / div et gt;
& lt; / div & gt;

04. Ajouter le nom du profil et le titre

The beginning of creating a team member entry showing that a team member photo, job description and social media information. — Un dernier morceau de HTML ajoutera un nom, un titre et des icônes sociales

Le dernier bit de HTML à ajouter sera pour le nom, le titre et les icônes sociales, qui seront ajoutés sous la dernière balise DIV que nous venons d'ajouter à la dernière étape. Pour les icônes sociales, nous utiliserons des polices géniales et elles seront placées dans une liste non ordonnée.

 & lt; div class = "profil-txt" & gt;
      & lt; h1 classe = "titre" & gt; libby & lt; / h1 & gt;
      & lt; span class = "Position" & GT; Web Designer & Lt; / span & gt;
   & lt; / div et gt;
          & lt; ul classe = "icônes sociales" & gt;
       & lt; li & gt; & lt; un href = "" Classe = "Fa Fa-Facebook" & GT; & LT; & A & GT; & lt; / li & gt;
       & lt; li & gt; & lt; un href = "" Classe = "Fa Fa-Twitter" & GT; & LT; / A & GT; & lt; / li & gt;
       & lt; li & gt; & lt; une href = "" Classe = "Fa Fa-Linkedin" & GT; & LT; / A & GT; & lt; / li & gt;
       & lt; li & gt; & lt; un href = "" Classe = "Fa Fa-Dribbble" & GT; & lt; / A & GT; & lt; / Li & GT;
    & lt; / ul & gt;
 & lt; / div et gt;
& lt; / div & gt;

05. Définir des variables Sass

Si vous suivez l'utilisation de CodePen, vous aurez déjà des sass installé et prêts à partir. Il vous suffit de cliquer sur l'icône / Bouton Paramètres de stylo et choisissez SCSS comme prétraiteur CSS. Ensuite, nous pouvons aller de l'avant et ajouter des variables qui stockeront toutes nos couleurs. Nous avons utilisé RGBA comme valeurs de couleur pour nous permettre un contrôle plus significatif de toutes les couleurs 'Opacité.

 BLUEGRAIENT: RGBA (103, 188, 223 ,,,8);
$ LightGreen: RGBA (188, 219, 183, .5);
Green: RGBA (119, 180, 109, 0.5);
$ frontière verte: rgba (171, 221, 164, 0.5);
$ bleu: rgba (80, 205, 227, 1);
$ frontière bleue: RGBA (147, 223, 236, 1);

06. Télécharger une image d'arrière-plan

Pour que les choses semblent plus attrayantes, nous allons placer une belle image de fond sur le corps. Ici, nous pouvons utiliser notre premier ensemble de variables et donner l'image de fond une superposition de gradient agréable qui va de vert clair au bleu. Ensuite, pour rendre notre image de fond pleinement réactive, nous allons définir la hauteur de la vue à 100vh.

 Corps {
 Contexte: gradient linéaire (à droite, $ lightgreen, $ bluegradien), URL ('https://image.ibb.co/mdpu7/clouds_cornfield_countryside_158827.jpg') Centre no-répéter;
 Taille de fond: couverture;
 Position: relatif;
 Hauteur: 100vh;
 }

07. Choisissez un fond de profil et de l'image

Chaque profil de l'équipe recevra les mêmes styles et l'équipe de classe sera utilisée pour cela. L'arrière-plan sera blanc, tout le contenu centré sur le contenu et nous devons nous assurer que la position est définie sur relatif. Ensuite, nous pouvons inclure le CSS pour l'image de profil. Pour de meilleurs résultats, assurez-vous que l'image d'origine que vous utilisez a des dimensions de plus grand que 200px carré. Cependant, nous allons changer la hauteur et la largeur de ceux-ci dans la règle de la photo CSS.

[dix]

 .team {
 rembourrage: 30px 0 40px;
 Marge-top: 60px;
 Contexte: #fff;
 Texte-Aligner: Centre;
 débordement caché;
 Position: relatif;
 curseur: pointeur;
 Box-Shadow: 0 0 25PX 1PX RGBA (0,0,0,0,3);
 .photo {
 Affichage: Inline-Block;
 largeur: 130px;
 Hauteur: 130px;
 marge-bas: 50px;
 Position: relatif;
 z-index: 1;
 }
 }

08. Ajouter les animations

An image show that the rollover animation bringing down a coloured circle from the top of the frame. — Nous pouvons contrôler la quantité de cercle bleue peut être vu en définissant un pourcentage de fond pour sa position

Le premier morceau d'animation que nous ajouterons sera au sommet de notre élément de profil. L'idée est que lorsque nous parcourons tout l'élément, une forme circulaire bleue animera. Nous pouvons contrôler la quantité de bleu que nous pouvons voir en spécifiant la position de cela pour avoir un pourcentage de fond. Alors jouez avec ce pourcentage et vous aurez une meilleure idée de la façon dont cela fonctionne. Vous ne savez jamais: vous pourriez même découvrir un meilleur effet!

 .blue .Photo: avant {
 teneur: "";
 largeur: 100%;
 Hauteur: 0px;
 Rayon frontalier: 50%;
 Contexte: $ bleu;
 Position: absolu;
 bas: 130%;
 droite: 0;
 à gauche: 0;
 transformer: échelle (3);
 Transition: Tous .3s linéaires 0s;
}
.Team: Hover .Photo: Avant {
 Hauteur: 100%;
}

09. Animez la photo de l'équipe

La photo de l'équipe est notre point focal dans cette UI et est probablement l'élément le plus évident que vous vous attendez à animer sous une forme ou une forme. Le CSS que nous allons ajouter à cette étape allumera d'abord la photo en un cercle plus petit, puis lorsqu'il sera planifié là-bas, une bordure bleue bleue sera ajoutée et la photo s'allumera avec la frontière. Avec les transitions ajoutées, nous obtenons une belle animation de fluide.

 .blue .pic: après {
 teneur: "";
 largeur: 100%;
 Hauteur: 100%;
 Rayon frontalier: 50%;
 Contexte: $ bleu;
 Position: absolu;
 TOP: 0;
 à gauche: 0;
 z-index: 1;
}
.Team .photo img {
 largeur: 100%;
 Hauteur: auto;
 Rayon frontalier: 50%;
 transformer: échelle (1);
 Transition: toutes les 0,9 ans facilitent 0s;
}
.blue: Survolez .Photo img {
 Box-Shadow: 0 0 0 14PX $ BRANDE BLUELLE;
 transformer: échelle (0,6);
 }

10. Tweak le nom du profil et la position

An image showing the half completed rollover animation, showing the team member photo shrinking and generating a thick border. — Lorsqu'il survolé, une bordure bleue bleue sera ajoutée à la photo

Le nom de profil et la position ont besoin d'un peu de rangement. Ceux-ci ne seront pas animés mais qui ne devraient pas vous empêcher d'ajouter votre propre animation à celles-ci si vous le souhaitez. Peut-être les augmentes légèrement sur Survol, car vous aurez assez de place en raison du redimensionnement de la photo.

.profile-txt {
 marge-bas: 30px;
 .Titre {
 Taille de la police: 2REM;
 Poids de la police: 700;
 Couleur: # 333;
 Espacement des lettres: 1.5px;
 Texte-transformation: capitaliser;
 marge-bas: 6px;
 }
 .positionner{
 bloc de visualisation;
 Taille de la police: 1rem;
 Couleur: # 555;
 }
}

11. Ajouter des icônes sociales

Les icônes sociales seront d'abord positionnées au bas de la page par -100px. Ensuite, lorsque nous allons survolez-le, la position inférieure sera réglée sur zéro et avec une transition ajoutée, cela nous donnera une belle animation lisse au fur et à mesure qu'elle remonte à la vue. Les icônes recevront leur propre état de survol, fixant leur arrière-plan au blanc et l'icône au bleu.

 .blue .social-icons {
 largeur: 100%;
 Style de liste: Aucun;
 rembourrage: 0;
 marge: 0;
 Contexte: $ bleu;
 Position: absolu;
 bas: -100px;
 à gauche: 0;
 Transition: toutes les 0.6s facilité;
 li {
 Affichage: Inline-Block;
 
 une {
 bloc de visualisation;
 PADING: 8PX;
 Taille de la police: 1rem;
 Couleur: #fff;
 Texte-Décoration: Aucun;
 Transition: toutes les 0,5% facilité;
 & amp ;: Hover {
 Couleur: $ bleue;
 Contexte: #fff;
 }
 }
 }
}
.Team: survoler .social-icons {
 bas: 0px;
}

12. Faire le membre de l'équipe verte

Pour mélanger un peu les choses, nous pouvons commencer à ajouter plus de membres à notre équipe. La couleur que nous utiliserons pour cela suivant sera verte. Mais d'abord revenir à la section / fichier HTML et tout ce que nous avons à faire est de copier la classe COL-MD-3 - pas la ligne - non à la dernière étiquette DIV sous les icônes sociales et en coller.

 & lt; div class = "Team Green" & GT;
 & lt; div class = "photo" & gt;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" alt = "libby" & gt;
 & lt; / div & gt;

Une fois que vous avez changé la classe bleue en vert, nous pouvons enfin ajouter dans tous les CSS qui nous donneront la même animation.

 .Green: survolez .Photo img {
 Box-Shadow: 0 0 0 14 px $ frontière verte;
 transformer: échelle (0,6);
 }
.Green .Photo: avant {
 teneur: "";
 largeur: 100%;
 Hauteur: 0px;
 Rayon frontalier: 50%;
 Contexte: $ vert;
 Position: absolu;
 bas: 135%;
 droite: 0;
 à gauche: 0;
 transformer: échelle (3);
 Transition: Tous .3s linéaires 0s;
}
.green .social-icons {
 largeur: 100%;
 Style de liste: Aucun;
 rembourrage: 0;
 marge: 0;
 Contexte: $ vert;
 Position: absolu;
 bas: -100px;
 à gauche: 0;
 Transition: toutes les 0.6s facilité;
 li {
 Affichage: Inline-Block;
 une {
 bloc de visualisation;
 PADING: 8PX;
 Taille de la police: 1rem;
 Couleur: #fff;
 Texte-Décoration: Aucun;
 Transition: toutes les 0,5% facilité;
 & amp ;: Hover {
 Couleur: $ vert;
 Contexte: #fff;
 }
 }
 }
}

Et la beauté de cette approche est que vous pouvez répéter si nécessaire pour de nombreuses classes de couleurs différentes, ce qui vous permet de remettre à thème subtilement vos animations d'interface utilisateur nécessaires.

Si vous construisez un site avec une équipe, assurez-vous de devenir fiable, sécurisé stockage en ligne garder les choses cohérentes.

Cet article a été publié à l'origine dans le numéro 307 de rapporter , le magazine le plus vendu au monde pour les concepteurs et les développeurs Web. Acheter numéro 307 ou Abonnez-vous au NET .

Vous voulez en savoir plus sur les instantanés de l'animation de l'interface utilisateur?

Steven Roberts is giving his talk CSS Animation: Beyond Transitions at Generate London from 19-21 September 2018. — Steven Roberts donne à son animation de Talk CSS: Au-delà des transitions de Generate London

Si vous souhaitez apprendre davantage sur la manière dont vous pouvez rendre vos sites Pop et Sparkle à l'aide d'une animation d'UI élégante, assurez-vous que vous avez pris votre billet pour votre billet pour Générer London .

Un concepteur de front-end et un développeur travaillant actuellement en tant que développeur créatif pour asemblr.com, Steven Roberts fournira son animation Talk-CSS: Au-delà des transitions - dans lesquelles il vous montrera les meilleurs outils pour le travail et recréer certaines des meilleures animations Le Web a à offrir, tout en découvrant les possibilités et les limites d'animation avec seulement CSS.

Generate London a lieu du 19 au 21 septembre 2018. Obtenez votre billet maintenant .

Articles Liés:

Comment utiliser l'animation dans les applications mobiles
Le guide de Pro pour la conception de l'UI
Un guide de débutant pour concevoir des animations d'interface

[dix] [dix]

[dix]

Créer des animations slick ui

01. Get Mise en place

02. Créer des conteneurs, des rangées et des colonnes

03. Définir l'image de profil et la couleur

04. Ajouter le nom du profil et le titre

05. Définir des variables Sass

06. Télécharger une image d'arrière-plan

07. Choisissez un fond de profil et de l'image

08. Ajouter les animations

09. Animez la photo de l'équipe

10. Tweak le nom du profil et la position

11. Ajouter des icônes sociales

12. Faire le membre de l'équipe verte

Vous voulez en savoir plus sur les instantanés de l'animation de l'interface utilisateur?

Comment - Most Popular Articles

Adobe Fresco Tutoriel: Créez un portrait dans l'application de peinture

Comment affiner votre portefeuille de conception

Comprendre le traitement des langues naturelles

Comment faire et utiliser un mahlstick pour la peinture

Comment traiter un visage pour l'animation

Comment configurer le thème du site avec des variables CSS

Comment créer des contrôles de plate-forme personnalisés dans Maya

Créer des textures organiques dans l'encre

Catégories