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. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  2. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

  3. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  4. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

  5. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  6. jquery.simple-scroll-follow

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP