calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

EffectTrends_2015

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

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

もくじ

透過や光に関する効果

ニューメリック

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

その他

透過や光に関する効果

1.プリズムエフェクト

prismeffect

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

2.パーティクルエフェクト

plasmaeffect

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

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

3.ジニーエフェクト

ginnyffect

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

4.ブラーエフェクト(ドラッグ可能)

blureffect

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

5.スクロールで背景がフェードする

bgfade-scroll

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

ニューメリック

6.ニューメリック スライダー

numerics-slider

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

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

numerics-text

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

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

8.波紋状に広がる効果

ripple-like

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

9.タブ選択後、オーバーレイさせる

tab-overlay

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

10.デイトピッカー

datepicker

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

その他

flick-carousel

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

12.画像クリックで全幅スライダー表示

full-displayimage

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

13.様々な幾何学模様の作り方

geometric-patterns

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

スポンサード リンク

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

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

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

Comments

Leave a Comment

コメントする