クールな CodePen デモ (10 月 4 日)

軽量ウォーターディストーションエフェクト

Ksenia Kondrashova は、水の効果を備えた美しいシェーダーを使用したデモを作成しました。まるでプールの水が動いているかのようにリアルに見えます。心を落ち着かせ、催眠術をかけたような気分になります。

---

ホバー時の 3D 視差効果

Temani Afif は、単一の画像タグを使用して素晴らしい効果を作成します。これは素晴らしい例です。1 つの HTML タグで驚くべき 3D 効果が作成されます。コードは非常にシンプルです。デモには 18 行の CSS がほとんど必要ありません!

---

ホバー時の選択的な彩度

単一の画像要素を使用した別のクールなデモ。 Ana Tudor は、SVG フィルターを使用して色補間マスクを適用し、色に基づいて画像要素を強調表示しました。

---

迷惑なジャガイモ

Sophia Wood (別名 Fractal Kitty) によるこの楽しいデモでは、スピーカーをオンにする必要があります。サウンド ボタンをクリックするか、1 ～ 8 のボタンを押してポテトをしゃべらせます…ただし、楽しいこともあれば迷惑なこともあるので注意してください。

---

ホイール ギャラリー (CSS のみ)

Chris Bolson が作成したアニメーションの円形ギャラリー。写真の上にマウスを置くとアニメーションが表示されます。写真の動きに合わせてタイトルが表示されるところが気に入っています。スムーズです。

---

点描 NASAの画像

Sophia Wood による別のデモ。彼女は P5 を使用して、無限に生成されるポイントを生成しました。サイクルごとに、それらはより小さなサイズになり、宇宙の絵が現れます。いつものように、アートとコードの創造的な組み合わせです。

---

カラーコントラストチェッカーテーブル

これは、より「オタク的な」アクセシビリティ デモです。すべての CSS の色名とその色のコントラストの組み合わせを含むグリッドです。 Dave Rupert は、WCAG 2.1 仕様を使用して結果を決定しました。

---

私の庭の看板

Chris Coyier はこの象徴的な看板を複製し、スクロール駆動のアニメーションを適用してすべての行のフォントを動的に調整し (テキストは編集可能)、すべての行が同じ幅を占めるようにします。アニメーション範囲プロパティを使用するため、このデモは Chrome でのみ動作します。

---

スクロール スナップ イベントを備えたスクロール駆動のアニメーション カード スタック

Paul Noble は、スクロール駆動のアニメーションとスクロール スナップ イベントを組み合わせた素晴らしいカード スタックを作成しました。素晴らしいトランジションを楽しむには、トラックパッドを使用する必要があります (このデモはマウスでは機能しません)。

---

素早いダブル進行

Ana Tudor による別のデモ。コードはクリーンで短く、セマンティックです。私はこのコンポーネントのデザインが (Reddit の質問から?) 気に入ったので、いくつかのプロジェクトで似たようなものを使用していることがわかりました。

---

---

このリストが気に入ったら、先月のデモをチェックしてください!

以上がクールな CodePen デモ (10 月 4 日)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。