Serg Hospodarets Blog

Serg Hospodarets blog

Front-End frontiers
Serg Hospodarets
Native CSS Scroll Snap Points

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

...
Read full post  >
Convert a Chrome Timeline data to a GIF (video)

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
...
Read full post  >
Passing data from Sass to JavaScript: sass-to-js

The idea

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

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

...
Read full post  >