- Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline
- Slider Scroll
- Add-to-Calendar Button
- Responsive Clock Ui
- Swiffy Slider
- Floating UI
- How To Build An Expandable Accessible Gallery
- Omicron drag&drop
Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimelineby Bramus Van Damme
Bramus shows us how to implement a reading progress bar with the new ScrollTimeline feature coming up within the next versions of Chrome and other browsers, including a polyfill from Robert Flack. As you read this … look at the orange bar at the top.
Slider Scrollby Edixon Piña
Ever wanted to create a web application consisting of individual slides? Then, this is for you. Edixon has to (nearly) perfect and clean solution for this on GitHub.
Add-to-Calendar Buttonby Jens Kuerschner
Jens offers a nice solution for everybody who wants their users to add an events to their calendar within two clicks. It is based on inline JSON-snippets and has several features like dynmamic days, timezone offsets, schema.org support and not to forget, a pleasing UI.
Responsive Clock Uiby Bedimcode
Marlon, a web designer from Peru, who is known on the web as Bedimcode, has created a stunning CSS- and JS-driven analog clock, with a light and a dark theme. Maybe a bit useless for a website, but wonderfully crafted and nice to look at. You can find a demo here.
Swiffy Sliderby DynamicWeb
Sliders and carousels are almost everywhere and there are many implementations out there, but this one from the team of DynamicWeb is a bit outstanding because of its features and application possibilities. Well done … espacially the well documentation. No questions left.
Floating UIby Unknown
Whoever has created this solution, is hardly anything to add to their claim: “Floating UI is a low-level toolkit to create floating elements. Tooltips, popovers, dropdowns, menus, and more.”. and it is hardly anything to add to their feature list. Whenever something needs to float … use this library.
Cards are a good way to bring order in a UI. How to make such cards exciting shows Eric with his collection of stunning card designs. Personally I’m in love with the ‘Profile Card Hover Effect’…
How To Build An Expandable Accessible Galleryby Silvestar Bistrović
Photo in galleries or other grid based collections should have the possibility to expand an item in order to see either the full photo or some details of the selected item. To avoid calling a detail page or something similar, Silvestar has developed a method to display this animated in fullscreen mode. Can’t wait to find a problem to check this out.
Omicron drag&dropby Franek Boehlke
LetMeScrollby Bruno Vieira
Quite a while ago a have implemented a custom scrollbar on my own in a Web App and it wasn’t so funny as I thought. Lot of things to care about. If Bruno had already finished his project at that time, I could have saved myself the work. He brings a native scroll behaviour for desktop and mobile, easy customization and multiple callbacks in 465 lines of vanilla JS code. Great job, Bruno.