A Suicide Girl

stand by
girl

BEHOLD! SCROLLPOP!

I am static text and things that stay constant.

Yet, how will I fare

...when things get out of hand?

How to Use

Requires d3-color and d3-interpolator scripts

  1. Create a container with class 'scrollpop' and give it a height.
  2. Create children with class 'dynamic' to make it transition.
  3. Optionally, give children a 'pin' class to apply fixed position while scrollpop is intersecting viewport
  4. Define the attributes 'data-startstyle' (0%; "below the fold") and 'data-endstyle' (100%, bottom reached)

    5. Note: for `transform` values, only px are accepted. (this is due to the d3 dependency, and their parser doesn't accept % or vw/vh).
    Rules must be defined in both start and end.
    Only linear interpolation.

    Setting the scrollpop position and overflow can help with unwanted scrollbars. If you use the pinning feature, you must define a .fixed CSS rule:

  5. In JavaScript, call `new ScrollObserver()`