GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

一行でコピペOK CSS アニメーション ギャラリー 9選

· Godrich · 9種 · 7分で読める

フィードバックSCSSCSSのみホバーLP

写真にマウスを乗せると覆っていた板がすっと開いたり、円がじわっと広がって中身が見えたりするサイトを見たことはありませんか。この記事はそうしたcss アニメーション ギャラリーの動きを、一行でコピペできるコード9個にまとめたものです。うち1つはJavaScriptを使わずカテゴリー別のフィルタータブまで動きます。

左右ワイプ01 image-reveal-gallery-wipe-left-right カーテン分割リビール02 image-reveal-gallery-curtain-split 円形マスク拡張03 image-reveal-gallery-circle-mask-grow メイソンリー順次フェード04 image-reveal-gallery-masonry-fade-stagger dialogライトボックス05 image-reveal-gallery-lightbox-dialog ホバーキャプショングリッド06 image-reveal-gallery-hover-caption-grid サムネイル→ライトボックスモーフ07 image-reveal-gallery-view-transition-lightbox スクロールマスクリビール08 image-reveal-gallery-scroll-reveal-mask :hasベースのフィルタタブ09 image-reveal-gallery-filter-tabs-has

自動再生 · タイルを押すとその項目へ · すべて1つのzip

9個は派手さの順ではなく、ギャラリーを訪れた人が実際にたどる順番に並べています。まず01〜03は写真が1枚だけ覆いを解かれる単体のリビールで、04は複数の写真タイルが順番に並んで現れるグリッドの登場です。05と07はクリックして写真を大きく見る瞬間、06はカーソルを乗せた1枚だけに情報を足すホバーで、08はスクロールして画面に入った大きな写真がやわらかく現れる演出です。最後の09は複数の写真をカテゴリーで絞り込むフィルターで締めくくります。スライドで現れる値が金額ならCSS料金表のアニメーションがその数字を扱い、半透明な板の上で同じことをするならグラスモーフィズムの効果が材料になります。

01左右ワイプ

何が起きるか

写真を覆う板が右端を軸にscaleX(0)まで縮んでいき、左から右へ向かって写真が現れます。

左右ワイプ
新しいタブで開く

01 · 左右ワイプ — 計測 累積面積 29.128% · 動いたフレーム 18/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scaleXtransform-origin500ms

コードの要点

動かしているのはtransform-originを右端に固定したscaleXだけです。

.wr-cover {
  position: absolute;
  inset: 0;
  background: #fff7e6;
  transform-origin: 100% 50%;
  transform: scaleX(1);
  transition: transform 600ms ease-out;
}
.wr-focal:hover .wr-cover {
  transform: scaleX(0);
}

02カーテン分割リビール

画面で起きること

半分ずつに分かれた2枚のパネルが写真を覆っていて、マウスを乗せると左のパネルは左へ、右のパネルは右へtranslateXでそれぞれ100%押し出され、舞台のカーテンのように開きます。

カーテン分割リビール
新しいタブで開く

02 · カーテン分割リビール — 計測 累積面積 29.122% · 動いたフレーム 18/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateX50vw600ms

動く仕組み

.cs-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
}
.cs-panel--l { left: 0; }
.cs-panel--r { left: 50%; }
.cs-focal:hover .cs-panel--l { transform: translateX(-100%); }
.cs-focal:hover .cs-panel--r { transform: translateX(100%); }

03円形マスク拡張

見え方

写真の中心から円形のclip-pathが半径0%から75%まで広がり、カメラの絞りが開くように写真を見せます。

円形マスク拡張
新しいタブで開く

03 · 円形マスク拡張 — 計測 累積面積 29.122% · 動いたフレーム 17/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

clip-pathcircle()550ms

組み立て方

.cm-photo {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 600ms ease-out;
}
.cm-focal:hover .cm-photo {
  clip-path: circle(75% at 50% 50%);
}

04メイソンリー順次フェード

css アニメーション フェードイン をどこで使うか

高さの異なる写真タイルがレンガのように積まれたグリッドが画面に入ると、IntersectionObserverがグリッド全体の到達を検知してタイルごとにinクラスを付け、transition-delayだけを140ms刻みでずらして順番に浮かび上がらせます。

メイソンリー順次フェード
新しいタブで開く

04 · メイソンリー順次フェード — 計測 累積面積 25.641% · 動いたフレーム 12/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

