画像切り替え演出 30選

クロスフェード・ワイプ・グリッチからスクロールリビール、ホバー演出まで。フリー画像(Lorem Picsum)を使った、コピーしてそのまま使える画像演出コレクション。自動再生は画面内にある間だけ動く省エネ設計です。

自動ループ
01. クロスフェード切り替え / ふんわり重なる定番
自動ループ
02. 横ワイプ切り替え / グラデの柔らかい境界
自動ループ
03. 縦ブラインド切り替え / 短冊が順に返る
自動ループ
04. ピクセル化切替切り替え / モザイクブロックが順次入替
自動ループ
05. 円形クリップ拡大切り替え / 中央から円が広がる
自動ループ
06. 斜めスライドイン切り替え / 左上から滑り込む
自動ループ
07. ズームクロス切り替え / 前の画像が拡大しながらフェード
自動ループ
08. グリッチ切替切り替え / RGBずれ+ノイズ数フレーム
自動ループ
09. めくり切り替え / ページカール風の影+回転
自動ループ
10. シャッター切り替え / 黒帯が閉じて開くと次の画像
自動ループ
11. モーフ風ブラー切り替え / ぼけて戻ると次の画像
自動ループ
12. 波形ディゾルブ切り替え / maskのグラデが下から走る
表示時に1回再生
13. カーテンリビール出現 / 色帯が抜けて画像が現れる
画面に入ると再生
14. 下からクリップアップ出現 / clip-pathで下から現れる
画面に入ると再生
15. 左右分割クローズ出現 / 2つの半分が閉じて1枚に
画面に入ると再生
16. ブラー+スケール浮上出現 / ぼかしが晴れてピントが合う
画面に入ると再生
17. 線画フレーム→画像出現 / 枠線が描かれてからフェードイン
画面に入ると再生
18. マスク文字→全面出現 / 文字の形の画像が広がる
画面に入ると再生
19. ドット→画像出現 / ドットマスクが細かくなって全面に
画面に入ると再生
20. 傾き3D起き上がり出現 / 寝ていた画像が立ち上がる
CITY NIGHTS 画像→見出し→サブの順に出現
画面に入ると再生
21. スライドマスク+時間差出現 / 画像とキャプションが順に登場
MOUNTAIN LAKEズームと同時にキャプションが浮上
ホバーで再生
22. ズーム+キャプション浮上ホバー / ギャラリーの定番演出
ホバーでフルカラー
23. デュオトーン→フルカラーホバー / 2色刷りが元の色に戻る
ホバーでカラー
24. モノクロ→カラー+浮上ホバー / 色が戻りながらふわっと浮く
BEFORE AFTER ホバーで切替
25. before/after スライドホバー / 2枚目がワイプで入れ替わる
ALPINE マウスを動かす
26. マウスパララックスホバー / 画像と文字が逆方向に微動
ホバーでワイプイン
27. 別画像ワイプインホバー / 右下から斜めに2枚目が広がる
カーソル周辺をズーム
28. 拡大鏡ホバー / カーソル周辺だけルーペで拡大
ホバーでグリッチ
29. RGBずれホバーホバー / 色収差がチラつくグリッチ
ホバーで額縁ブレイク
30. 額縁ブレイクホバー / フレームが縮み画像がはみ出す