Tag Archives: scroll

Using Intersection Observers

With the Intersection Observer coming to Firefox, a nice article covering it appeared on Mozilla Hacks. The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an … Continue reading

Elsewhere , , Leave a comment

AOS – Animate on Scroll

AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down. By setting data-aos-* attributes on … Continue reading

Elsewhere , , , Leave a comment

CSS Only Scroll Indicator

There’s a pen embedded in this post. Visit this post on the Bram.us website, or see the Pen CSS only scroll indicator on CodePen. I was interested to see if I could make a scroll indicator with just CSS. You … Continue reading

Elsewhere , , Leave a comment

Prevent overscroll/bounce in iOS MobileSafari (CSS only)

No need to hijack touchstart via JavaScript as this little CSS snippet, preventing the rubber band scrolling (as shown on the left), works just fine: html, body { position: fixed; overflow: hidden; } Tested with iOS8, iOS9, and iOS10. As … Continue reading

Elsewhere , , , 9 Comments

rafscroll – chain your scroll events to requestAnimationFrame

new rafscroll(function() { // Do your thing here. }); Your monitor refreshes at 60 frames per second (fps). Scroll events, on the other hand, do not. Chaining your scroll events to a requestAnimationFrame ensures that your transitions and animations will … Continue reading

Elsewhere , , , , Leave a comment

Space.js – HTML-driven narrative 3D-scrolling

For our messages to communicate across efficiently, we need to create a powerful connection between the user and our medium. Today we are going to explore a new way of presenting stories on the web. And for this I’ve created … Continue reading

Elsewhere , , , , , Leave a comment

Everybody Scrolls.

We wanted to know how page design impacts user behaviors and to what extent visual cues help users scroll below the fold. To find out, we conducted user testing with 48 participants over 3 days. Everybody Scrolls. → Sidenote: Reminds … Continue reading

Elsewhere , , , Leave a comment

ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages

<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that’s all. </div> </div> ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate … Continue reading

Elsewhere , , , , , , Leave a comment

scrollReveal.js – Easily reveal elements as they enter the viewport

<div data-sr="enter left please, and hustle 20px"> Foo </div> <div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div> <div data-sr="enter bottom and scale up 20% over 2s"> Baz </div> <script src=’/js/scrollReveal.min.js’></script> <script> window.sr = new scrollReveal(); </script> Just add data-sr … Continue reading

Elsewhere , , , , , 2 Comments

Icons changing colors on scroll

Quite a simple technique: use :before and :after to inject two colored panels, each taking up 50% of the height. Then lay your inverted icons on top of them, and presto. Icons Filling Effect → Icons Filling Effect Demo → … Continue reading

Elsewhere , , , , Leave a comment