他と差がついた！最近のトレンドをおさえた一歩進んだエフェクトまとめ

• 作成：2015/04/27
• 更新：2016/06/29
• Webデザイン >

今回は光の屈折や歪み・パーティクルなエフェクトをブラウザ上で表現可能にするチュートリアルをまとめました。ありきたりな見せ方をやめて、表現の幅を広げたいと感じたときに。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

透過や光に関する効果

• １．プリズムエフェクト
• ２．パーティクルエフェクト
• ３．ジニーエフェクト
• ４．ブラーエフェクト（ドラッグ可能）
• ５．スクロールで背景がフェードする

ニューメリック

• ６．ニューメリック スライダー
• ７．テキストフィールドを数値のみに限定する

マテリアル アニメーション

• ８．波紋状に広がる効果
• ９．タブ選択後、オーバーレイさせる
• １０．デイトピッカー

その他

• １１．フリック カルーセル
• １２．画像クリックで全幅スライダー表示
• １３．様々な幾何学模様の作り方

透過や光に関する効果

１．プリズムエフェクト

光を屈折・分散させて見えるプリズムのような効果を付与した画像スライダーの作り方。図を描くためのCanvas（HTML5で追加されたグラフィックス表現が可能となる仕様のこと）を使います。デモの中ではダイアモンド・三角形・立方体などの効果を紹介してあり、スライダーを動かすときにプリズム（マスク）の箇所だけ特殊な見え方になるのがわかります。Canvasの使い方はこちらで。

• [デモ・ダウンロード] Prism Effect Slider with Canvas | Codrops
• ExplorerCanvas（IE6以上でcanvasを動かす）
• drawImage() - canvas上に画像を表示する

２．パーティクルエフェクト

ブラウザ上でパーティクル（粒子や煙・葉など自然に存在する不規則な形）などの3Dを簡単に表現可能にするWebGLを使い、以下のサイトではプラズマが発生しているかのようなエフェクトを表現しています。

HTML5 CanvasとWebGLの使い分け―ICS LABに「Pixi.js(WebGL)は高パフォーマンスでパーティクル向き、CreateJS(Canvas)は対応環境が多くグラフィックが向いている」などCanvasとWebGLの向き・不向きが分かりやすく書いてあり非常に参考になります。

• [デモ・ダウンロード] Plasmatic Isosurface
• [WebGL 対応表] Can I use

３．ジニーエフェクト

WebGLやSVGを利用することができるthree.js（3D表現に必要な機能が一式搭載されているライブラリ）を使って、平面上の図形を曲げるように見せる方法。Three.jsはmrdoob/three.js · GitHubから入手可能。

• Three.js の VertexShader でカードをうにょんと曲げる - 自習室
• デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG

４．ブラーエフェクト（ドラッグ可能）

背景をぼかしたボックスを設置し、それをドラッグ可能にする方法。background-imageにぼかした背景写真を指定し、background-attachment: fixedで背景画像を固定させています。

• [デモ・ダウンロード] Blurred Background CSS

５．スクロールで背景がフェードする

スクロールによりフルスクリーン画像にエフェクトを付与するパターン集。こちらのデモはスクロールした時、背景写真の擬似要素::afterにopacityを指定しフェードをかけています。

• [デモ] Inspiration for Article Intro Effects | Demo 2
• [ダウンロード] Inspiration for Article Intro Effects

ニューメリック

６．ニューメリック スライダー

テキストフィールドをクリックすることで、数値を変動させるスライダーを表示させます。数値を直感的に入力させたいときに使えそうです。

• [デモ・ダウンロード] A Pen by Wifeo
• Jquery progress bar

７．テキストフィールドを数値のみに限定する

テキストボックスの入力を半角数字の数値限定にしたい、そんな時はこちらのチュートリアルが参考になります。jQuery PluginのNumericを使う方法。

• [使い方] テキストボックスの入力値を数値限定にしてくれる「jQuery – numeric」
• [ダウンロード] Numeric | TexoTela - Weaving a Web

マテリアル アニメーション

８．波紋状に広がる効果

波紋が広がるようなエフェクトの中で最もシンプルなタイプ。マウスオーバー時にwebkit-transform:scaleで拡大させopacity:0で消しています。

• [ダウンロード] BUTTON MATERIAL ANIMATION

９．タブ選択後、オーバーレイさせる

奥行きのあるタブ表示、タブをクリック後対応するコンテンツを画面全体にオーバーレイさせるコード。

• [デモ・ダウンロード] Tab Menu Overlay

１０．デイトピッカー

テキストフィールド内をクリックするとカレンダーを表示します。整理された美しいUIです。

• [ダウンロード] Material-date-picker by mobinni
• [デモ] Example app

その他

１１．フリック カルーセル

モバイルで使えそうなフリック操作によるスライダー、Flickityの実装方法。

• [使い方] Creating responsive, touch-friendly carousels with Flickity | CSS-Tricks
• [ダウンロード] Flickity

１２．画像クリックで全幅スライダー表示

50%の幅に配置された画像をクリックすることで、要素を横方向へ全幅表示させ上部に移動させます。

• [デモ・ダウンロード] Expandable Image Gallery in CSS and jQuery | CodyHouse

１３．様々な幾何学模様の作り方

CSSのみで実装する色々な三角形～六角形などの一覧。

• [デモ・ダウンロード] Pure CSS Shapes