jQuery「wavify」で波のようなデザイン
wavify実装に必要なファイルをダウンロード
https://github.com/peacepostman/wavifyを開く。
上記サイトからzipフォルダをダウンロード（画像参照）。
「wavify-master」の中で必要なファイルは次のふたつ。
- jquery.wavify.js
- wavify.js
これをjsフォルダにコピー。
読み込み位置については下記のコピペコードを参照。
フォルダ階層の構成が違う場合は調整してください。
wavifyのコードコピペ用
htmlやCSSはお好みで改良してください。
私の場合は、メインコンテンツ下のフッター部分に波のアニメーションをつけたかったので次のようなコードになりました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <style> .wavify-box { position: relative; } .wavify { padding: 20px; text-align: center; background-color: #fff; height: 80vh; } svg { height: 100vh; width: 100vw; position: absolute; top: 0; left: 0; } </style> </head> <body> <!-- ここにメインコンテンツ（私の場合） --> <div class="wavify-box"> <div class="wavify"> <footer>ここにコンテンツ（私の場合）</footer> </div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/></svg> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script> <script src="js/wavify.js"></script> <script src="js/jquery.wavify.js"></script> <script> $('#wave').wavify({ height: 60, bones: 3, amplitude: 40, color: '#0bd', speed: .25 }); </script> </body> </html> |
jQuery「wavify」実装まとめ
- https://github.com/peacepostman/wavifyからzipフォルダをダウンロード。
- jsフォルダに、jquery.wavify.jsとwavify.jsを追加。
- コードをコピペし、微調整（ファイルの階層やcssなど）
