ゆらゆらとゆれる波を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 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>
