calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

css_animations

今っぽくするための、ありそうで無かったエフェクト。その手があったか、と思わせてくれそうなアイデアとソース。最近のWebサイトで使われている、心地よいアニメーションを実装するCSSなどのまとめ。

PR
IT/WEB業界への転職なら
Sponsored Link

背景画像が放射状に広がるスライダー

svgslider

クリックすると背景画像を円形にマスクしながら波紋のように広がる、シンプルなレスポンシブ対応スライダー。

カーテンが左右に開くようなエフェクト

curtain

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

サーチボックスの省スペースアイデア

nav_search

サーチボックスが左右に動いたりオーバーレイしたりするのではなく、ヘッダー上部にスライドする省スペースアイデア。

パーティクル

particle

バブル・ラインなどの模様がパーティクル(粒子や煙・葉など自然に存在する不規則な形)に3Dに拡散するかのようなエフェクト。

異常感を出せるグリッチエフェクト

404glitched

グリッチは故障・欠陥やエラーのことを指しますが、まさにこれは404ページに使うと異常感を出せそうなグリッチエフェクト。

チルト

See the Pen Mousemove / Accelerometer tilt effect | Greensock by Arden (@aderaaij) on CodePen.

マウスの位置を感知し、連動して傾きを付与するエフェクト。

横スクロールのテーブル

compare_table

横スクロールする製品比較表。

メール入力フォーム

email_input

メールアドレスを最後まで入力されたのを感知して、送信ボタンを押せるようにしたUI。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

This site uses Akismet to reduce spam. Learn how your comment data is processed.