Kylo Ren CSS Page Preloader

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;
}
.
.
.

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

• Border-radius generator
• CSS triangle generator
• Ultimate CSS Gradient Generator
• cubic-bezier.com