Code Copy Motion|スクロール連動系

コピペでWebサイトに動きを。CSS/JSアニメーションのコードギャラリーです。

ピン留め(スクロール固定

See the Pen パララックス by et (@eito-oda) on CodePen.

パララックス

See the Pen 横スクロール by et (@eito-oda) on CodePen.

横スクロール

見出しの下線が中央から左右に伸びる

文章が「行単位」でスクロール出現

スクロールで段落の『強調キーワード』だけ色が変化する

セクションタイトルのアンダーライン伸長

横スライドでセクションを「スッと現す」

サムネイル画像の拡大(ズームイン)

画像が横にスライドしながらフェードイン

スクロールで上下反転フリップ(Y回転)

見出しの文字間隔を徐々に拡大

See the Pen 影だけ強調 by et (@eito-oda) on CodePen.

影だけ強調

左境界ラインの幅伸長スクロールアニメーション

横ラインが伸びて現れる見出し

ボタンが四角形→丸に

セクション背景色が徐々に変化する

横柱が「0% → 100%」で伸びるスキルバー

カードの縁が光る

セクションが下から浮き上がる

2カラムがスクロールで自動的に左右に開く

SVG テキストストロークで『文字を描く』

縦タイムラインの進捗ドット移動

スクロールで会社沿革のタイムラインがスライド表示

サービス3カラムの 『間隔縮小』 でまとまり感UP

数値カウンターがスクロール量でリアルタイム上昇

スクロールで円がリング状に拡大