こちらのサイトなどにアクセスしても波紋が微弱で思ったとおりの水面エフェクトがかかっていません。しばらくするとかかることもあります。コードペンが悪さに一枚噛んでいるっぽいです。
こちらのマヤさんという方のサイトの手ハートとか…
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現
Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデ
www.webcreatorbox.com
こっちのイルカとか…
表面がゆらゆらゆれる水（アクア）系のripples.jsを実装してみた – Creator Note
creatornote.nakweb.com
波紋がぼわぼわぼわぼわと海のようにならず、アマガエルが水たまりに飛び込んだような弱い波紋しかでないときがあります。波紋がなんか弱いぞ…ジョジョ…肺の中の空気を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はときにシンドい…なんて思ったりしますが、詳しいことはわかりません。
コメント