jQuery Creat Animation
jQueryで簡単に水面に広がる波紋を作る
Ripples
→DEMO1
まずは下記URLよりプラグインをダウンロードをします。
https://github.com/sirxemic/jquery.ripples/→ダウンロードしてください。
ダウンロードしたファイルを開き、「dist」ファイルから「jquery.ripples-min.js」を読み込みます。この時、「dist」ファイルはindexファイルと同じところに置き、読み込むようにしてください。また、各スクリプトはhead内、もしくは</body>直前に記述してください。1ページ内に他のjQueryも一緒に置かれている場合、head内の記述では動かない場合があります。
[script] <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.ripples-min.js"></script>今回はページ全体に水面波紋を適用していますので、CSSにてbodyにてバックグラウンドイメージを設定します。
[CSS] body { background: url(../img/Galaxy_1.png) no-repeat center center; /*イメージURLはご自分の好きな画像を設定してください。*/ background-color: #000000;/*背景色*/ background-size: cover;/*coverを設定することによって、表示領域全体を覆うように設定します。*/ margin: 0; color: #FFFFFF; }次に水面の動きや速さを設定します。速さや大きさは一度試してみて、好きな感じの動きをご自身で探していただくこととなります。初期設定をhead内、又は</body>直前にて下記のように設定します。
[script] <script> $(document).ready(function() { $('body').ripples({ //波紋をつけたい要素の指定 resolution: 700, //波紋の広がりの速度(値が大きいほど遅くなる。) dropRadius: 10, //波紋の大きさ(値が大きいほど大きくなる。) perturbance: 0.1 //波紋による屈折量(値が大きいほどブレる。) }); }); </script>テスト的に表示したいものであれば、CSSの記述は表示したい高さの設定(height)のみとなります。今回DEMO1での制作内容は説明を追加させたかったので、content要素を制作し、高さを600pxにて設定しています。高さ設定は要素を何も持たせない場合body内でも設定することも出来ます。
[CSS3] .content{ margin: auto; background-color: rgb(0,0,0,0.5); width: 50%; height: 600px; }如何でしょうか?美しい波紋は動きましたか?もし上手く動かない場合はDEMO1の全体HTML、CSSコードを下記に記述しておきますので、コピペしてご利用ください。
注意!)バックヤードのイメージ画像は必ずご自分の好きなものをダウンロードし、イメージファイルを作ってURLを指定してください。ここに設定しているファイルURLはダミーです。
[DEMO1 CSS3全体コード] @charset "utf-8"; /* CSS Document */ body { background: url(../img/Galaxy_1.png) no-repeat center center; background-color: #000000; background-size: cover; margin: 0; color: #FFFFFF; } a{ color: #FFFFFF; text-decoration: none; } .content{ margin: auto; background-color: rgb(0,0,0,0.5); width: 50%; height: 600px; } h1{ padding-top: 100px; text-align: center; } .p_1{ padding:2% 5%; } .back{ margin:5% 0 0 5%; display: inline-block; padding: 0.3em 1em; text-decoration: none; color: #ffffff; border: solid 2px #ffffff; border-radius: 3px; transition: .4s; } .back:hover { background: #cccccc; color: #000000; } #footer{ background-color: #000000; text-align: center; width: 100%; margin: 0; height: 50px; }
[DEMO1 HTML/script全体コード] <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>BLACK SHIVA SAMPLE</title> <link rel="stylesheet" href="css/sample_all.css"> <link href="https://fonts.googleapis.com/css?family=Marcellus+SC" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.ripples-min.js"></script> <!--初期設定--> <script> $(document).ready(function() { $('body').ripples({ //波紋をつけたい要素の指定 resolution: 700, //波紋の広がりの速度(値が大きいほど遅くなる。) dropRadius: 10, //波紋の大きさ(値が大きいほど大きくなる。) perturbance: 0.1 //波紋による屈折量(値が大きいほどブレる。) }); }); </script> </head> <body> <div class="content"> <h1>Ripples of water Demo1</h1> <hr> <p class="p_1">Ripples of water Demo1では、body全体を指定することで、画面上のすべてに波紋が動きます。全体的に波紋が広がるので、出来るだけ「resolution」(波紋が広がる速度)を遅くしてのご利用をお勧めします。ゆっくりであればあるほど、美しい波紋が出来上がります。<br>又、ブロックごと、またはセクションごとに波紋アニメーションを付けたい場合は対象にするクラス名、又はブロック名を変更する必要があります。Ripples of water Demo2を参照にして下さい。</p> <div class="back"> <a href="index.html" target="_blank">1ページ前に戻る</a> </div> <div class="back"> <a href="https://black-shiva.com/artwork/link_p/artwork_3.html" target="_blank">バックヤードの素材をBLACK SHIVAでダウンロードする。</a> </div> </div> <div id="footer"><a href="index.html">BLACK SHIVA@YAMAMOTO STUDIO(Ripples of water Demo1)</a></footer> </div> </body> </html>さてここで追記ですが、この波紋は勿論範囲を指定することができます。初期設定時に$('body').ripples({ //波紋をつけたい要素の指定というものがありました。この$('body')を指定したい要素に変更するだけでOK!感じがつかめない方はDEMO2をご覧ください。
→DEMO2
このDEMO2に関しては$('.content')に要素変更をして、指定された範囲のみに波紋を適用しています。 コードはDEMO1とほとんど変わりません。是非、BLACK SHIVAの無料壁紙を使ってチャレンジテーマとして制作してみてください。