cssとJSを使用してウェーブをつくってふわふわアイテムをうかせてみた

12月も半ばに差し掛かろうとしていますね！
あっという間に年末です。

 

今日はcssとJSを使用して波をつくって、その上にアイテムをおいてふわふわさせてみました。
ちょっとわかりづらいかもしれませんので、まずはDemoから～

 

See the Pen wave&fuwafuwa by sayuri (@giraffeweb) on CodePen.0

 

波が動くだけではなくて一緒に鴨も動いています。
かわいいですよね～！

では、簡単ですが解説です。

 

波を動かしているのはJSとCSS。


<div id="ocean"></div>

 

#ocean{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:80%;
  background:-moz-linear-gradient(top, #EEF7FD, #EEF7FD);
  background:-webkit-linear-gradient(top, #EEF7FD, #EEF7FD);
  background:-o-linear-gradient(top, #EEF7FD, #EEF7FD);
  background:linear-gradient(to bottom, #EEF7FD, #EEF7FD);
}

.wave{
  background:#fff;
  display:inline-block;
  height:60%;
  width:10px;
  position:absolute;
  -webkit-animation-name:dostuff;
  -moz-animation-name:dostuff;
  -ms-animation-name:dostuff;
  animation-name:dostuff;
  -webkit-animation-duration:5s;
  -moz-animation-duration:5s;
  -ms-animation-duration:5s;
  animation-duration:5s;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-iteration-count:infinite;
  -ms-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
  -webkit-transition-timing-function:ease-in-out;
}

@keyframes dostuff{
  0%{height:60%}
  50%{height:40%}
  100%{height:60%}
}

@-ms-keyframes dostuff{
  0%{height:60%}
  50%{height:40%}
  100%{height:60%}
}

@-webkit-keyframes dostuff{
  0%{height:60%}
  50%{height:40%}
  100%{height:60%}
}

@-moz-keyframes dostuff /* Firefox */{
  0%{height:60%}
  50%{height:40%}
  100%{height:60%}
}

 

$(function() {
var ocean = document.getElementById("ocean"),
    waveWidth = 10,
    waveCount = Math.floor(window.innerWidth/waveWidth),
    docFrag = document.createDocumentFragment();

for(var i = 0; i < waveCount; i++){
  var wave = document.createElement("div");
  wave.className += " wave";
  docFrag.appendChild(wave);
  wave.style.left = i * waveWidth + "px";
  wave.style.webkitAnimationDelay = (i/100) + "s";
}

ocean.appendChild(docFrag);
});

 

コピーして使用してください。
あとは好みでcss触ってくださいね！

 

鴨はcss3のkeyframeで動いてます。
IE11までは確認済みです。
fuwafuwaのアニメーションで紹介してくださっているブログさんから
拝借させていただきました。

.kamo {
  position: relative;
  height: 100vh;
  width: 100%;
}

.kamo img {
  display: block;
  position: absolute;
  left: 40%;
  z-index: 100;
  width:160px;
  height:90px;
  animation:fuwafuwa 5s infinite alternate linear;
  
  -ms-animation:fuwafuwa 5s infinite alternate linear;
  -webkit-animation:fuwafuwa 5s infinite alternate linear;
  -moz-animation:fuwafuwa 5s infinite alternate linear
}


@keyframes fuwafuwa{
  0%{bottom: 20%;}
  50%{bottom: 10%;}
  100%{bottom: 20%;}
}

@-ms-keyframes fuwafuwa{
  0%{bottom: 20%;}
  50%{bottom: 10%;}
  100%{bottom: 20%;}
}

@-webkit-keyframes fuwafuwa /* Safari and Chrome */{
  0%{bottom: 20%;}
  50%{bottom: 10%;}
  100%{bottom: 20%;}
}

@-moz-keyframes fuwafuwa /* Firefox */{
  0%{bottom: 20%}
  50%{bottom: 10%;}
  100%{bottom: 20%}
}

 

こちらも好きにcss触って自分好みに編集してくださいね！

波だけではなく、2つのコンテンツが動くと、リアルさが増して
より良いですよね！

 

重くならない程度に実装してみてください。

Share: