Animated Heat Distortion Effects with WebGL

JavaScript

陽炎のような揺れを表現できる「Animated Heat Distortion Effects with WebGL」

夏の暑い日などによく見かける「陽炎」のようなエフェクトを実装することができるチュートリアル「Animated Heat Distortion Effects with WebGL」をご紹介します。WebGLを使っているのが特徴です。「熱による揺れ」は意外といろんなシーンに応用できるかと思います。

Animated Heat Distortion Effects with WebGL

デモ

Desert、Jet Heat、Wok Heat、Waterの4種類のデモを見ることができます。

アフリカの灼熱の地、飛行機のジェットエンジン、料理の加熱、水面の揺れなどさまざまな場面で活用できますね。

とてもリアルで、おもわず「これ動画?」と思ってしまう方も多いのではないでしょうか? 画面いっぱいに表示させた写真と組み合わせることで、インパクトもだいぶ強まりますね。ゆらゆら揺れ動くこのエフェクトを使うことで、その場の雰囲気がよりいっそう伝わってきます。

というわけで、webページに陽炎のような揺れを取り入れたいという方は要チェックです。

Animated Heat Distortion Effects with WebGL

Trunk.js滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」前のページ

iPhoneの画面が暗くならない(消えない)ようにする設定方法次のページiPhone画面が暗くならない設定方法

関連記事

  1. Expanding Bar Navigation Concept
  2. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  3. JavaScript

    レスポンシブでカスタマイズ性に優れたカルーセルを実装できるjQueryプラグイン「slick」

    slickというjQueryプラグインを使えば、レスポンシブでカスタマ…

  4. P-Loading

    JavaScript

    パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」

    P-Loadingは、パワフルなローディングマスクを手軽に実装すること…

  5. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  6. Animsition

最近の記事

  1. フィールグッドシャワー
  2. RP-PB055
  3. ESD-EFシリーズ

アーカイブ

PAGE TOP