Smith

Smith Process is a physical & digital

Web Development UX Prototyping 3D modeling Interaction Design
fabrication studio located in Vallejo, California and rooted in systems-thinking.

SAY HELLO

Process Study: Windowed Scroll

When Mende Design approached me to build the Sonoma Valley Museum of Art website there was a key interaction that needed to be figured out early on, prior to building anything else. It was such a pivotal bit of interaction and a huge endeavor for a subtle result.

My initial proposal sketch of the layering stack, and iterated into a model

The idea was to have multiple panels at key points throughout the scroll-height of the website that revealed various content below them in the z-index layering.

The complexity of building this came in the design requirement to have multiple background panes throughout the scroll-height, all nestled around dynamic, ever-changing content. As you can imagine, an interaction like this requires the entirety of the rest of the website to be architected with respect to this interaction – no small feat while maintaining SEO and ADA adherence.

I prototyped and sketched many versions of the architecture for this before settling on a reference pointer approach for its ability to allow the Museum to publish these background panes inline as they’re publishing the rest of the content, nice and simple and exactly how you’d want to manage publishing something like this!

With the reference pointer approach decided on I built a JavaScript module that sequentially harvests the inline-published panes denoted by class name in the standard flow of the page.  The module at runtime does the following:

  1. calculates the height, and overall offset top of each pane
  2. removes that pane from the standard page flow, and temporarily stores it as a variable
  3. places a relatively positioned div with a transparent background in the place where the removed pane previously lived, at exactly the same height as the pane
  4. plunks that pane that we stored into a background panes container

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const panes = grabAll(".pane")
let collection = []
panes.map(p => {
    parent
      .remove(p)
      .replaceWith(transW)
    collection.push(
      {
        'obj' : p,
        'h' : p.height,
        'ot' : p.offset().top
      }
    )
  }

Now that the sorting of content was decided on, I could move on to the actual interaction – this was all setup work up until this point. The module, now finished sorting and calculating, can start observing scroll, and its last job is to show the right pane in the background container at exactly the same time the transparent window in the natural scroll comes into view. And naturally… this all has to happen again on window resize!

Related

current: Windowed Scroll
next: M T