<div> element from the document flow, moving it through the document and have the rest of the page content flow around the div as it moves around. I think this can actually be done already, given a bit of inginuity and work, given some additional constraints on the problem. With a bit of luck, researching this might prove productive.Assuming we narrow scope to moving a fixed width div vertically through a same width column of text content, I believe I could chunk up the text into text nodes, initially one per word, and track down the start of every new line in the text body (at present window width). Then, by easing the div upward (or downward) through the page, one line (a few nodes) at a time, employing a
position:static;, or for that matter position:relative; CSS attribute for it, it would let the surrounding text flow seamlessly around it, as it moves. (It should actually work just as well with a smaller div too, though the use case I have in mind will not require that.)This would render a chunky, text terminal style, line scroller. Further polishing it, we could fine tune it to a smooth style pixel by pixel scroller, by calculating the distance between lines and interpolating a suitable top padding for the element, to place it at just the right height every step of the way through the document.
Of course we wouldn't have to slide pixel by pixel through the entire stretch; most likely it will often look better to do a smooth sine curve slide over just a couple of frames, perhaps half a second or so, to cover a distance of a few hundred pixels in a dozen or so steps. And we could ease down the opacity of the nearest line or lines of text closest to the moving div too for still more effect.
This whole concept feels a lot like developing demo efects on the Commodore 64 or Amiga used to, back in the eighties or nineties. ;-)