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!
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-experimentspage 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.
...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.
...