columnstransition-delayJS 7줄

なぜこう書くか

var tiles = document.querySelectorAll('.mf-tile');
var io = new IntersectionObserver(function (entries) {
  entries.forEach(function (e) {
    if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
  });
}, { threshold: 0.3 });
tiles.forEach(function (t) { io.observe(t); });

05dialogライトボックス

どの画面か

サムネイルのボタンを押すとネイティブのdialog要素がshowModal()で開いて写真が拡大表示され、閉じるボタンはページを勝手にスクロールさせないpreventScroll付きでフォーカスを受け取ります。

dialogライトボックス
新しいタブで開く

05 · dialogライトボックス — 計測 累積面積 70.732% · 動いたフレーム 8/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

dialogshowModalJS 6줄

実装の核

var dlg = document.querySelector('.lb-dialog');
var btn = document.querySelector('.lb-close');
document.querySelector('.lb-thumb').addEventListener('click', function () {
  dlg.showModal();
  btn.focus({ preventScroll: true });
});
btn.addEventListener('click', function () {
  dlg.close();
});

06ホバーキャプショングリッド

何が動くか

3枚並んだグリッドでマウスを乗せた1枚だけキャプションバーがtranslateYで下から上へ上がってきてopacityでふわっと現れ、残りの2枚はそのままです。

ホバーキャプショングリッド
新しいタブで開く

06 · ホバーキャプショングリッド — 計測 累積面積 4.412% · 動いたフレーム 11/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateYopacity300ms

何が肝心か

.hc-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
.hc-tile:hover .hc-cap {
  transform: translateY(0);
  opacity: 1;
}

07サムネイル→ライトボックスモーフ

どこで使うか

サムネイルをクリックした瞬間にgetBoundingClientRect()でその位置を測り、オーバーレイのパネルをまずそこへtransformで重ねてから値を消すことで、中央の大きなライトボックスの位置までFLIPと呼ばれる手法で滑らかに拡大します。

サムネイル→ライトボックスモーフ
新しいタブで開く

07 · サムネイル→ライトボックスモーフ — 計測 累積面積 21.074% · 動いたフレーム 16/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

getBoundingClientRectFLIPJS 9줄

押さえておく点

var t = thumb.getBoundingClientRect();
var p = panel.getBoundingClientRect();
panel.style.transform =
  'translate(' + (t.left - p.left) + 'px,' + (t.top - p.top) + 'px) ' +
  'scale(' + (t.width / p.width) + ',' + (t.height / p.height) + ')';
panel.classList.add('is-open');
requestAnimationFrame(function () {
  panel.style.transform = 'translate(0,0) scale(1,1)';
});

08スクロールマスクリビール

見えるもの

写真が画面に入るとIntersectionObserverが付けたクラスに合わせてmask-imageのmask-positionが動き、輪郭が硬く切り替わるのではなくグラデーションのやわらかい縁で写真が現れます。

スクロールマスクリビール
新しいタブで開く

08 · スクロールマスクリビール — 計測 累積面積 29.122% · 動いたフレーム 16/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

mask-imagemask-positionJS 7줄

どう作るか

