その手があったか、と思わせてくれそうなCSSやアニメーションなどのまとめ

今っぽくするための、ありそうで無かったエフェクト。その手があったか、と思わせてくれそうなアイデアとソース。最近のWebサイトで使われている、心地よいアニメーションを実装するCSSなどのまとめ。
エンジニア速報は Twitter の@commteで配信しています。
Sponsored Link
背景画像が放射状に広がるスライダー

クリックすると背景画像を円形にマスクしながら波紋のように広がる、シンプルなレスポンシブ対応スライダー。
- [ダウンロード・デモ] Radial SVG Slider | CodyHouse
カーテンが左右に開くようなエフェクト

画面をクリックするとカーテンが左右に開閉する動きをします。まだ、こういった動きを取り入れているサイトが少ないようなのでメモ。
サーチボックスの省スペースアイデア

サーチボックスが左右に動いたりオーバーレイしたりするのではなく、ヘッダー上部にスライドする省スペースアイデア。
- [ダウンロード・デモ] Nav and Search idea
パーティクル

バブル・ラインなどの模様がパーティクル(粒子や煙・葉など自然に存在する不規則な形)に3Dに拡散するかのようなエフェクト。
- [ダウンロード・デモ] CSS Particle Effects
異常感を出せるグリッチエフェクト

グリッチは故障・欠陥やエラーのことを指しますが、まさにこれは404ページに使うと異常感を出せそうなグリッチエフェクト。
- [ダウンロード・デモ] Glitched out
チルト
See the Pen Mousemove / Accelerometer tilt effect | Greensock by Arden (@aderaaij) on CodePen.
マウスの位置を感知し、連動して傾きを付与するエフェクト。
横スクロールのテーブル

横スクロールする製品比較表。
メール入力フォーム

メールアドレスを最後まで入力されたのを感知して、送信ボタンを押せるようにしたUI。
- [ダウンロード・デモ] Email Subscribe Input
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
- デベロッパーにおすすめのATOM開発系ダークテーマ
- CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- object-fit・currentColor・will-change・image-renderingなどマイ...
- CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
Leave a Comment