So verwenden Sie CSS, D3 und GSAP, um einen horizontalen Balkenlader zu implementieren (Quellcode beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS, D3 und GSAP zur Implementierung des horizontalen Balkenladers (Quellcode im Anhang). Ich hoffe, dass dies der Fall ist hilfreich sein.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, der Container enthält 1 span Element:

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

Zentrierte Anzeige:

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

Containergröße definieren:

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

Legen Sie den Stil von span im Container fest, der ein bunter schmaler Balken ist:

.loader {
    position: relative;
}

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

Führen Sie d3.js ein:

<script></script>

Löschen Sie das span im dom-Elemente werden stattdessen mit d3 erstellt, wobei die Konstante COUNT die Anzahl der schlanken Balken ist. Da es sich bei den von d3.range() generierten Daten um eine Sequenz handelt, die bei 0 beginnt, werden die Daten entsprechend den täglichen Gewohnheiten auf eine Sequenz korrigiert, die bei 1 beginnt :

const COUNT = 1;

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

Löschen Sie den Code, der das span-Element-background-color-Attribut in CSS festlegt, und verwenden Sie stattdessen die D3-Einstellungen:

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

Ändern Sie die Anzahl der schlanken Balken auf 2 und ändern Sie die Farbe in Dynamische Generierung:

const HUE_DEG = 12;
const COUNT = 2;

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

Gehen Sie einen Schritt weiter und ändern Sie die Farbe, sodass die farbigen und schwarzen Balken in Abständen angezeigt werden. Bitte beachten Sie, dass der tatsächliche Effekt zwar um 12 erhöht wird Der Unterschied im Farbton beträgt 24, da er mit langen schwarzen Balken gemischt ist:

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

Zu diesem Zeitpunkt ist die dynamisch generierte Dom-Struktur:

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

Wir stellen vor gsap-Bibliothek:

<script></script>

Fügen Sie lange Balken hinzu. Animationseffekt, der sich von der Mitte nach beiden Seiten erstreckt:

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

Ändern Sie abschließend die Anzahl der Streifen auf 30, die durch Teilen der 360 Grad erhalten wird des gesamten Farbtonkreises um das Farbtonintervall:

const COUNT = 360 / HUE_DEG;

Fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Schaltflächeneffekt zu implementieren, der beim Bewegen des Mauszeigers nach rechts entsteht (Quellcode im Anhang)

Verwendung CSS und GSAP zur Implementierung. Kontinuierliche Animation mit mehreren Keyframes (Quellcode im Anhang)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, D3 und GSAP, um einen horizontalen Balkenlader zu implementieren (Quellcode beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!