Last week, I created aninput 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 codesimple 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)
- Joined
I'd like the scale oscillation it has when moving from 0 to 0.5 and then 1, great trick with the shadow too.
- LocationAustin, TX
- WorkUI Manager / CSS Aficionado
- Joined
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.
- Joined
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.
- LocationAustin, TX
- WorkUI Manager / CSS Aficionado
- Joined
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?
- Joined
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 tooYou can check it if you want to, I used JS to generate the value but the styles are handle with CSS vars and calc.
- Email
- LocationAustin, TX
- EducationBachelors in Science & Advanced Residency in Software Engineering
- PronounsHe/They
- WorkFull Stack Engineer @ Open Austin
- Joined
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
- Joined
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.
- Email
- LocationAustin, TX
- EducationBachelors in Science & Advanced Residency in Software Engineering
- PronounsHe/They
- WorkFull Stack Engineer @ Open Austin
- Joined
Hahaha, my one true motive for being on this platform: promoting my crappy folk punk band 😈
- Joined
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!
- LocationAustin, TX
- WorkUI Manager / CSS Aficionado
- Joined
Thanks!
Great
- WorkAI/ML Engineer
- Joined
This is really cool
- Email
- LocationEarth
- EducationSelf-taught
- WorkFreelance Programmer | Fullstack Dev
- Joined
Nice job! I'd like to suggest that you addoutline: none to the input to remove the outline, as it does look a bit strange.
Otherwise, it's awesome!
- LocationAustin, TX
- WorkUI Manager / CSS Aficionado
- Joined
Thank you! About the outline, I cannot removeoutline: none because 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?
- Email
- LocationEarth
- EducationSelf-taught
- WorkFreelance Programmer | Fullstack Dev
- Joined
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!
Some comments may only be visible to logged-in visitors.Sign in to view all comments.
For further actions, you may consider blocking this person and/orreporting abuse
