March 26, 2018
Lemme set the stage a bit here.
You have a website and, like most, it scrolls.
This website will have modals. You’ll probably position: fixed the modal so that it’s predictably positioned regardless of scrolling. It’s possible the modal itself will scroll.
Notice the modal has a close button. We ca...
February 13, 2018
Recently we’ve stumbled upon a really nice effect on Akademi’s website: the main title of the page moves along as one scrolls down and changes depending on the section that is currently in the viewport. We thought this would be an awesome effect to recreate and play with different animations for the text as...
April 14, 2017
Smooth scrolling (the animated change of position within the viewport from the originating link to the destination anchor) can be a nice interaction detail added to a site, giving a polished feel to the experience. If you don’t believe me, look at how many people have responded to the Smooth Scrolling snippet her...
March 16, 2017
Scrolling is complicated. Nolan Lawson:
User scrolls with two fingers on a touch pad
User scrolls with one finger on a touch screen
User scrolls with a mouse wheel on a physical mouse
User clicks the sidebar and drags it up and down
User presses up, down, PageUp, PageDown, or spacebar keys on a keyboard
As it turns ...
November 29, 2016
The following is a guest post by Pieter Biesemans. Pieter is a front-end developer at Audience where he loves styling things with SCSS. He’s going to dig into what I’d call a bonafide CSS trick.
The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bot...
June 6, 2016
The following is a guest post by Michał Sajnóg, a front end developer at Netguru. Michał has created one of those “when you scroll to here, trigger this animation” libraries. One of the things I like about it is that it leaves as much as it can to CSS for creating and controlling the animation themselves...
May 6, 2016
Smooth scrolling is a user interface pattern that progressively enhances the default in-page navigation experience, animating the change of position within the scroll box (the viewport, or a scrollable element) from the location of the activated link to the location of the destination element indicated in the hash frag...