Enhancing the person expertise of internet functions has all the time been a precedence of mine. I all the time come again to the identical although I’ve had for 20 years: “customers anticipate an internet app to work — let’s make the app a pleasure to make use of.” Through the years we have employed JavaScript to enhance the UX, however over time these methods both turn into clunky or get baked into the online languages themselves. One such characteristic is easy scrolling; a terrific UX enchancment however annoying if imperfect. Do you know which you could implement easy scrolling with simply CSS?
The scroll-behavior CSS property controls the scrolling technique for overflow parts with scrolling habits, and solely when triggered by navigation or CSSOM properties. The default scroll-behavior worth is auto, which represents no visible impact — instantly scrolling to the goal factor with no animation. To offer customers a easy scrolling expertise, you need to use the easy worth:
/* slide between objects */
.slideshow ul {
scroll-behavior: easy;
}
After all you do lose some visible management whenever you use a local browser API — most notably animation pace and animation curve. On the optimistic facet you needn’t add kilobytes of JavaScript that it’s good to preserve to attain a really comparable impact!
Write Higher JavaScript with Guarantees
You’ve got most likely heard the discuss across the water cooler about how guarantees are the longer term. The entire cool children are utilizing them, however you do not see what makes them so particular. Cannot you simply use a callback? What is the huge deal? On this article, we’ll…
Duplicate DeSandro’s CSS Impact
I lately stumbled upon David DeSandro’s web site once I noticed a tweet stating that somebody had stolen/hotlinked his web site design and code, and he determined to do the one logical factor to retaliate: use some easy JavaScript goodness to inject unicorns into their web page.
Source link
