Speed Lineアニメーションの作り方｜CSSとJavaScriptで動きをデザイン

Webサイトにスピード感を演出する「Speed Line」アニメーションは、視覚的なインパクトを与えるだけでなく、モダンなデザインとして注目されています。本記事では、CSSとJavaScriptを使ったSpeed Lineアニメーションの作成方法を初心者向けに解説します。

1. Speed Lineアニメーションとは？

Speed Lineアニメーションは、画面上にスピード感のある線が描かれるエフェクトです。これを使用することで、以下のような効果が期待できます：

Webサイトの視覚的インパクトを向上
ユーザーの注目を引く
ダイナミックなコンテンツと調和

このアニメーションは、CSSの@keyframesで基本的な動きを作成し、JavaScriptを使って動的な要素を追加することで実現します。

2. 必要な準備

Speed Lineアニメーションを作成するには、以下の環境が必要です：

HTML（基本的な構造を定義）
CSS（アニメーションのデザイン）
JavaScript（ランダム性や動的な動きを追加）

準備ができたら、実装に進みましょう。

See the Pen speedLine by masakazuimai (@masakazuimai) on CodePen.

応用例：特定の要素が画面内に入った際に発動

Speed Lineアニメーションは、特定のボタンやセクションがスクロールで画面に入ったタイミングで発動させることも可能です。このような動作は、視覚的なアクセントを追加するだけでなく、ユーザーの注目を集める効果的な手法です。

実装手順

以下のステップで、スクロールイベントを利用してアニメーションを発動します。

対象の要素をHTMLに追加
ボタンやセクションを追加します。
Intersection Observer APIを使用
要素が画面内に入った際にアニメーションを発動します。
Speed Lineの作成をトリガー
入った要素に応じてSpeed Lineを表示。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Speed Line Trigger Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <h1>スクロールしてボタンを見つけてください</h1>
        <div class="spacer"></div>
        <button class="target-button">クリックしてください</button>
        <div class="spacer"></div>
    </div>
    <div class="loading-container"></div>
    <script src="script.js"></script>
</body>
</html>

body {
    margin: 0;
    padding: 0;
    background: black;
    color: white;
    font-family: Arial, sans-serif;
}

.content {
    text-align: center;
    padding: 50px;
}

.spacer {
    height: 500px; /* 空間を確保 */
}

.target-button {
    padding: 10px 20px;
    font-size: 18px;
    background: #1E88A8;
    color: white;
    border: none;
    cursor: pointer;
}

.loading-container {
    position: relative;
    width: 100%;
    height: 100vh;
    pointer-events: none; /* 操作不能にする */
}

.line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #1E88A8;
    animation: speedLine 2s linear forwards;
}

@keyframes speedLine {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

const container = document.querySelector('.loading-container');

// Speed Lineを作成する関数
function createLine(topPosition) {
    const line = document.createElement('div');
    line.className = 'line';
    line.style.top = `${topPosition}px`;
    container.appendChild(line);

    setTimeout(() => {
        line.remove();
    }, 2000); // アニメーション終了後に削除
}

// Intersection Observerを設定
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            // 要素が画面内に入ったときにSpeed Lineを生成
            const rect = entry.target.getBoundingClientRect();
            createLine(rect.top + window.scrollY);
        }
    });
});

// 対象のボタンを監視
const targetButton = document.querySelector('.target-button');
observer.observe(targetButton);

解説

Intersection Observer APIの利用
- スクロールで特定の要素が画面内に入ったかどうかを監視します。
Speed Lineの発動
- 要素が画面内に入ったタイミングで、アニメーションをトリガーする関数createLineを実行。
アニメーションの削除
- アニメーションが完了した後、不要な要素を削除してパフォーマンスを最適化します。

応用例のポイント

ボタンの強調: ボタンが画面内に入るタイミングでSpeed Lineを発動し、クリックを誘導。
セクション演出: 複数の要素を監視することで、ページ全体でスムーズな演出を実現可能。

この手法を活用すれば、より魅力的なWebサイトを構築できます！必要に応じて修正ください。

5. まとめ

Speed Lineアニメーションは、CSSとJavaScriptを組み合わせることで簡単に実装できます。基本的なエフェクトにランダム性やカラフルな演出を加えることで、オリジナリティを持たせることも可能です。

この記事を参考に、あなたのWebサイトにSpeed Lineアニメーションを取り入れてみてください！

✪ 画像素材がないものはランダムで表示されるようになっています。フリー素材などでご用意ください。

プラグイン名	特徴
GoFullPage	ウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。
ColorZilla	色を抽出するための拡張機能です。
WhatFont	ウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。
PerfectPixel	デザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。

ステップ	内容
ステップ 1	構図を手書きか全画面スクショ（Go full page等）した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。
ステップ 2	HTMLの基本構造を作成する
ステップ 3	CSSでレイアウトを模写する
ステップ 4 中級〜	JavaScriptを追加して動きを再現する
ステップ 5	最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。

目次