揺らめく波のjQueryのプラグインWavify

揺らめく波のjQueryのプラグインWavify

ゆらゆらとゆれる波をjQueryのプラグインで簡単に表現できます。

デモコード

HTML

<!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">
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div class="container">
		<div class="box">
		  <h1>wavify Demo</h1>
		</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: '#fff',
  speed: .25
});
	  </script>
</body>

</html>

CSS

svg {
  height: 16vh;
	width: 100vw;
	position: absolute;
	bottom: 0;
}
body {
  font-family: 'Noto Sans JP','NotoSansCJKjp','ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic';
}
img{
  width: 100%;
  height: auto;
}
.container {
  position: relative;
}
.box {
  padding: 20px;
  text-align: center;
  background-color: #0bd;
  height: 80vh;
}
h1{
  color: #fff;
  font-size: 48px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

説明

下記から必要なファイルを持ってきます
https://github.com/peacepostman/wavify
必要なファイル
jquery.wavify.js
wavify.js

jQuery本体とTweenMaxと先ほどもらってきたものを読み込ませます。
※順番は以下でないとうまくいかない時もあるようです


<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>

SVGのpathにIDを振っておきます。id=”wave”

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/></svg>

IDに対してカスタマイズします


<script>$('#wave').wavify({
  height: 60,
  bones: 3,
  amplitude: 40,
  color: '#fff',
  speed: .25
});
</script>

参考
https://www.webcreatorbox.com/tech/javascript-particles