DEV Community

loading...

Star Wars Hyperjump

annlin profile image ann lin ・1 min read

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/

Discussion

pic
Editor guide
Collapse
vms20591 profile image
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 ....
Collapse
annlin profile image
ann lin Author

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

Collapse
tomdienes profile image
TomDienes

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

Collapse
annlin profile image
ann lin Author

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

Collapse
tomdienes profile image
TomDienes

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

Collapse
ben profile image
Collapse
annlin profile image
ann lin Author

Aw thanks 😊