Kylo Ren CSS Page Preloader

A Star Wars Kylo Ren page preloader made with HTML and CSS only.

Today we want to share something a little bit different with you: an image-less animated Star Wars tribute to Kylo Ren made with HTML & CSS only.

This demo is kindly sponsored by PageCloud, the website builder you’ll love to use.
If you would like to become a demo sponsor, you can find out more here.

Wait, but why?

It’s 2017 and we have animated SVGs, videos, gifs, etc. So why doing all this with HTML/CSS? Well, besides being a great fun exercise it actually is an interesting idea for a website preloading animation because no images or scripts need to be requested, only the styles 😉

So, let’s have a look at some of the interesting parts of creating such an animation. The first thing you want to do is to divide the animation into several layers. In our case it is divided into 6 layers. Every layers starts with a .layers-xxx class and has its own @keyframes animation. In the animation we’ll be moving and scaling the layers. Adding a border radius and hiding the overlay saves us the work with the edges of the “drawing”.

<div class="page">
  <div class="page-content">
    <div class="layers-rock-last"></div>
    <div class="layers-trees-3"></div>
    <div class="layers-trees-2"></div>
    <div class="layers-rock-first"></div>
    <div class="layers-kylo"></div>
    <div class="layers-trees-1"></div>
  </div>
</div>

We can avoid using skew(), rotate() and scale() functions on various elements by using only simple elements like triangles and rectangles. However, for more complex looking elements like the trees or Kylo’s hands we will need to use some more CSS trickery.

.kylo-hand-left {
  position: absolute;
  right: 50%;
  top: 20px;
  margin-right: 38px;
  width: 14px;
  height: 60px;
  background: #1B0B35;
  z-index: 4;
  transform: skew(-20deg, 20deg);
  transform-origin: right top;
}
.kylo-hand-left:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 15px 0 0;
  border-color: #1B0B35 transparent transparent transparent;
}
.kylo-hand-left .hand-arm {
  position: absolute;
  left: 0;
  top: 55px;
  width: 10px;
  height: 40px;
  background: #1B0B35;
  transform: skew(8deg, 20deg);
  transform-origin: left top;
}
.kylo-hand-left .hand-arm:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 4px 0 0;
  border-color: #1B0B35 transparent transparent transparent;
}

Using the short <i> tag reduces the size and readability of the HTML. The scene is composed of rectangles combined with triangles, mostly using ::after and ::before pseudo elements.

.rock-1 {
  position: absolute;
  left: 44px;
  bottom: 0;
  width: 74px;
  height: 90px;
  background: #2E0D42;
}
.rock-1 .rock-center {
  position: absolute;
  right: 0;
  top: 0;
  width: 25px;
  height: 100%;
  transform: skew(10deg, 10deg);
  transform-origin: right top;
}
.rock-1 .rock-center::before,
.rock-1 .rock-center::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}
.rock-1 .rock-center::before {
  width: 25px;
  height: 100%;
  background: #370F45;
}
.rock-1 .rock-center::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 12px 0 8px;
  border-color: #43144D transparent transparent transparent;
}
.rock-1 .rock-left {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 10px;
  height: 48px;
  background: #2C0A3F;
}
.rock-1 .rock-left::before,
.rock-1 .rock-left::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
}
.rock-1 .rock-left::before {
  border-width: 48px 0 0 64px;
  border-color: transparent transparent transparent #43144D;
}
.rock-1 .rock-left::after {
  border-width: 48px 0 0 44px;
  border-color: transparent transparent transparent #2C0A3F;
}
.
.
.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

The light side vs. the dark side

One of the key parts of the whole scene is the lighting. To save as many @keyframes as possible we can add the .dark-bg class to every element that needs to change its opacity and animate it from 1 to 0. It’s cheap to animate and we don’t have to animate the background gradient that way.

Initially our light saber was having its width animated, but this makes the animation expensive, hence not very smooth, so choosing to animate the scale value is the way to go.

.lightsaber-light {
  position: absolute;
  left: 100%;
  top: 3px;
  width: 155px;
  height: 3px;
  border-radius: 1px;
  background: #DC2865;
  box-shadow: 0 0 16px 2px #DC2865;
  transform: scaleX(0);
  transform-origin: left top;
  animation: lightsaber 8s infinite ease-in-out;
}
@keyframes lightsaber {
  0% {
    transform: scaleX(0);
  }
  40% {
    transform: scaleX(0);
  }
  42% {
    transform: scaleX(1);
  }
  95% {
    transform: scaleX(1);
  }
  96% {
    transform: scaleX(0);
  }
}

Have a look at the time-lapse video of making the preloader:

We hope you enjoy this and find it inspiring!

References

Petr Urbánek

Front-end & UX, race & tuning car enthusiast #STARWARS #pcmasterrace

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 13

Comments are closed.
  1. Love it. I don’t even things like this need to be justified. It’s just straight out creative and fun. Well done. Really enjoyed it.

  2. Cool, yet Hard work. Wondering also what’s the name of the CSS/HTML viewer/coder software name used to layout the structure? Seems a good one.

    • HTML/CSS: Sublime Text 3 with my custom Theme
      live reload and LESS: codekit
      graphic: Sketch App