2025年05月13日(火)
Webページで使用するさまざまな動きのアイデアをまとめた「Web Motion Catalog」
Webページ上で表示する要素のテキストやボタンやグラフなど、適度にアニメーションなどの動きを加えることで、目立たせることだけでなく操作感を良くしたり、効果的な視覚効果を演出したりすることができます。
そんなWebサイト制作におけるさまざまな動きのアイデアを集めたサイト「Web Motion Catalog」がとても魅力的だったので備忘録として紹介してみます。
Web Motion Catalog
Web Motion Catalogこのサイトでは円グラフの演出や立体的なカードUI、お気に入りボタンのインタラクションに加えて、ボタンやテキストのマウスホバー演出など、さまざまな動きのアイデアが紹介されています。
各アイデアをクリックすると、詳細が表示され、実装のポイントに加えて、HTMLやCSSやJavaScriptのコード例をコピペして簡単に利用することも可能になっています。
動きのアイデ...
0
13
0
0
author:
BlackFlag
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログ
‹ PREV
ブラウザのサイドパネルを使ってChatGPTやGeminiなど任意の公式AIチャットに同時アクセスできるオープンソースのブラウザ拡張・「AI Side Panel」
NEXT ›
Web制作者は要チェック！ ネストされたh1要素のデフォルトのUAスタイルがすべてのブラウザで変更されます
関連記事
カルーセルはもうCSSだけで実装できる！ 疑似要素::scroll-button()と::scroll-marker()の使い方を解説
Kindle本の特大セールが開催！ Figmaの解説書、UIデザイン、Web制作、ディレクションの良書がたくさん半額です
HTMLとCSSで勉強すべきことがしっかりまとめられている、アクセシビリティやパフォーマンスを考慮した実装を学べる良書 -モダンHTML＆CSS 現場の新標準ガイド
実は難しい！ CSSのborder-radiusで実装した角丸を矩形からスムーズにアニメーションさせるテクニック
わずか数行のコードで1つの要素を別の要素にスムーズに遷移させる、フレームワークに依存しないJavaScript -Blendy
Ads
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『Webページで使用するさまざまな動きのアイデアをまとめた「Web Motion Catalog」』についてまとめています。
この記事は特にjavascript・アニメーションについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
