CSS、D3、GSAPを使用して水平バーローダーを実装する方法（ソースコード添付）

この記事の内容は、CSS、D3、GSAP を使用して水平バーローダーを実装する方法に関するものです (ソースコードが添付されています)。必要な方は参考にしていただければ幸いです。あなたのお役に立てますように。

エフェクトのプレビュー

ソース コードのダウンロード

https://github.com/comehop​​e/front-end-daily -challenges

コード解釈

domを定義します。コンテナには1つのspan要素が含まれます:

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

中央表示:

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

定義コンテナのサイズ:

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

コンテナ内に span のスタイルを設定します。これはカラフルな細いバーです:

.loader {
    position: relative;
}

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

d3.js を導入します:

<script></script>

dom 内の span 要素を削除し、代わりに d3 を使用して作成します。データは d3.range( によって生成されるため、定数 COUNT は細いストリップの数です。 ) 0から始まるシーケンスなので、日々の習慣に合わせて1から始まるシーケンスにデータを修正します:

const COUNT = 1;

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

span要素を削除します background- CSS で設定した color 属性コードについては、代わりに d3 設定を使用します:

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

細いバーの数を 2 に変更し、色を動的生成に変更します:

const HUE_DEG = 12;
const COUNT = 2;

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

Goさらに、色をカラーバーに変更すると、黒いバーが間隔を置いて表示されます。式内の色相の値は 12 ずつ増加しますが、実際に見られる効果は、カラーバー間の色相の差が 24 であることに注意してください。長い黒いバーが混在しています:

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

この時点で動的に生成される dom 構造は次のとおりです:

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

gsap ライブラリを導入します:

<script></script>

ストリップのアニメーション効果を追加します中心から両側に伸びる:

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

最後に、色相環全体の 360 度を色相間隔で割ることによって得られるストリップの数を 30 に変更します:

const COUNT = 360 / HUE_DEG;

これで完了です!

関連する推奨事項:

純粋な CSS を使用して、ホバー時に右に移動するボタン効果を実装する方法 (ソース コードが添付されています)

使用方法CSSとGSAPで実装 複数キーフレームによる連続アニメーション（ソースコード添付）

以上がCSS、D3、GSAPを使用して水平バーローダーを実装する方法（ソースコード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。