CrossGlide：上下スクロール中に画像がすり替わるスタイリッシュなアニメーションを実装しよう
Webサイトに動きのあるビジュアル要素を取り入れたいとき、スクロールに連動するアニメーションは非常に効果的です。
この記事では、上下の画像リストが無限スクロールしながら、自動で画像が入れ替わる「CrossGlide」アニメーションの仕組みと実装方法をご紹介します。
🔄 CrossGlideとは？
「CrossGlide」は、以下のような特徴を持つアニメーションです：
- 上下にスクロールする2つの画像トラック
- 指定位置（画面右寄り）で自動的に画像をすり替え
- 同じサイズ・2番目に近い要素を選んで入れ替える
- jQuery + GSAP（GreenSock）で軽量かつ高性能に動作
視覚的にも面白く、ポートフォリオサイトやプロダクトギャラリーなどで注目度を高めたいときにおすすめです。
💻 デモ（CodePen）
以下のCodePenで動作をご確認いただけます：
See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.
🧰 使用技術
- HTML / CSS
- JavaScript（jQuery）
- GSAP（GreenSock Animation Platform）
🧠 アニメーションのロジック概要
- 上下2つの画像トラックを無限にスライド
- 一定時間ごとに、画面の右側（75%の位置）に最も近い上段アイテムを取得
- 同じサイズで、かつ2番目に近い下段アイテムを検索
- 双方の画像をアニメーション付きで入れ替え
- 見た目はそのままに、DOM要素も入れ替え
この処理を3秒おきに繰り返すことで、自然で滑らかな「視線誘導型のインタラクション」が実現できます。
🧪 応用アイデア
setIntervalの間隔を変えてランダムなタイミングに- クリック時に限定して手動切り替え
- 画像に拡大や回転エフェクトを追加
- スクロール速度に応じて切り替え頻度を変化させるなど
UIの魅力をさらに引き出すための拡張も容易です。
✏️ まとめ
「CrossGlide」は画像リストのスライド×自動入れ替えというアイデアを組み合わせた、視覚的に楽しいアニメーションです。
- jQueryとGSAPだけで実装可能
- DOMを実際に入れ替えることでアクセシビリティ面も安心
- トリガー位置や選択条件を柔軟に変更できる
興味がある方は、ぜひCodePenのデモをベースにカスタマイズしてみてください！