CrossGlide：上下スクロール中に画像がすり替わるスタイリッシュなアニメーションを実装しよう

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）

🧠 アニメーションのロジック概要

1. 上下2つの画像トラックを無限にスライド
2. 一定時間ごとに、画面の右側（75%の位置）に最も近い上段アイテムを取得
3. 同じサイズで、かつ2番目に近い下段アイテムを検索
4. 双方の画像をアニメーション付きで入れ替え
5. 見た目はそのままに、DOM要素も入れ替え

この処理を3秒おきに繰り返すことで、自然で滑らかな「視線誘導型のインタラクション」が実現できます。

🧪 応用アイデア

• setInterval の間隔を変えてランダムなタイミングに
• クリック時に限定して手動切り替え
• 画像に拡大や回転エフェクトを追加
• スクロール速度に応じて切り替え頻度を変化させるなど

UIの魅力をさらに引き出すための拡張も容易です。

✏️ まとめ

「CrossGlide」は画像リストのスライド×自動入れ替えというアイデアを組み合わせた、視覚的に楽しいアニメーションです。

• jQueryとGSAPだけで実装可能
• DOMを実際に入れ替えることでアクセシビリティ面も安心
• トリガー位置や選択条件を柔軟に変更できる

興味がある方は、ぜひCodePenのデモをベースにカスタマイズしてみてください！