10 の Cool CodePen デモ (2024 年 9 月)

テマニ・アジフは、ほんの少しの HTML と CSS コードを使用して、アバターの位置に合わせてアニメーション化されたノッチを表示する CSS トリックを作成しました。ラファは、コンピュータの時間に基づいてパーソナライズされた体験を提供する、動く棒を使用して 1 日の時間を表示するインタラクティブなデモを開発しました。クセニア・コンドラショワはシェーダを使用して、さまざまな効果に合わせてカスタマイズ可能な軽量のピクセル歪みアニメーションを作成しました。ギヨーム・マルティニーは、JavaScript 2D 描画ライブラリである Pencil.js を使用して、静かな 3D 効果を作成する無限の松の木の森を作成しました。グラント・ジェンキンスは、JavaScript を使用して、滑らかで楽しい詳細が特徴の、ダンスするバグの美しいアニメーションを作成しました。メルギム・ウジャカニは、HTML と CSS のみを使用して、海で泳いだりジャンプしたりするクジラを特徴としたアニメーション化された Docker ロゴを作成しました。マリアナ・ベルディは、移動、縮小、フェードアウトする要素によるスムーズなスクロール体験を作成する、スクロール駆動のアニメーションデモを開発しました。ギブソンは、React と Framer Motion を使用してオリンピックのメダルカウンターコンポーネントを作成しました。これはスポーツ Web サイトにクールなウィジェットを作成できます。ジョン・カントナーは、ユーザーのすべての操作と時間の経過とともにアニメーション化するレコーディングウィジェットを開発しました。元川は、非常にシンプルなコードを使用して、SVG と CSS を使用した魅惑的な回転アニメーションを作成しました。