BBQや鍋物の画像を美味しく魅せるためのヒートエフェクト

BBQや鍋物の画像を美味しく魅せるためのヒートエフェクト

スポンサーリンク

スポンサーリンク

飲食店の店舗紹介用webサイトや、BBQ関連の用品、鍋物を扱うECサイトの演出にオススメのヒートエフェクトを紹介します。

夏場の海やビーチ関連のwebサイトにもいいかも?

デモ画面

HTML

基本となるHTMLは以下です。

3行目のクラス「heat-effect」でスクリプトファイル(heateffect.js)に記述したコードを読み込み、画像を表示させると共にヒートエフェクトも実装させます。

CSS

CSSは、要素を固定するためだけに使います。

スクリプト

今回のヒートエフェクトの鍵になるスクリプトファイルですが、余りにも重く長いコードとなりますのでコードの紹介は省きます。ファイルは以下よりダウンロードして下さい。

heateffect.jsをダウンロード

表示させる画像は、このheateffect.jsで読み込んでいます。

画像を変更する場合は、jsファイルの65行目と70行目の「file: ‘images/bg.jpg’,」の箇所を任意のファイルに変更してください。

もしくは、読み込ませたい画像のファイル名を「bg.jpg」として、imagesフォルダの中にアップロードしてください。

まとめ

今回紹介したヒートエフェクトは、使い方次第でwebサイトに様々な演出を施すことが出来るものだと思います。

いつの日か、サハラ砂漠30日間横断紀というサイトタイトルのwebサイトを作ると共に、このヒートエフェクトを取り入れたいと考えています。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク