スクロール

動作

【コピペOK】タイムラインデザイン css 9選

会社の沿革ページや通販サイトの注文状況のように、いくつかの段階を線と丸でつないで順番に見せる部品を「タイムライン」と呼びます。タイムラインデザイン cssで検索して出てくるような、線が伸びたり丸が光ったりする動きを、AOS・GSAPなしの

読む

ヒーローセクションとは、サイトを開いた瞬間に画面いっぱいに映る最初の一枚、大きな見出しとボタンが乗ったあの一画面のことです。この記事では、そこに動きを添える「ヒーローセクションアニメーション」を集めました。CSSだけ・JS不要で、そのまま

通販サイトの商品写真や会社サイトのトップ画像で、指でなぞったりボタンを押したりすると次の一枚に切り替わる仕組みを画像スライダーと呼びます。ここで紹介するcss 画像スライダーはCSSだけ・JS不要で、9種類のやり方をそのままコピペできる形に

プログレスバー css アニメーションは、スクロールした量だけを手がかりに「今どこまで読んだか」を見せるCSSの部品です。CSSだけ・JS不要で、上部バー・円形バッジ・点ナビ・縦バー・文字塗り・数値・章ステップ・目次・残り時間の9種類を集め

css 無限ループは、同じ内容を2セット並べたトラックをちょうど半分だけ動かし、継ぎ目や巻き戻りを見せずに帯を流し続けるCSSの実装法です。この記事ではマーキー(横に流れる帯)を9パターン選び、JavaScriptを使わずtransform

css 固定ヘッダーは、スクロールしても画面上部に留まり続けるナビゲーションをCSSの position:sticky で作る手法です。この記事では隠す・影を付ける・色を反転するなど9種類の動きを選び、判定の仕組みごとに難易度順で並べました

css パララックスは、スクロールする速度と背景や文字が動く速度をわざとずらし、奥行きを感じさせるCSSの表現です。この記事では9パターンを選び、animation-timelineによるスクロール駆動アニメーションだけで組み立てました。

スクロールアニメーション css は、要素が画面に入った量やページ全体の読了率を animation-timeline に渡し、JavaScript を1行も書かずに動かす仕組みです。この記事では9種類を選び、view() と scrol