- Onkyo -
Takashi D Monkey
Michael Michael
Murabito A
Golden Godwin
Satoshi Oka
Hua Xuanzhong
Kim Wang
- Dinner -
Niku Jaga
Nuts
Don Soboro
Gyu Rice
Ne Komanma
Kaki Ice
Mets Black
Tekka Don
- sponsored -
Tokyo CSS
使いどころさんが迷子な映画のエンドロール風アニメーションです。
全画面バージョンとブロック型の小さいサイズを用意しています。
全画面エンドロール
See the Pen
Untitled by チータツ (@cheese_fuji)
on CodePen.
デモページで見る
コードを見る
余計な装飾を省いています。
HTML
<div class="end-roll">
<p class="role">- Onkyo -</p>
<p>Takashi D Monkey</p>
<p>Michael Michael</p>
<p>Murabito A</p>
<p>Golden Godwin</p>
<p>Satoshi Oka</p>
<p>Hua Xuanzhong</p>
<p>Kim Wang</p>
<p class="role">- Dinner -</p>
<p>Niku Jaga</p>
<p>Nuts</p>
<p>Don Soboro</p>
<p>Gyu Rice</p>
<p>Ne Komanma</p>
<p>Kaki Ice</p>
<p>Mets Black</p>
<p>Tekka Don</p>
<p class="role">- sponsored -</p>
<p><a href="https://give-shot.jp/tokyocss/" rel="noopener noreferrer" target="_blank">Tokyo CSS</a></p>
</div>
CSS
/*** エンドロール ***/
.end-roll{
position: fixed; /*固定表示*/
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #111;
color: #fff;
text-align: center;
font-weight: normal;
overflow: hidden; /*範囲外は非表示*/
font-size: 2rem;
text-transform: uppercase; /*全て大文字*/
}
.end-roll p{
position: absolute;
bottom: -100px; /*画面外に控える*/
left: 0;
right: 0;
margin: 0 auto; /*中央寄せ*/
animation: up-text 20s linear forwards;
}
/*** 各段落ごとに遅延時間を設定 ***/
.end-roll p:nth-child(2){ animation-delay: 4s}
.end-roll p:nth-child(3){ animation-delay: 8s}
.end-roll p:nth-child(4){ animation-delay: 12s}
.end-roll p:nth-child(5){ animation-delay: 16s}
.end-roll p:nth-child(6){ animation-delay: 20s}
.end-roll p:nth-child(7){ animation-delay: 24s}
.end-roll p:nth-child(8){ animation-delay: 28s}
.end-roll p:nth-child(9){ animation-delay: 32s}
.end-roll p:nth-child(10){ animation-delay: 36s}
.end-roll p:nth-child(11){ animation-delay: 40s}
.end-roll p:nth-child(12){ animation-delay: 44s}
.end-roll p:nth-child(13){ animation-delay: 48s}
.end-roll p:nth-child(14){ animation-delay: 52s}
.end-roll p:nth-child(15){ animation-delay: 56s}
.end-roll p:nth-child(16){ animation-delay: 60s}
.end-roll p:nth-child(17){ animation-delay: 64s}
.end-roll p:nth-child(18){ animation-delay: 68s}
.end-roll p:nth-child(19){ animation-delay: 72s}
.end-roll p:nth-child(20){ animation-delay: 76s}
.end-roll p:nth-child(21){ animation-delay: 80s}
/*** 上に流れるアニメーション ***/
@keyframes up-text{
0%{
transform: translateY(0);
}
100%{
transform: translateY(calc(-100vh - 100px));
}
}
/***項目用スタイル***/
.role{
font-weight: bold;
}
ブロック版のエンドロール
See the Pen
エンドロール（ボックス） by チータツ (@cheese_fuji)
on CodePen.
ひとつのブロックに収めたバージョンです。
全画面サイズから2:1の大きさに変更して文字を小さくしただけで、大まかな仕組みはほぼ変わりません。
コードを見る
余計な装飾を省いています。
HTML
<div class="end-roll">
<p class="role">- Onkyo -</p>
<p>Takashi D Monkey</p>
<p>Michael Michael</p>
<p>Murabito A</p>
<p>Golden Godwin</p>
<p>Satoshi Oka</p>
<p>Hua Xuanzhong</p>
<p>Kim Wang</p>
<p class="role">- Dinner -</p>
<p>Niku Jaga</p>
<p>Nuts</p>
<p>Don Soboro</p>
<p>Gyu Rice</p>
<p>Ne Komanma</p>
<p>Kaki Ice</p>
<p>Mets Black</p>
<p>Tekka Don</p>
<p class="role">- sponsored -</p>
<p><a href="https://give-shot.jp/tokyocss/" rel="noopener noreferrer" target="_blank">Tokyo CSS</a></p>
</div>
CSS
/*** エンドロール ***/
.end-roll{
position: relative;
margin: auto;
width: 480px;
height: 240px;
background-color: #111;
color: #fff;
text-align: center;
font-weight: normal;
overflow: hidden; /*範囲外は非表示*/
font-size: 1rem;
text-transform: uppercase; /*全て大文字*/
}
.end-roll p{
position: absolute;
bottom: -2rem; /*画面外に控える*/
left: 0;
right: 0;
margin: 0 auto; /*中央寄せ*/
animation: up-text 22s linear forwards;
}
/*** 各段落ごとに遅延時間を設定 ***/
.end-roll p:nth-child(2){ animation-delay: 4s}
.end-roll p:nth-child(3){ animation-delay: 8s}
.end-roll p:nth-child(4){ animation-delay: 12s}
.end-roll p:nth-child(5){ animation-delay: 16s}
.end-roll p:nth-child(6){ animation-delay: 20s}
.end-roll p:nth-child(7){ animation-delay: 24s}
.end-roll p:nth-child(8){ animation-delay: 28s}
.end-roll p:nth-child(9){ animation-delay: 32s}
.end-roll p:nth-child(10){ animation-delay: 36s}
.end-roll p:nth-child(11){ animation-delay: 40s}
.end-roll p:nth-child(12){ animation-delay: 44s}
.end-roll p:nth-child(13){ animation-delay: 48s}
.end-roll p:nth-child(14){ animation-delay: 52s}
.end-roll p:nth-child(15){ animation-delay: 56s}
.end-roll p:nth-child(16){ animation-delay: 60s}
.end-roll p:nth-child(17){ animation-delay: 64s}
.end-roll p:nth-child(18){ animation-delay: 68s}
.end-roll p:nth-child(19){ animation-delay: 72s}
.end-roll p:nth-child(20){ animation-delay: 76s}
.end-roll p:nth-child(21){ animation-delay: 80s}
/*** 上に流れるアニメーション ***/
@keyframes up-text{
0%{
transform: translateY(0);
}
100%{
transform: translateY(calc(-240px - 2rem));
}
}
/***項目用スタイル***/
.role{
font-weight: bold;
}
CSSの解説
エンドロールの大枠となるdiv要素を作り、その中にpタグで各テキストを大量投入します。
- 大枠となる.end-rollの作成
- 全画面ならposition: fixedで固定表示、ブロックならposition: relativeを指定
- widthとheightを任意のサイズに（全画面は100vw,100vh）
- 黒背景に白文字を指定
- text-transform: uppercaseで英語を全て大文字にするのもヨシ
- over-flow: hiddenで流れる前・流れ切った後のテキストを非表示に
- 流れる文章の子要素 .end-roll pを一括で調整
- position: absoluteとmargin: autoで中央寄せ
- bottomにマイナス値を指定して画面外（下）へ配置しておく
- animationを設定（アニメーション名、流れる時間、linear、forwards）
- テキストが順番に流れるように各pタグに遅延時間を設定する
- :nth-child()を使って1つずつ設定
- 遅延時間animation-delayは一定間隔で指定（サンプルは4秒毎）
- @keyframesで文字が上に流れるアニメーションを作成する
- translateY()を使って下から上に座標を変更する
- ゴール（100%時点の座標）には少し余裕を持たせる（フォントサイズも加味して）
