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. EndlessRiver

    JavaScript

    エンドレスに流れていくコンテンツスライダー「EndlessRiver」

    EndlessRiverはエンドレスに流れていくコンテンツスライダーを…

  2. topbar

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  3. Rythim.js

    JavaScript

    音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

    Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライ…

  4. qpScroll
  5. JQuery lightSlider

    JavaScript

    軽量でレスポンシブなサムネイルナビ付きのスライダー「JQuery lightSlider」

    JQuery lightSliderは軽量でレスポンシブに対応したサム…

  6. no-image

    JavaScript

    縦スクロールによるフォトギャラリー実装「Simple Scroll Gallery」

    Simple Scroll Galleryは縦スクロールによるかっこい…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP