先日、とあるサイトで「印象的に蝶々を飛ばしたい」という相談をされて、
さも難しいからどうすればいいか？と悩んでいたので、
「そんなの簡単にできるんですよ」
と10分ほどでcss書いて作ってあげた時のコードと、制作手法などを備忘録しておきます。
蝶々アニメの作り方
正面を向いて羽ばたいているという基本アニメが作れたらいいだけなので、まずは素材をネットでゲット。
左右対称表示
正確には左右対称じゃないこともありますが、なんとなくイメージとして蝶々って左右対称になっていてもなんの不思議もないので、 １つの画像を右と左に分けて、HTMLエレメントで表示してみます。
<p class="butterfly">
<img src="butterfly.png">
<img src="butterfly.png">
</p>
<style>
.butterfly {
--deg : 30deg;
--speed : 1.2s;
display: flex;
width: 300px;
overflow: hidden;
perspective: 800px; /* 立体感 */
filter:drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}
.butterfly img{
width: 100%;
height: auto;
object-fit: cover;
}
.butterfly img:nth-of-type(1) {
clip-path: inset(0 50% 0 0);
}
.butterfly img:nth-of-type(2) {
clip-path: inset(0 0 0 50%);
margin-left: 100%;
}
</style>
上記のサンプル表示は、わかりやすいように、画像の半分箇所でぶった斬っています。
なんとなく、これでパタパタと動かすイメージできますよね？
アニメーション追加
実際に、左右反転させたように、台形アニメをすれば、下のように蝶々の動きをつける事ができました。
<link rel="stylesheet" href="style.css" />
<p class="butterfly">
<img src="butterfly.png">
<img src="butterfly.png">
</p>
<style>
.butterfly {
--deg : 30deg;
--speed : 1.2s;
display: flex;
width: 300px;
overflow: hidden;
perspective: 800px; /* 立体感 */
filter:drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}
.butterfly img {
width: 100%;
height: auto;
object-fit: cover;
}
.butterfly img:nth-of-type(1) {
clip-path: inset(0 50% 0 0);
transform-origin: center center;
animation: flapLeft var(--speed) ease-in-out infinite;
}
.butterfly img:nth-of-type(2) {
clip-path: inset(0 0 0 50%);
margin-left: -100%;
transform-origin: center center;
animation: flapRight var(--speed) ease-in-out infinite;
}
@keyframes flapLeft {
0%, 100% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(calc(var(--deg) * -1)); /* 外側にひらく */
}
}
@keyframes flapRight {
0%, 100% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(var(--deg)); /* 外側にひらく */
}
}
</style>
0 件のコメント:
コメントを投稿