Skip to main content
CSS is fun and cool and I like it.
Article

An Overview of Scroll Technologies

Scroll-related animations have been used on the web for years. In recent years, they’ve started to become more common, perhaps in part due to devices being higher-performing and thus able to handle more animation. 

There are a number of scroll related technologies out there, so this article’s aim is to provide an overview of them and tools to help choose the one that’s right for you. I’d argue that these technologies can be broken down into two broad categories: ones … Read article “An Overview of Scroll Technologies”

Article

Fixed Headers, On-Page Links, and Overlapping Content, Oh My!

Let’s take a basic on-page link:

<a href="#section-two">Section Two</a>

When clicked, the browser will scroll itself to the element with that ID: <section id="section-two"></section>. A browser feature as old as browsers themselves, just about.

But as soon as position: fixed; came into play, it became a bit of an issue. The browser will still jump to bring the newly targeted element into view, but that element may be obscured by a fixed position element, which is pretty bad UXRead article “Fixed Headers, On-Page Links, and Overlapping Content, Oh My!”

Article

Using IntersectionObserver to Check if Page Scrolled Past Certain Point

When a web page scrolls, that’s a DOM event. I can find out how far a window has scrolled at any time with window.scrollY. I can listen for that event and get that number:

window.addEventListener("scroll", () ={
  console.log(window.scrollY)
});

Let’s say I want to know if the user has scrolled down 100px or more. I could test and see by seeing if window.Y 100. Here I’ll log if we are or aren’t:

window.addEventListener("scroll", () ={
  if 
Read article “Using IntersectionObserver to Check if Page Scrolled Past Certain Point”
Article

The Power of Custom Directives in Vue

When you’re initially learning a JavaScript framework, it feels a little like being a kid in a candy store. You take in everything available to you, and right off the bat, there are things that will make your life as a developer easier. Inevitably though, we all reach a point working with a framework where we have a use-case that the framework doesn’t cover very well.

The beautiful thing about Vue is that it’s incredibly feature-rich. But even if you … Read article “The Power of Custom Directives in Vue”