Hakim El Hattab | The Blog Pros

August 16, 2022

Driveable Enviro400EV electric London bus

by Robin Hawkes

Checkbox Accent Color Pixel Art

by Shaw

La Casa de Papel HTML5 cinematics

by Olivier 3lanc

Interactive Tornado (Three.js & GLSL shader)

by Ksenia Kondrashova

Awesome Demos Roundup #20

After a long time, we’re back with a new demos roundup! This is a hand-picked collection of the most fun, creative and impressive web experiments we found on the interwebs in the past times.

Hope you enjoy it and that you can draw some inspiration and ideas from this set!

Checkbox Animations With Indeterminate State

by Jon Kantner

High-performance Depth of Field

by Pixotronics

Super Mario Scrollable Timeline

by Adam Kuhn

Infinite scrollable and draggable (WebGL)grid

by Jesper Landberg

Audio-reactive visual with Three.js

by Francesco Michelini

Dan Flashes Complicated Shirt Generator

by Adam Kuhn

Akari 1A • Pure CSS • repeating-radial-gradient

by Aris Acoba

Crunk dancer

by Arno Di Nunzio

The post Awesome Demos Roundup #20 appeared first on Codrops.

July 9, 2020

Memorize Scroll Position Across Page Loads

Hakim El Hattab tweeted a really nice little UX enhancement for a static site that includes a scrollable sidebar of navigation.

👀 If you've got a static site with a scrollable sidebar, it really helps to memorize the scroll position across page loads.

(left is default, right memorized) pic.twitter.com/bLgtILP1JP
— Hakim El Hattab (@hakimel) May 18, 2020

The trick is to throw the scroll position into localStorage right before the page is exited, and when loaded, grab that value and scroll to it. I’ll retype it from the tweet…

let sidebar = document.querySelector(".sidebar");

let top = localStorage.getItem("sidebar-scroll");
if (top !== null) {
  sidebar.scrollTop = parseInt(top, 10);
}

window.addEventListener("beforeunload", () => {
  localStorage.setItem("sidebar-scroll", sidebar.scrollTop);
});

What is surprising is that you don’t get a flash-of-wrong-scroll-position. I wonder why? Maybe it has to do with fancy paint holding stuff browsers are doing now? Not sure.

The post Memorize Scroll Position Across Page Loads appeared first on CSS-Tricks.

January 30, 2020

Sticky Table of Contents with Scrolling Active States

Say you have a two-column layout: a main column with content. Say it has a lot of content, with sections that requires scrolling. And let's toss in a sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that content in the main column. A fairly common pattern for documentation.

Bramus Van Damme has a nice tutorial on all this, starting from semantic markup, implementing most of the functionality with HTML and CSS, and then doing the last bit of active nav enhancement with JavaScript.

For example, if you don't click yourself down to a section (where you might be able to get away with :target styling for active navigation), JavaScript is necessary to tell where you are scrolled to an highlight the active navigation. That active bit is handled nicely with IntersectionObserver, which is, like, the perfect API for this.

Here's that result:

It reminds me of a very similar demo from Hakim El Hattab he called Progress Nav. The design pattern is exactly the same, but Hakim's version has this ultra fancy SVG path that draws itself along the way, indenting for sub nav. I'll embed a video here:

That one doesn't use IntersectionObserver, so if you want to hack on this, combine 'em!

The post Sticky Table of Contents with Scrolling Active States appeared first on CSS-Tricks.