GlowPlayアニメーションの実装方法｜ホバーで動画再生＆明るさ調整

動画を活用したWebデザインは、視覚的なインパクトが強く、ユーザーの興味を引きやすい効果的な手法です。
今回は、ホバー時に「動画が再生され、同時に明るさが変化する」アニメーション、GlowPlay の実装方法を解説します。

CodePenのデモも用意しているので、ぜひ参考にしてみてください。

🔹 GlowPlayとは？

GlowPlay は以下の2つの効果を組み合わせたアニメーションです。
✅ ホバー時に動画が再生される
✅ ホバー時に動画が明るくなる

これにより、ユーザーが意図的にアクションを起こした際に、動画が目立ち、注目度がアップします。

🔹 デモ (CodePen)

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

🔹 実装方法

① HTML

HTMLでは、動画を配置するだけのシンプルな構成です。

<div class="video-container">
    <video class="video" muted loop>
        <source src="https://codequest.work/movie/orectic-movie1.mp4" type="video/mp4">
    </video>
</div>
<div class="video-container">
    <video class="video" muted loop>
        <source src="https://codequest.work/movie/orectic-movie2.mp4" type="video/mp4">
    </video>
</div>

② CSS

CSSでは、以下の2つの効果を実装します。

✅ 初期状態で動画を暗く表示
✅ ホバー時に動画を明るく表示

body{
  background-color: #003149;
  margin: 0;
}

.video-container {
    line-height: 0;
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.3); /* 初期状態で暗く */
    transition: filter 0.3s ease;
}

.video-container:hover video {
    filter: brightness(1); /* ホバー時に通常の明るさに */
}

③ JavaScript

JavaScriptでは、ホバー時の動画の再生と停止を制御します。

✅ ホバーで動画が再生開始
✅ ホバー解除で動画は一時停止するが、次回ホバー時に再生位置はそのまま

document.addEventListener('DOMContentLoaded', () => {
    const videos = document.querySelectorAll('.video-container .video');

    videos.forEach(video => {
        const container = video.closest('.video-container');

        container.addEventListener('mouseenter', () => {
            video.play(); // ホバー時に再生開始
        });

        container.addEventListener('mouseleave', () => {
            video.pause(); // ホバー解除でも再生位置を保持
        });
    });
});

🔹 完成イメージ

• ホバー前：動画は暗く表示され、再生されない
• ホバー時：動画が明るくなり、再生が開始される
• ホバーを外しても、再生位置はそのまま保持

🔹 活用シーン

✅ ポートフォリオサイトでのプロジェクト紹介
✅ ECサイトの商品ページでのプロダクトビジュアル
✅ 動画サムネイルのアニメーションエフェクト

🔹 まとめ

GlowPlay アニメーションは、動画を目立たせながら、ユーザーの興味を引きやすい効果的な手法です。
CSSとJavaScriptのシンプルな組み合わせで簡単に実装できるので、ぜひあなたのWebサイトにも取り入れてみてください。