Comment utiliser CSS, D3 et GSAP pour implémenter le chargeur de barres horizontales (code source ci-joint)

Le contenu de cet article explique comment utiliser CSS, D3 et GSAP pour implémenter le chargeur de barres horizontales (code source ci-joint). J'espère qu'il le fera. vous être utile.

Aperçu de l'effet

Téléchargement du code source

https://github.com/comehope/front-end-daily -challenges

Interprétation du code

Définir dom, le conteneur contient 1 span élément :

<div>
    <span></span>
</div>

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

Définir la taille du conteneur :

.loader {
    width: 40em;
    height: 1em;
    font-size: 10px;
}

Définissez le style de span dans le conteneur, qui est une barre fine et colorée :

.loader {
    position: relative;
}

.loader span {
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: hsl(24, 100%, 65%);
}

Introduisez d3.js :

<script></script>

Supprimez l'élément span dans le dom et créez-le en utilisant d3 à la place. La constante COUNT est le nombre de barres fines. Parce que les données générées par d3.range() sont une séquence commençant à 0, les données sont. corrigé quotidiennement La séquence habituelle à partir de 1 :

const COUNT = 1;

d3.select('.loader')
    .selectAll('span')
    .data(d3.range(COUNT).map(d => d + 1))
    .enter()
    .append('span')

Supprimez le code qui définit l'attribut span élément background-color en CSS et utilisez les paramètres d3 à la place :

d3.select('.loader')
    .selectAll('span')
    .data(d3.range(COUNT).map(d => d + 1))
    .enter()
    .append('span')
    .style('background-color', `hsl(24, 100%, 65%)`)

pour rendre le mince Changez le nombre de barres à 2, et changez la couleur en génération dynamique :

const HUE_DEG = 12;
const COUNT = 2;

d3.select('.loader')
    /* ...略 */
    .style('background-color', (d) => `hsl(${d * HUE_DEG}, 100%, 65%)`)

Allez plus loin, changez la couleur en barres de couleur et barres noires pour apparaître à intervalles réguliers. la valeur de la teinte dans l'expression est de 12 incréments, mais l'effet réel est que la différence de teinte entre les bandes colorées est de 24, car il y a des bandes noires mélangées :

d3.select('.loader')
    /* ...略 */
    .style('background-color', (d) => d % 2 !== 0
        ? `hsl(${d * HUE_DEG}, 100%, 65%)`
        : 'black');

À ce moment, la dynamique La structure dom générée est :

<p>
    <span></span>
    <span>
</span></p>

Introduire la bibliothèque gsap :

<script></script>

Ajouter l'effet d'animation des bandes s'étendant du centre vers les deux côtés :

let animation = new TimelineMax({repeat: -1});
animation.staggerFrom('.loader span', 0.5, {scaleX: 0}, 0.4)

Enfin, changez le nombre de bandes à 30, ce qui est obtenu en divisant les 360 degrés de l'ensemble du cercle de teinte par l'intervalle de teinte :

const COUNT = 360 / HUE_DEG;

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour implémenter l'effet de bouton permettant de se déplacer vers la droite lors du survol (code source ci-joint)

Comment utiliser CSS et GSAP pour l'implémenter Animation continue avec plusieurs images clés (code source ci-joint)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!