こんにちは!エンジニア(仮)のめる(@c5meru)です。
こちらの記事は、UUUM Advent Calendar 2018 19日目の記事です!
5日目の前回は、CSSでHIKAKINをかきました。
HIKAKINときたので、今回もUUUMのクリエイターである、はじめしゃちょーを題材にしたいと思います!
参考にさせていただいたのは、はじめさんのYouTubeチャンネル「はじめしゃちょー(hajime)」のエンディングアニメーションです。こんなかんじのやつです。
で、実際に作ったものがこちら。
イラスト部分は画像になっていて、
- 画像をパラパラ入れ替える
keyframes
(dash
) - 左から右にキャラクターを動かす
keyframes
(move
)
の2つを組み合わせています。chromeのみ動作確認済みです。
以下、コードの内容です。
HTML
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>はじめしゃちょー</title> <link rel="stylesheet" href="./styles/styles.css"> </head> <body> <div class="container"> <div class="hajime"> <div class="frame frame--001"> <img src="images/001.jpg"> </div> <div class="frame frame--002"> <img src="images/002.jpg"> </div> <div class="frame frame--003"> <img src="images/003.jpg"> </div> <div class="frame frame--004"> <img src="images/004.jpg"> </div> <div class="frame frame--005"> <img src="images/005.jpg"> </div> <div class="frame frame--006"> <img src="images/006.jpg"> </div> <div class="frame frame--007"> <img src="images/005.jpg"> </div> <div class="frame frame--008"> <img src="images/004.jpg"> </div> <div class="frame frame--009"> <img src="images/002.jpg"> </div> <div class="frame frame--010"> <img src="images/003.jpg"> </div> <div class="frame frame--011"> <img src="images/001.jpg"> </div> </div> </div> </body> </html>
CSS
body { background-color: #000; } .frame { top: 0px; left: 0px; width: 250px; height: 250px; position: absolute; animation: dash 0.4s linear infinite 0s forwards; animation-play-state: running; } .frame img { width: 100%; } .frame--001 { z-index: 11; } .frame--002 { animation-delay: 0.1s; z-index: 10; } .frame--003 { animation-delay: 0.125s; z-index: 9; } .frame--004 { animation-delay: 0.15s; z-index: 8; } .frame--005 { animation-delay: 0.175s; z-index: 7; } .frame--006 { animation-delay: 0.2s; z-index: 6; } .frame--007 { animation-delay: 0.3s; z-index: 5; } .frame--008 { animation-delay: 0.325s; z-index: 4; } .frame--009 { animation-delay: 0.35s; z-index: 3; } .frame--010 { animation-delay: 0.375s; z-index: 2; } .frame--011 { animation-delay: 0.4s; z-index: 1; } @keyframes dash { 0% { visibility: visible; z-index: 100; } 12.5% { visibility: visible; z-index: 100; } 25% { visibility: hidden; z-index: 0; } 100% { visibility: hidden; z-index: 0; } } .hajime { top: 0px; left: -250px; width: 250px; height: 250px; position: absolute; animation: move 15s linear 0s infinite normal; } @keyframes move { 0% { left: -250px; } 100% { left: 100%; } }
今年のアドベントカレンダーでは久しぶりにCSSが書けて楽しかったです!
やっぱりアニメーション等で実際の見た目が変わるとおもしろいなーって、改めて思いました😊
UUUMではエンジニアを積極採用中です! 興味のある方は、以下よりぜひぜひ遊びに来てください✨