おすすめ CSS HTML JS アニメーション 25/5/20

2025年5月20日

勝手ながら作品を紹介いたします、センスが光ります

WEBクリエイター：Anna Pawl
作品名：Wall of Text – [shape-outside property]
shape-outsideプロパティを使用してテキストを画像の周りに折り返すデザイン。日本ではあまり見かけない外国のセンス

See the Pen Wall of Text – [shape-outside property] by Anna Pawl (@annampawl) on CodePen.

WEBクリエイター：Chris Smith
作品名：Responsive Comic Book Layout
フレックスボックスを使ったレスポンシブレイアウト。ナレーションテキストと吹き出しはCSSでスタイル設定されています。背景パターンもCSSで作成されています。フォントはComic Sansのみ使用可能です。アメコミ風！

See the Pen Responsive Comic Book Layout by Chris Smith (@chris22smith) on CodePen.

WEBクリエイター：Jared Stanley
作品名：Carnival Spinner
ステップアップして1から10までの乱数を生成します。BlenderとThreejsを使って構築しています。
3種類のアニメーション：
・ホイールの回転はコードで作成しています
・パネルの回転はBlender内で実行し、Threejsで制御しています
・イントロ画面はAfter Effectsで作成し、JSON形式でエクスポートしてlottieで読み込みしています
影はすべてベイクされています。構造物からホイールに落ちる影は、ホイールの真上に表示される別のpngファイルです。この影は静的なので、動いている物体にリアルな影が落ちているように見えます。サバイバルゲームRUSTのギャンブルを彷彿とさせます

See the Pen Carnival Spinner by Jared Stanley (@jaredstanley) on CodePen.

WEBクリエイター：Paul
作品名：CSS Sprite-Based Flip Carousel Using Scroll-Timeline
CSSのみで構成された動的インタラクティブブックです。最新のChrome（134～135以上）で利用可能な最先端の機能を用いて、ページめくりアニメーションをシミュレートします。複数の強力なCSS技術をシームレスに組み合わせることで、ページをめくる本を彷彿とさせる、スクロール可能なスプライト駆動型アニメーション体験を実現します。RPGに導入できそうな雰囲気が良いです

プレビューウィンドウ下にある「0.5×」ボタンを押してプレビュー倍率を0.5倍で表示することをおすすめします。25/5/20：モバイル版Chrome最新ver.だとスライドでページめくりアニメーションが動作します

See the Pen CSS Sprite-Based Flip Carousel Using Scroll-Timeline by Paul (@Maseone) on CodePen.

WEBクリエイター：Ryan LaBar
作品名：GSAP SplitText Demo
大変動作がなめらかで見心地良きです

See the Pen GSAP SplitText Demo by Ryan LaBar (@ryan_labar) on CodePen.

WEBクリエイター：Filip Zrnzevic
作品名：[gsap/component] ❍ Full Screen Image Zoom on Hover
アパレル企業のサイトなどで印象づけに効果的なデザインだなと感じました。只々かっこいい

プレビューウィンドウ下にある「0.5×」ボタンを押してプレビュー倍率を0.5倍で表示することをおすすめします

See the Pen [gsap/component] ❍ Full Screen Image Zoom on Hover by Filip Zrnzevic (@filipz) on CodePen.

WEBクリエイター：Paola Demichelis
作品名：Shadow
文字が3Dにめくれるホバーアニメーション。ロゴに何気なくカーソルを合わせたらめくれた！なんてサイトがあったらセンス良くてファンが増えそう

PC推奨です。25/5/20：PC版Chrome最新ver.で動作します

See the Pen Shadow by Paola Demichelis (@Paola-Demichelis-the-lessful) on CodePen.

WEBクリエイター：Tom Miller
作品名：code driven animation
動作がなめらかでデジタルサイネージ映えするデザイン

See the Pen code driven animation by Tom Miller (@creativeocean) on CodePen.