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

• 作成：2016/06/6
• Web制作

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

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

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

• [ダウンロード・デモ] Radial SVG Slider | CodyHouse

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

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

• [ダウンロード・解説] Creating a CSS Curtain Opening Effect | CSS-Tricks

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

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

• [ダウンロード・デモ] Nav and Search idea

パーティクル

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

• [ダウンロード・デモ] CSS Particle Effects

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

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

• [ダウンロード・デモ] Glitched out

チルト

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

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

• [ダウンロード・デモ]
  Mousemove / Accelerometer tilt effect | Greensock

横スクロールのテーブル

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

• [ダウンロード・デモ]
  Products Comparison Table in CSS and jQuery | CodyHouse

メール入力フォーム

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

• [ダウンロード・デモ] Email Subscribe Input

• 1
• 1
• 2

2016/11/21

モダンなフォームを作るために覚えておきたいCSSの擬似クラス

モダンなフォームを作るために覚えておきたい擬似クラスをまとめました。 疑似クラスとは 疑似クラスとはその名の通り疑似的なクラスをCSSで作るということで、指定したセ

2015/02/9

何を使えばよいか分かった！コーポレートサイトの各ページを制作する前にみておきたいこと

企業サイトはサービスや商品の他、ビジョンやIR情報などで構成されています。今回はWordPressで構築した固定ページを見やすくするために、どういったjQuery・WPプラグイ

2013/07/29

フリーランスも社内も助かる！企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３

クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わな

2016/01/4

それなりに使える、Web制作者がお世話になる便利ツール

毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。