CSS parallax... to scroll like a boss!

#1

Just throwin this out there:

This is a fun parallax effect with pure css. I don’t understand it so I don’t know what to make of it, not least its bugs(?) like that it somehow messes up navigation! BUT the technique to only have to scroll a bit to get really far is very appealing. It makes it a lot easier to scroll long story rivers. Try it out with several tids opened.

The below includes various crap from my dabbling and because some parts were there in the demo where I found it, which presents it all in a respectable way.

tags: $:/tags/Stylesheet
:root {
  --translate: 100px;
}

.tc-page-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
height:1000vh;
xoverflow:auto;
}

x.tc-story-river,
x.tc-tiddler-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
xoverflow:auto;
}

.tc-page-container {
  background: radial-gradient(circle at center, lightgrey 25%, transparent calc(25% + 1px));
  background-size: 2rem 2rem;
}

x.tc-story-river {
  background: radial-gradient(circle at 15% 35%, darkorchid 6%, transparent calc(6% + 1px)),
    radial-gradient(circle at 35% 25%, darkorchid 5%, transparent calc(5% + 1px)),
    radial-gradient(circle at 45% 85%, darkorchid 5%, transparent calc(5% + 1px)),
    radial-gradient(circle at 65% 65%, darkorchid 6%, transparent calc(6% + 1px));
}

x.tc-tiddler-frame {
  background: radial-gradient(circle at 75% 25%, deeppink 15%, transparent calc(15% + 1px)),
    radial-gradient(circle at 25% 75%, deeppink 10%, transparent calc(10% + 1px));
}

x.tc-page-container {
  --translate: 50%;
}

.tc-story-river {
  --translate: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .tc-page-container,
  .tc-story-river,
  X.tc-tiddler-frame {
    height: calc(100% + var(--translate));
    animation: parallax linear;
    animation-timeline: scroll(root);
  }
}

@keyframes parallax {
  from { transform: 0; }
  to { transform: translateY(calc(var(--translate) * -1)); }
}

@layer base {
  * {
    box-sizing: border-box;
  }
  
  body {
    height: 300vh;
    margin: 0;
  }
}

.tc-menubar {position:fixed; top:0; /*doesn't work, it's scrolled off anyway*/}
4 Likes
#2

Neat! I only did a little cursory testing, as I don’t typically use Chromium, but I think you’ll also want to add the following pragma to the top of the stylesheet tiddler:

\rules except dash

This will prevent -- from being automatically converted to an endash (–).

Edit: or set the tiddler type to text/css, which will automatically disable most of the parsing. (This will also prevent you from making use of any other wikitext in the stylesheet, so I generally prefer \rules except.)

1 Like
#3

If this feature was somehow successfully made into a plugin (really just a stylesheet), it just struck me that a decent name for such a plugin would be “leveraged scroll” or “servo scroll” or some such. A possibly undesired effect, which probably is intrinsic to the concept, is that “dragging the scroll handle 1 cm” will cause different scroll distances depending on different page lengths. I don’t know if that is bad.

But, again, it feels really powerful to just scroll a tad to have the page move so effectively. For long pages, using a laptop with a… whatsitcalled… um, “navigation square”, I sometimes need to lift the finger to the top again because the first drag of the finger wasn’t sufficient.