.mk-photo {
  mask-image: linear-gradient(100deg, transparent 0 38%, #000 58% 100%);
  mask-size: 260% 100%;
  mask-position: 0 0;
  transition: mask-position 700ms ease-out;
}
.mk-frame.in .mk-photo {
  mask-position: 100% 0;
}

09:hasベースのフィルタータブ

どんな場面か

隠したラジオボタン3個と:has()セレクターだけで、タブを選ぶと他のカテゴリーのタイルがopacityで薄くなりscaleでわずかに縮みます。

:hasベースのフィルタタブ
新しいタブで開く

09 · :hasベースのフィルタタブ — 計測 累積面積 24.351% · 動いたフレーム 13/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

:has()translateXJS 8줄

コードの読み方

インジケーターは64px固定幅の正確な倍数でtranslateXするので、タブの数が増えても位置がずれません。

.ft-frame:has(#ft-2:checked) .ft-tile:not([data-cat="photo"]) {
  opacity: .15;
  transform: scale(.94);
  pointer-events: none;
}
.ft-frame:has(#ft-3:checked) .ft-tile:not([data-cat="video"]) {
  opacity: .15;
  transform: scale(.94);
  pointer-events: none;
}

CSS アニメーション ギャラリーはどこで壊れるか

何が問題か

css アニメーション 作り方 として一番つまずいたのは08番でした。mask-size: 260%のようにマスク画像を要素より大きくすると、mask-positionのパーセンテージが直感と逆向きに効きます。最初はmask-position: 100% 0のほうが写真を隠す値で0 0のほうが写真を見せる値だろうと思い込んでいましたが、実際にレンダリングしたフレームを1枚ずつ確認すると逆でした。100% 0のときはグラデーションの黒い部分(見える部分)が要素全体を覆い、0 0のときは透明な部分が要素全体を覆って写真が完全に隠れていたのです。base側と.in側の値を入れ替えてようやく、スクロールで写真が現れる向きになりました。

どう避けるか

背後に敷いた写真が前の文字を損なう判断は、文字そのものが動くキネティックタイポグラフィのLPで背景の可読性問題として戻ってきます。

05番と07番にも別の注意点があります。dialogが開く瞬間に@starting-styleで登場アニメーションを付けたくなりますが、SafariとFirefoxでの対応がまだ揃っていないためこのデモでは使わず、dialogはブラウザ標準のとおり瞬時に開き、::backdropもアニメーションさせない静的な半透明幕1枚に留めています。07番も名前とは裏腹にdocument.startViewTransition()は使っておらず、クリック位置を測ってtransformだけで拡大するFLIP手法にしているのは、ブラウザによって対応や見え方が割れるためです。mask-sizeを100%より大きくする効果を使うときは、まず1枚だけ実際にレンダリングしてmask-positionの両端を目で確認してから値を決めると、同じ思い込みを避けられます。9項目のvanillaコードとzipの解凍パスワードは63vswp74で、この段落をゆっくり読めば見つかります。

アクセシビリティ — reduced-motionで9個が何を残すか

reduced-motion で残るもの

OSで「視差効果を減らす」など動作を減らす設定をオンにすると、9個ともprefers-reduced-motion: reduceでアニメーションとトランジションが止まります。01・02・03・06のように写真やキャプションを見せる演出は、ホバーした瞬間の最終形(覆いが外れた写真、上がりきったキャプション)へ動きなしでそのまま切り替わるため情報は欠けません。04(メイソンリー)と08(スクロールマスク)も同様で、タイルの登場順や境界のやわらかさそのものが情報ではないので、最初から完全に現れた状態へ直接切り替えれば十分です。05のdialogはもともとブラウザ標準の即時表示なので変化はほとんどなく、07はクリック後のtransform遷移だけが止まり、拡大した写真という最終結果は変わりません。

そのほかに気をつけること

09だけは事情が違い、どのタブが選ばれているか自体が情報なので、トランジションを止めてもopacityとtransformの値は:has()によって即座に切り替わり、フィルター機能自体は変わらず働きます。写真そのものが動くホバー効果を探しているならCSS画像ホバー効果の記事も参考になり、一覧はCSSカテゴリーからまとめて見られます。clip-pathの詳しい構文はMDNのclip-pathドキュメントに、:has()セレクターの対応状況はMDNの:has()ドキュメントにまとまっています。

FAQ — よくある質問

なぜ写真をそのまま出さずにリビール効果を使うのですか?

必須ではありませんが、写真がゆっくり、あるいは面白い形で現れると訪問者の視線がその瞬間に留まりやすくなります。01〜03のように写真1枚に添える軽い演出から、07のようにクリックまでつながる演出まで、画面の目的に合わせて選べます。

05番と07番はどちらもライトボックスですが、何が違いますか?

05番はネイティブのdialog要素とshowModal()だけで完結し、フォーカスの管理やEscキーで閉じる動作をブラウザが面倒を見てくれます。07番はサムネイルの位置から拡大していく演出を重視した作りで、自前のdivパネルをtransformで動かすぶんコードは長くなりますが、写真がどこから出てきたかが視覚的にわかります。

zip内の css アニメーション コピペ 用コードはvanillaとreactで違いますか?

見た目の動きは同じです。vanilla側はSCSS変数を使い、実際に使う経路とキャプチャ用のis-demo経路を1つのファイルに両方持っていますが、React版はis-demoを持たず実際に使う経路だけをコンポーネントのpropsとして受け取る形にしています。並べ替え・拡大・ライトボックスまで揃えたギャラリー全体が要るなら、画像ギャラリーのCSS効果がその拡張版です。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。