wavify Demo
<div class="restart">
<input class="reload" type="button" value="スタート" onclick="window.location.reload(true);">
</div>
<!-- <div class="start">
<input class=" start" type="button" value="開始" onclick="start()">
</div> -->
<div class="container">
<div class="box">
<div id="clock">10</div>
<h1 class="msg">Your Are Over Load</h1>
</div>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="wave" d=""/></svg>
<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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85188/jquery.wavify.js"></script>
$(function() {
var sec = 10;
var op = 0;
setInterval(function() {
sec -= 1;
op += 1;
if (sec < 0) {
sec = 0;
return false;
}
// 0埋め
sec_number = ("0" + sec).slice(-2);
$("#clock").html(sec_number);
$("h1").css("opacity", 0 + op / 10);
$("#wave").wavify({
height: 0 + sec * 60,
bones: 8,
amplitude: 80,
color: "crimson",
speed: 0.3
});
}, 1000);
});
$(function() {
$(".reload").click(function() {
location.reload();
});
});
@import url("https://fonts.googleapis.com/css?family=Merienda");
.reload{
color: white;
background-color: crimson;
border-width: 4px;
border-color: white;
font-size: 38px;
font-weight: 900;
display: block;
z-index: 1000;
width: auto;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
padding: 20px;
}
// .start{
// left: 120px;
// }
#clock {
font-size: 120px;
padding: 10px;
color: darkorange;
margin-bottom: -40px;
z-index: 100;
text-shadow: 2px 2px 0px #fff;
/* top: 0; */
}
svg {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
body {
font-family: "Merienda", cursive;
background: #000;
}
h1 {
color: rgba(0, 0, 0, 0.8);
/* color: crimson; */
opacity: 0;
font-size: 48px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
background: rgba(255, 255, 255, 0.4);
border-radius: 5px;
padding: 15px 40px;
text-align: center;
position: absolute;
z-index: 1;
}
a {
color: #0bd;
}