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

関連記事

  1. Typed.js

    JavaScript

    プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

    Typed.jsは、プログラムを入力するように文字をタイプしてくれるエ…

  2. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

  3. Textualizer

    JavaScript

    テキストに様々なエフェクトを与えながら切り替わっていくjQueryプラグイン「Textualizer…

    フェードやスライドといった様々なエフェクトをテキストに与えながら切り替…

  4. Product comparison

    JavaScript

    製品などの比較に役立つjQueryプラグイン「Product comparison」

    Product comparisonは、いくつかの種類のものを比較する…

  5. Simple button radios

    JavaScript

    シンプルで高性能なラジオボタンを実装できる「Simple button radios」

    Simple button radiosはシンプルで高性能なラジオボタ…

  6. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP