Scrolling effects are increasingly popular these days.

Scroll snapping is used widely for a better separation of the provided content (vertical full height pages) or, for example, to emulate galleries behavior.

There are many popular plugins (fullPage.js, jQuery.panelSnap, jQuery Scrollify etc.) which provide such functionality.

Can you imagine how easy would be creating such effects using CSS only?

Meet the CSS Scroll Snap Points specification!

Demo

Recently the ability to record a Filmstrip was added to Chrome.

Now it’s available in Canary and Dev Channel versions of the Chrome Browser as DevTools experiment and is supposed to be enabled by default in one of the next versions of Chrome.

To enable it:

• Open chrome://flags/#enable-devtools-experiments page in Chrome and activate the “Enable Developer Tools experiments” flag
• Reload Chrome
• Open the DevTools Settings
• Select the “Experiments” tab
• Press “SHIFT” button 6 times 😉 to show hidden DevTools experiments
• Check the “Filmstrip in Network and Timeline Panel” checkbox
• Reload (open/close) the DevTools
• In the “Timeline” check the “Screenshots” checkbox

The idea

Once I needed to add component to show controls like the following:

The number of sections in it had to be configurable. To do it usually you can add two config variables: one in Sass, one in JavaScript.

But I wanted to have config only in one place and reuse it in the second. That’s how the idea to pass data from Sass to JavaScript came to me.

Demo

And here is the April 1st!

We already have some jokes from Google like com.google and Pac-Man in Google Maps.

There is the list of others.

So, want to provide some nice effect for your site/page? It’s easy to do adding only one line of CSS- CSS filter.

Frequently we want to add scrolling to some part of the page or box. E.g. to highlight something or just scroll to an anchor.

To provide better UX and feeling usually smooth scrolling is used.

Previously to implement it we had to use plugins like “jQuery.scrollTo” or similar solutions.

But dreams came true- there is a specification for native smooth scroll behavior API.

Demo