Star Wars Hyperjump

#css

Recreating the hyperjump effect from Star Wars using translateX.

@keyframes hyperjump {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  1% {
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(-100vw);
  }

P/S: Can anyone find a video clip for the hyperjump effect? I can't seem to find it on youtube or anywhere else.
P/P/S: To leaky and jiji, I didn't do this during working hours. I work hard at work. 🌝

Credits:
Stars from http://pluspng.com/png-141250.html
I drew the millennium falcon from http://elrumordelaluz.github.io/Pixelator/

Top comments (7)

Meenakshi Sundaram Viswanathan • Dec 21 '18 • Edited

Woahhh, that was awesome. It would be great if someone could explain how the following box-shadow stuff works and creates that millenium falcon.

box-shadow: 30px 20px 0 #363435, 35px 20px 0 #333132, 40px 20px 0 #363435, 45px 20px 0 #363435, 50px 20px 0 #363435, 55px 20px 0 #363435, 60px 20px 0 #363435, 20px 25px 0 #363435, 25px 25px 0 #363435, 30px 25px 0 #363435, 35px 25px 0 #363435, 40px 25px 0 #363435, 45px 25px 0 #363435, 50px 25px 0 ....