The creation of the lightsaber with CSS animation

lightsabers css
13.12.2017

We all love Star Wars. The last movie was recently released and judging from the early buzz it seems that fans won't be disappointed. I am planning to watch it today. My favorite thing about Star Wars are lightsabers, which is why my tutorial today introduces lightsaber with CSS animation.

My lightsaber is divided into several elements. The first one is the <div> element with light_saber class which later manages the saber position on the web page. Afterwards, I have added the <div> element with the back class which encompasses all saber components. The lightsaber components are classified like this: 

  • handle – the part saber in which the handle picture is located. You can always change this component part according to your preferences
  • core_glow - is the neon (white) light in the saber core (ray), and it's set inline
  • middle_glow - is the mild light of color which we wish to assign to the lightsaber, and it's set inline
  • outer_glow - this is component where the color is highly expressed, and also set inline
<div class="light_saber">
  <div class="back">
    <div class="outer_glow" style="background-color: #ff1d1d;"></div>
    <div class="middle_glow" style="background-color: #faccd2;"></div>
    <div class="core_glow"></div>
    <div class="handle"><img src="https://zcode.io/sites/default/files/lightSaber.svg"></div>
  </div>
</div>

As far as CSS is concerned, I have set the light_saber class in the display core with the height of 460px with the width of 10px. The back class is also set to the 460px height and 10px width rotating it for 180 degrees and setting it in an upright position. The outer_glow class is set to 0px height and 26px width with a radius of 5px. It is set to an absolute position with the blur filter and transition. I did the same with the middle_glow and core_glow class. The handle class is set to the bottom of the saber with 30px height and 55px width.

.light_saber {
  height: 460px;
  width: 10px;
  margin-left: auto;
  margin-right: auto;
}
.back{
  height: 460px;
  width: 10px;
  position: relative;  
  transform: rotate(180deg);
}
.outer_glow{
  height: 0px;
  width: 26px;
  border-radius:5px;
  filter: blur(10px);
    position: absolute;
    left: -8px;
    top:85px;
    transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.middle_glow{
  height: 0px;
  width: 10px;
  border-radius:5px;
  position: absolute;
  top:85px;
  filter: blur(2px);
  transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.core_glow{
  height: 0px;
  width: 6px;
  background-color: #fff;
  border-radius:5px;
  position: absolute;
  top:85px;
  filter: blur(1px);
  transition: all 0.6s cubic-bezier(0.860, 0.000, 0.070, 1.000);
  left: 2px;
}

.handle{
  height: 30px;
  width: 55px;
  position: absolute;
  top:0;
  left: -22px;
  cursor:pointer;
}
.handle img{
  width: 100%;
  height: auto;
  transform: rotate(180deg);
}

In order to make the animation and the saber plug work properly, I have used the open class and glow keyframe animation. With the open class I have adjusted the saber hight and its glow animation.

.open .outer_glow{ height: 370px; animation: glow_animation 0.8s infinite ;}
.open .middle_glow{ height: 350px; animation: glow_animation 0.8s infinite ;}
.open .core_glow{ height: 347px;}

@keyframes glow_animation {
  0% {
   transform: scaleX(1);
  }
  20% {
   transform: scaleX(1.1);
  }
  30% {
    transform: scaleX(1.2);
  }
  60% {
    transform: scaleX(1.05);
  }
  80% {
    transform: scaleX(1.1);
  }
  100% {
    transform: scaleX(1);
  }
}

Another thing I've added is the click function in jQuery that opens the saber.

$(".handle").click(function(){
    $(".back").toggleClass("open");
});

Below you can see your finished result and few more examples.