JavaScriptを使わずにクリスマス感のあるヒーローイメージ制作

せっかくのクリスマスなので、何か作って見たくてヒーローイメージを実装してみました。

実際の動きはこんな感じ
https://kunizawa.github.io/christmas/

HTML

index.html

<div class="wrapper">
  <div class="hero">
    <div class="hero__bg01"></div>
    <div class="hero__bg02"></div>
    <div class="hero__bg03"></div>
    <div class="hero__character"></div>
  </div>
</div>

CSS

style.css

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
}

.hero {
  position: relative;
  width: 100%;
  height: 550px;
  background: url(images/sky.png) center center /300px 550px;
}

.hero__bg01,
.hero__bg02,
.hero__bg03 {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.hero__bg01 {
  height: 550px;
  margin: auto;
  background: url(images/star.png) center center /300px 550px;
  animation: hero__bg01 80s linear infinite;
}

.hero__bg02 {
  height: 273px;
  margin: auto;
  background: url(images/city.png) center center /1062px 273px;
  animation: hero__bg02 50s linear infinite;
}

.hero__bg03 {
  height: 143px;
  margin: auto;
  background: url(images/house.png) center center /801px 143px;
  animation: hero__bg03 20s linear infinite;
}

.hero__character {
  position: absolute;
  top: 145px;
  right: 0;
  left: 0;
  width: 193px;
  height: 78px;
  margin: auto;
  background: url(images/santa.png) center center /193px 78px;
}

@keyframes hero__bg01 {
  0% {background-position: 0 0;}
  100% {background-position: -300px 0;}
}

@keyframes hero__bg02 {
  0% {background-position: 0 0;}
  100% {background-position: -1062px 0;}
}

@keyframes hero__bg03 {
  0% {background-position: 0 0;}
  100% {background-position: -801px 0;}
}

おわりに

作っているうちに興奮してしまい、現実時間で情景を変えたり、サンタクロースがプレゼントを配るようなギミックを入れて見たりもしたかったのですが、迫り来るクリスマスと体力を考慮し断念。

コピペでもなんでもご自由に使っていただいて構いませんが、もろもろの責任は負いかねます。