Scrolling section backgrounds

[jimjam-slam]

Another post-positconf enhancement I'd like to work on: assigning a video or image sequence as a full bleed background that animates on scroll.

Example: https://www.apple.com/airpods-pro

This is a pretty common scrollytelling technique - -although it can blow out page size, it means a video team can separately prep the visuals without too much engineering! And it would work well for people using packages like rayrender 🥳

[andrewpbray]

Sounds great! And wow, that examples is intense!

[andrewpbray]

#132 brings up another example of video functionality that would be very helpful and probably fairly easy to implement: a trigger effect that starts a video playing. Seems straightforward through JS .play()?

[jimjam-slam]

I think a video that autoplays (and potentially loops) when visible should be pretty straightforward! And maybe a .scale-to-cover class to match .scale-to-fill?

A video that progresses as the user scrolls is more complicated — I've seen a couple of libraries designed to do it, but if I could make it work with just Scrollama I'd love to. Might mean writing a few event handlers and streaming media hooks ourselves. I'll do some reading for that!

[jimjam-slam]

The Apple AirPods Pro example above actually demonstrates both techniques:

1. The AirPods that feature at the top and move on scroll are a PNG sequence:

   HTML of the PNG image sequence from the Apple site

   <div class="image-sequence-container-inner-hero">
     <canvas class="image-sequence image-sequence-hero" data-sequence-img-format-map="{&quot;large&quot;: &quot;png&quot;, &quot;medium&quot;: &quot;png&quot;, &quot;small&quot;: &quot;jpg&quot;}" data-sequence-basepath="/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/" data-sequence-img-format="png" data-sequence-load-kf="{&quot;start&quot;: &quot;a0t - 200vh&quot;, &quot;end&quot;: &quot;a0b&quot;, &quot;anchors&quot;: [&quot;.scroll-container-hero&quot;], &quot;disabledWhen&quot;: [&quot;no-enhanced&quot;, &quot;no-heavy-media&quot;, &quot;text-zoom&quot;, &quot;mq-large-short&quot;]}" data-sequence-progress-kf="{&quot;start&quot;: &quot;a0t - css(--r-localnav-height, a0)&quot;, &quot;end&quot;: &quot;a0t - css(--r-localnav-height, a0) + (a0h - a1h) - 18vh&quot;, &quot;anchors&quot;: [&quot;.scroll-container-hero&quot;, &quot;.sticky-hero&quot;], &quot;disabledWhen&quot;: [&quot;no-enhanced&quot;, &quot;no-heavy-media&quot;, &quot;text-zoom&quot;, &quot;mq-large-short&quot;]}" data-component-list="Sequence" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);" width="1440" height="810">
     </canvas>
     <picture class="hero-fallback-pic" data-lazy="" data-download-area-keyframe="{&quot;disabledWhen&quot;: [&quot;enhanced&quot;]}">
       <source data-empty="" srcset="data:image/gif;base64,R0lGODlhAQABAHAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" media="(min-width:0px)">
       <source srcset="/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/small/0000.jpg" media="(max-width:734px)"><source srcset="/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/medium/0000.png" media="(max-width:1068px)">
       <source srcset="/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/large/0000.png" media="(min-width:0px)">
         <img src="/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/large/0000.png" onload="__lp(event)" alt="Two white AirPods Pro earbuds facing each other. Silicone ear tips attached to compact earbud with black mesh on each.">
     </picture>
     <noscript>[a stringified version of the picture element]</noscript>
   </div>
   

2. A video of a person dancing autoplays after you scroll beyond that:

   HTML of the looping, autoplay video

   <video class="value-props-video" muted="" loop="" playsinline="" preload="none" data-inline-media-sources="{&quot;large&quot;: { &quot;1x&quot;: &quot;large&quot;}, &quot;medium&quot;: { &quot;1x&quot;: &quot;medium&quot;}, &quot;small&quot;: { &quot;1x&quot;: &quot;small&quot;}}" data-inline-media-basepath="/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/spatial-audio/" aria-label="Dancers moving expressively." src="/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/spatial-audio/large.mp4">
   </video>
   

The video has 100% width and height, and has object-fit: cover, which takes care of cropping it an aspect ratio that fits the available space (in line with the CSS-Tricks link above). Although, as you say, we might want to have our videos play and pause with JS when they enter visibility!

[trangdata]

This would be so neat! I'm hoping to apply the image sequence/gif idea to my closeread submission! Do we have an estimate for when this feature might be available? 🙏🏽

[andrewpbray]

It's exciting! You see the work here:

#139

I'm not sure if new features will be ready before the deadline, but if so, we'll be sure to update the github / docs site and send out a message to those that have submitted.