カテゴリー
【Sassで解説】ヤマト運輸HPの404エラーページのミニゲームはほぼCssゲームだった
※ 当ページには【広告/PR】を含む場合があります。
2021/05/22
エラーページをカスタマイズするという心意気
画像の位置を変えてアニメーション
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="game-wrapper">
<div class="box-game" id="box-1">
<input type='checkbox' id='checkbox1'>
<label for='checkbox1'></label>
<div class="box-game-inner"></div>
</div>
<div class="box-game" id="box-2">
<input type='checkbox' id='checkbox2'>
<label for='checkbox2'></label>
<div class="box-game-inner"></div>
</div>
</div>
</body>
</html>
#game-wrapper {
width: 100%;
height: 300px;
background-color: darkgray;
box-sizing: border-box;
position:relative;
.box-game {
position: absolute;
width: 84px;
height: 184px;
overflow: hidden;
label {
display: block;
position: absolute;
bottom: 5px;
left: 18px;
width: 55px;
height: 55px;
z-index: 1;
}
input {
display: none;
}
}
#box-1{
display: block;
left: 100px;
bottom: 158px;
.box-game-inner {
position: absolute;
display: block;
width: 84px;
height: 184px;
overflow: hidden;
background: transparent url('https://www.kuronekoyamato.co.jp/ytc/img/404error_miss01.png') no-repeat 0 0;
background-size: auto;
background-size: 84px 12880px;
}
#checkbox1:checked ~ .box-game-inner {
animation: sprite-miss 3s steps(69) 0s forwards;
@keyframes sprite-miss {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -12696px;
}
}
}
}
#box-2{
display: block;
left: 300px;
bottom: 27px;
.box-game-inner {
position: absolute;
display: block;
width: 84px;
height: 184px;
overflow: hidden;
background: transparent url('https://www.kuronekoyamato.co.jp/ytc/img/404error_hit01.png') no-repeat 0 0;
background-size: auto;
background-size: 84px 13248px;
}
#checkbox2:checked ~ .box-game-inner {
animation: sprite-hit 3s steps(71) 0s forwards;
@keyframes sprite-hit {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -13064px;
}
}
}
}
}
Cssでの(擬似)クリックイベント
<style>
.hoge {
/* inputにチェックが入っていない時のスタイル */
}
要素のID名:checked ~ .hoge {
/* inputにチェックが入っている時のスタイル */
}
</style>
<input type=“checkbox” id="要素のID名">
<label for="要素のID名"></label>
<div class="hoge">...</div>
<style>
#pseudo-event:checked ~ .content-area {
color:red;
}
.content-area {
color:black;
}
</style>
<input type="checkbox" id="pseudo-event">
<label for="pseudo-event"></label>
<div class="content-area">
<p>チェックすると色が変化</p>
</div>
背景画像をスライドさせてアニメーション効果を付ける
animationsteps@keyframesbackground-position168x25760168x368
#box-1{
display: block;
left: 100px;
bottom: 158px;
.box-game-inner {
position: absolute;
display: block;
width: 84px;
height: 184px;
overflow: hidden;
background: transparent url('https://www.kuronekoyamato.co.jp/ytc/img/404error_miss01.png') no-repeat 0 0;
background-size: auto;
background-size: 84px 12880px;
}
#checkbox1:checked ~ .box-game-inner {
animation: sprite-miss 3s steps(69) 0s forwards;
@keyframes sprite-miss {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -12696px;
}
}
}
}
background-size: 84px 12880px84 x 184px70 - 1 = 69animation69 / 3 = 23 fps@keyframes sprite-missy = 184 - 12880 = -12696 px
+ 画像全体のサイズ
+ フレームサイズ
+ 総フレーム数
+ フレームレート
+ (アニメーション終了時の)キー位置
まとめ
参考サイト
その他のリンク記事
関連記事
【Sassで解説】Cssミニゲームで開始画面と終了画面を(もちろんcssだけで)実装する
2021/06/01
ID#:40
Sass Webサイト作成 ミニゲーム
【Sassで解説】Cssミニゲームで開始画面と終了画面を(もちろんcssだけで)実装する
一つ前の回で、Cssミニゲームの中身をどう実装しているのか基礎的なCss&Htmlを使ったテクニックの話題を取り上げてみました。これだけだとミニゲームとしては物足りないので、今回は補足的にミニゲームにオープニング画面とエンド画面の追加方法を考えてみましょう。
クリックするとリンク先へ飛びます関連記事
[Lambda@Edge x ウェブサイト運用] AWS S3で静的ホスティングしたウェブサイトをレスポンス400~500番台の時にエラーページへ誘導する
2021/04/21
ID#:124
AWS Lambda@Edge CouldFront ウェブサイト運営
[Lambda@Edge x ウェブサイト運用] AWS S3で静的ホスティングしたウェブサイトをレスポンス400~500番台の時にエラーページへ誘導する
AWS CloudFrontを利用したなんちゃってはCDN方式のウェブサイトでは何もしないとエラーページを自動で返してくれません。今回はLambda@Edgeを使ってサーバー側からのHTTPレスポンスの情報を読み取り、エラーページにリダイレクトさせる方法を紹介します。
クリックするとリンク先へ飛びます記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー