DEMO (You can see it live here.)
Today nostalgia hit me hard,
so I did a video on my first cool thing. Googled for a Street Fighter splash screen. Entire ideation is recorded in the video below. Give me some love. <3
This screen gives me goosebumps.
Loading Animation
Check out the first load animation which is an attempt to simulate a boot up effect from the screen of an arcade game. So we do a blur of 2px and hue-rotate the color to a number that looks good. Do it for 800ms then 500ms in the opposite direction. (I didn't know we can do backwards. I know nothing.)
css
/* Stole this idea from twilioquest, it's freaking sick. */
.load {
animation: load 800ms 500ms backwards;
}
@keyframes load {
0% {
filter: blur(2px) hue-rotate(-150deg);
}
}
Arcade Retro Screen Overlay
Who would have known a single line image would trigger nostalgia and make a good screen overlay. We literally paste a translucent background image on the screen, and disable any click effect on it using pointer-events: none
so it will not block any interaction of other buttons (not that there is any at the moment).
Matthieu Pétel gave a really good suggestion to use repeating-linear-gradient
instead of svg for the retro overlay effect. (I've updated the code with slight tweak to the colors)
css
/* Stole this from twilioquest too. ^^ */
body:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: repeating-linear-gradient(#0D122B, #0D122B 2px, #565B73 2px, #565B73 4px);
opacity: 0.2;
z-index: 100;
content: "";
pointer-events: none;
}
Retro Text
Google font is our best friend here. I choose the font Permanent Marker
which is the closest I can find to replicate the Street Fighter
text and also the font Press Start 2P
which is used in most retro games.
SOFTWARE ENGINEER
Use a little skew
and rotate
and translate
to tilt the text Software
and Engineer
. I give them separate class name because we want to adjust them a little differently.
css
.title-top {
transform: skew(-10deg) rotate(-10deg) translateX(-2rem);
}
.title-bottom {
transform: skew(-10deg) rotate(-10deg) translateX(1rem);
}
Clipping the background turns out cool and works well on Safari, Chrome, Firefox, Opera browser. I am amazed.
.title h1 {
background: -webkit-linear-gradient(rgb(255, 18, 18) 30%, rgb(255, 215, 38));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
And I use <span>
to set some of the letters to be slighly bigger. So it looks more like the splash screen earlier.
PUSH START BUTTON
The retro text ("PLAYER 1 OR PLAYER 2"
etc) is done using text-shadow. One text-shadow (move it a little on the right and bottom behind the text) is enough to replicate the arcade style text in my opinion. I have two text-shadows for the credit © to make it "pop".
css
.grey-with-red {
color: rgb(192, 192, 192);
text-shadow: 2px 2px 0 rgb(192, 11, 11);
}
.purple-with-blue {
color: rgb(147, 154, 255);
text-shadow: 2px 2px 0 rgb(47, 61, 255);
}
.yellow-with-darkyellow {
color: rgb(226, 179, 24);
text-shadow: 0 2px 0 rgb(107, 77, 11),
2px 0 0 rgb(151, 109, 19),
2px 2px 0 rgb(151, 109, 19);
}
Source code over here:
I will add more interactions in the next one. I got to sleep now. Bye.
Follow me at https://twitter.com/linxea_
Top comments (20)
That's pretty cool
😳 Thanks :)
Congratulations with very good, my favorite game.
Great job.
thanksssssss
Nice :) The backwards animation is clever!
But instead of making a call to a .svg image for the screen pixels effect, you can simply use a repeating linear background.
Ex : background: repeating-linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 2px, transparent 2px, transparent 4px)
yes yes this is definitely a better approach. :) Gonna update mine
Plot twist, to animate it, you actually need to type correctly the Konami code!
[I know SF is a franchise from CapCom, that is the joke]
omg that's actually a brilliant idea 😱[haha]
And also a little fun algorithmic/basic JS problem my students seem to enjoy: go for it and let me know how nice it comes ;)
Amazing!
Looks Awesome!
<3 thanks!
Ohh. I thought you wrote a game for the web B)
@araslanove , what is your favorite game?
ah ha, that's the plan.
I'm a huge fan of the TwilioQuest site as well, this is lovely!
yes! they are amazing! <3
Looks awesome! The loading animation looks too cool 🙌
woohoo thanks! 🙌
Cool stuff! and please do moar.
i will do moar 😏