【解決済み】bubbly-bg.jsというJavaScriptのIE11対応。

bubbly-bg.jsという、ちょっとおもしろいJavaScriptがあります。
ページの背景にランダムで動く水玉模様を簡単に作れるというものです。

https://tipsy.github.io/bubbly-bg/

jsファイルを読み込んで実行するだけ、という簡単なもの。
実行は「<script>bubbly();</script>」と記述するだけで、基本のブルー背景の水玉が表示されます。

しかもこれ、色とか変えられるんですよね。
例えばこんな書き方になります

bubbly({
    colorStart: "#111",
    colorStop: "#422",
    bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
});

背景が黒から赤、赤い水玉が出るようになります。

問題はここから。
この指定をすると、IE11で動きません。

■IE11で動かない原因

2点ありますが、いずれも上記スクリプトの4行目。
この4行目の書き方が、IE11で対応していないバージョンのJavaScriptの記述法になっていて、これを書き直すだけで対応できます。

■修正版

bubbly({
    colorStart: "#111",
    colorStop: "#422",
    bubbleFunc: function(){ return "hsla(0, 100%, 50%, " + Math.random() * 0.25 +")" }
});

これだけ。
要するに、bubbly-bg.js自体はIE11でも動作するのですが、色変更を行う場合のサンプルとして挙げられているスクリプトが対応していないだけというわけです。

あとはカラーコードの部分や倍率(上記の0.25のところ)を変えてあげると、いろいろな効果が楽しめます。

コメント