Last week, I created an input range that looks like a plane flying to its destination (move the plane right and left):
I tried to add as many details as possible while keeping the code simple and independent of external resources (JavaScript or images):
- It uses a single HTML element (an input range, although it should be a
<progress>) - It includes a single JS command to update a CSS variable
- The plane takes off and lands using trigonometric functions
- Using container queries, the plane changes into a helicopter in smaller sizes (although I wouldn't recommend it to go from NYC to Madrid)
- Both the plane and helo are CSS art, not SVG (again with the independence of external resources... although I'll admit it would look better with SVG)
- It has printing styles
- It was coded with accessibility in mind (although it may not be perfect): works with a keyboard and also in high-contrast mode
- It will work in all modern browsers
Any feedback? I will write an article this weekend with more details on how it was coded. Anything you'd like me to include about the code or the process?
Top comments (22)
I'd like the scale oscillation it has when moving from 0 to 0.5 and then 1, great trick with the shadow too.
That's where I used the trigonometry functions: sin(0) = 0, sin(π/2) = 1, and sin(π) = 0. So I used the range value to calculate the scale multiplying by pi.
The same trick was used for the shadow: farther and lighter at the middle part, and closer and darker at the edges.
Wow! That's really cool! You know, me I'm different, haha. I would probably have used a base64 SVG for the plane, a shadow filter (for the shadow obviously), and create a function in JS to generate the oscillation and assign it to a custom property. But I would hardly have thought an almost pure CSS solution for that. I checked your YouTube channel and website, keep doing what you love.
Have you considered creating beautiful layouts and components? I'm pretty sure that with your skills, you can create things that standout and that other devs would love to follow along you in your tutorials to create stuff for their portfolios and websites, just a suggestion.
Thank you. To be fair, using SVG and JavaScript with this component –even if only one more line than what I added–, could improve the experience considerably. About the components... Maybe I could try?
Well, haha, it was just a suggestion... I mean, is what I personally thought it could help you to get more audience, because you have an hability that not everyone has.
You know, just yesterday I uploaded a redesign of my portfolio website, in it I used oscillation in elements that scale according to the scroll, I already had that but your plane shadow slider inspired me to add some glows that oscillate too You can check it if you want to, I used JS to generate the value but the styles are handle with CSS vars and calc.
Any time I see folks doing pure CSS solutions when they could've easily chosen another tech to make their life that much easier, I have to give credit where its due. That's such a zen approach and honestly, such a flex. It's impressive as heck.
Also, @schemetastic, sick portfolio! That has so much charm and personality to it
Thanks Nathan! It was a lot of hard work, I hope one day it pays off.
Interesting music you have there by the way, haha.
Hahaha, my one true motive for being on this platform: promoting my crappy folk punk band 😈
Well... is working then, haha😂
“Depression is One Hell of a Drug (Imbalance)” seems pretty deep, and yes, negative thoughts are addictive I've experienced that many times! But once you embrace positive thoughts they become addictive too, but they require more efforts to produce.
Very cool demo!
Thanks!
I freaking love it!
Looks really nice!
Great
The trigonometry functions just blow my mind... That's amazing, Álvaro!!!
This is really cool
This is really cool
Nice job! I'd like to suggest that you add
outline: noneto the input to remove the outline, as it does look a bit strange.Otherwise, it's awesome!
Thank you! About the outline, I cannot remove
outline: nonebecause it would be an accessibility issue... but it does look a bit weird. Maybe I could reduce it to just the airplane? Or the bar but not the airplane?Oh, I see! Perhaps the bar only would look better. I'm not very good at making style changes, though. Do what you think is best. Again, awesome project!
Love it! All that CSS to create a ✈️ and 🚁 when I would've just used an emoji rotated to point them in the right direction.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.