6
Flight Slider in HTML + CSS
source link: https://dev.to/alvaromontoro/flight-slider-in-html-css-3024
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
54
2
3
3
3
Flight Slider in HTML + CSS
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?
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK