Star Wars Hyperjump

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/

Comments

[Meenakshi Sundaram Viswanathan]

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

[ann lin]

😳THANKS! Yup someone will explain in her next post :)

[TomDienes]

Maybe include a wider shadow in the animation..?
Maybe I will try it later...

[ann lin]

Let’s challenge, see whose shadow is bigger. 😂 I’ll update it later

[TomDienes]

See the Pen Star Wars Hyperjump by Tamás Dienes (@tomDienes) on CodePen.

[Ben Halpern]

Fabulous

[ann lin]

Aw thanks 😊