search

qmd-lab / closeread

https://closeread.dev
MIT License
130 stars 5 forks source link

Scrolling section backgrounds #66

Open jimjam-slam opened 3 months ago

jimjam-slam commented 3 months ago

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 commented 3 months ago

Sounds great! And wow, that examples is intense!

andrewpbray commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 ```
    Two white AirPods Pro earbuds facing each other. Silicone ear tips attached to compact earbud with black mesh on each.
    ```

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

    HTML of the looping, autoplay 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!