Ripples.jsの波紋エフェクトが弱い時がある…なんで?…クロスオリジンのせい?

こちらのサイトなどにアクセスしても波紋が微弱で思ったとおりの水面エフェクトがかかっていません。しばらくするとかかることもあります。コードペンが悪さに一枚噛んでいるっぽいです。

こちらのマヤさんという方のサイトの手ハートとか…

JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現

こっちのイルカとか…

creatornote.nakweb.com/%E8%A1%A8%E9%9D%A2%E3%81%8C%E3%82%86%E3%82%89%E3%82%86%E3%82%89%E3%82%86%E3%82%8C%E3%82%8B%E6%B0%B4%EF%BC%88%E3%82%A2%E3%82%AF%E3%82%A2%EF%BC%89%E7%B3%BB%E3%81%AEripples-js%E3%82%92%E5%AE%9F%E8%A3%85/

波紋がぼわぼわぼわぼわと海のようにならず、アマガエルが水たまりに飛び込んだような弱い波紋しかでないときがあります。波紋がなんか弱いぞ…ジョジョ…肺の中の空気を1cc残らず絞り出せ!!もっと集中するんだ~!!…て感じです。

chromeのエラー

Access to image at ‘http://creatornote.nakweb.com/wp-content/themes/giraffe/images/water.jpg’ from origin ‘https://s.codepen.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

安全なページ上で (安全でない) 混在表示コンテンツ “http://creatornote.nakweb.com/wp-content/themes/giraffe/images/water.jpg” を読み込んでいます

firefoxのエラー

安全なページ上で (安全でない) 混在表示コンテンツ “http://creatornote.nakweb.com/wp-content/themes/giraffe/images/water.jpg” を読み込んでいます
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://creatornote.nakweb.com/wp-content/themes/giraffe/images/water.jpg にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。
結論は…あまりよくわからない。
クロスオリジン要求だからダメになるという解釈でよろしいのでしょうか?安全じゃないページから画像を呼んでいるので、ダメってことみたいです。うまくいったりうまくいかなかったりするのは、codepenがCloudflare(CDN)機能使っているからだったりするのかな?リロードしていたらエラーになった。CDNのキャッシュが残って結果が変わるので、そのへんでデバックがはかどりませんでした。CDNはときにシンドい…なんて思ったりしますが、詳しいことはわかりません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です