A rather geeky/technical weblog, est. 2001, by Bramus
Scroll Depth is a small Google Analytics plugin that allows you to measure how far down the page your users are scrolling. It monitors the 25%, 50%, 75%, and 100% scroll points, sending a Google Analytics Event at each one. You can also track when specific elements on the page are scrolled into view. On …
Continue reading “Scroll Depth – A Google Analytics plugin for measuring page scrolling”
Having seen a few single-page year in review minisites the past few weeks, it’s clear that Skrollr has become the de facto standard to implement parallax scrolling effects into your websites. The idea behind Skrollr is straightforward: link a target CSS property+value to a given scroll position, via data-* attributes: <div id="example" data-0="width:100%;" data-1500="width:0%;"></div> Skrollr …
Continue reading “Skrollr – CSS animations linked to scroll position”
pointer-events: noneGreat to see this proposed (many people are using it nowadays, boosted by the iPhone 5s page). .gallery { scroll-snap-type: mandatory; scroll-snap-points-x: snapList(786px, 1643px, 2483px, 3264px, 4054px, 4402px); } Don’t like the fact that one needs to specify explicit values (be it in pixels, ems, or percentages), as not all children can be of the …
A little Pen I knocked together to demonstrate “CSS Animations triggered on scroll” to some of my students. The key part is the animated class which actually starts the animation: it is only added once the element is in view. Check out this Pen! Note that the event handler is not debounced as we need …