| 制作期間 | 7時間 |
| リンク | デモページを見る |
| 仕組み | 画像をillustrationで切りわけ、それぞれの画像にキーフレームアニメーションを設定します。 |
| アピールポイント | 全てCSSアニメーションで実装している点。 |
| 工夫した点 | 複数のtransformプロパティを組み合わせて自然な動きを再現している点 |
サイトマップ
HTML
<body>
<div class="global-wrapper">
<main class="l-main p-main">
<ul class="c-bird ">
<li class="c-bird-1"><img src="https://www.tsuruten-web123.com/portforio/wp-content/themes/tsuruten-web.com/img/bird-body.png" alt="羽ばたくことり"></li>
<li class="c-bird-2"><img src="https://www.tsuruten-web123.com/portforio/wp-content/themes/tsuruten-web.com/img/flapping-up.png" alt="羽ばたくことり"></li>
<li class="c-bird-3"><img src="https://www.tsuruten-web123.com/portforio/wp-content/themes/tsuruten-web.com/img/flapping-down.png" alt="羽ばたくことり"></li>
</ul>
<span class="c-bird__shadow"></span>
</main>
</div>
</body>
SASS
//レイアウトのためのCSS
main {
height: 100%;
}
li {
list-style: none;
}
.global-wrapper {
height: 100vh;
}
//鳥の動き
.c-bird {
margin-top: 50vh;
display: block;
width: 357px;
animation: boundY 0.8s ease-in infinite alternate;
//胴体の画像
&-1 {
position: relative;
top: -20px;
z-index: 100;
opacity: 1;
animation: boundX 16s infinite;
}
//羽が上を向いている画像
&-2 {
position: absolute;
top: -60px;
left: 45px;
opacity: 0;
animation:flapping1 1.6s 0.8s infinite, boundX 16s infinite;
}
//羽が下を向いている画像
&-3 {
position: absolute;
top: 75px;
left: 120px;
opacity: 0;
animation:flapping2 1.6s 0.8s infinite, boundX 16s infinite, opposite 16s infinite;
}
//影を作る
&__shadow {
position: absolute;
left: 130px;
top: 55rem;
width: 60px;
height: 10px;
border-radius: 50%;
background: #000;
filter: blur(6px);
opacity:0.9;
animation: shadow 16s infinite, shadow-extend 0.8s ease-in-out infinite alternate, shadowY 0.8s ease-in-out infinite alternate;
}
}
@keyframes flapping1 {
5% {
opacity: 1;
}
10% {
opacity: 0;
}
15% {
opacity: 1;
}
20% {
opacity: 0;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
35% {
opacity: 1;
}
40% {
opacity: 0;
}
45% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes flapping2 {
5% {
opacity: 0;
}
10% {
opacity: 1;
}
15% {
opacity: 0;
}
20% {
opacity: 1;
}
25% {
opacity: 0;
}
30% {
opacity: 1;
}
35% {
opacity: 0;
}
40% {
opacity: 1;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes boundY {
from { transform: translateY(0rem); }
to { transform: translateY(20rem); }
}
@keyframes boundX {
from { transform: translateX(0vw) scale(1,1); }
49% { transform: translateX(80vw) scale(1,1); }
50% { transform: translateX(80vw) scale(-1,1); }
to { transform: translateX(0vw) scale(-1,1); }
}
@keyframes opposite {
from {left: 120px; top: 75px}
49% {left: 120px; top: 75px;}
50% {left: -50px; top: 25px;}
to {left: -50px; top: 25px;}
}
@keyframes shadow {
from { transform: translateX(0vw) scale(1,1); filter: blur(4px); }
49% { transform: translateX(80vw) scale(1,1); filter: blur(4px); }
50% { transform: translateX(80vw) scale(1,1); filter: blur(4px);}
to { transform: translateX(0vw) scale(1,1); filter: blur(4px); }
}
@keyframes shadow-extend {
from { width: 100px; height: 50px; filter: blur(4px);}
to { width: 150px; height: 50px; filter: blur(8px);}
}
