experiment 5
SCROLLING TO REVEAL LINES OF TEXT
Link to Experiment 5
Planning for the experiment
Given that there is no way in linear texts to express multiple perspectives/events happening simultaneously, I wanted to express this simultaneity by layering five sentences — each representing an actant — over each other. Of course when layered, the texts aren’t actually legible; so I planned for viewers to be able to unravel the different perspectives by scrolling down.
Typesetting
After laying out the five sentences over each other using negative margin-bottom, I realised that using fixed units like px and em/rem would cause the text to wrap if the viewport width wasn’t large enough.
Hence, I used the vw unit for the font-size to prevent the text from wrapping.
Adding in JavaScript
Using the ’scroll’ eventListener, I equated the vertical scroll position with the margin-bottom of the paragraphs. Since I was selecting all the paragraphs, I had to increase the margin-bottom of every paragraph by using the forEach method.
Once scrolled (even just a little), the lines spread apart very abruptly. Then, scrolling more would gradually increase the space between the lines of text. This has probably got to do with the values. Since the margin between the lines is initially -11% , the margin suddenly becomes a positive value once scrolled.
Refining the scrolling effect
After fiddling around with different units and values used in the scrolling function, I came to a realisation that the units should match the ones used in the CSS styling for the paragraphs’ margin-bottom. Hence, the following changes were made:
- % instead of px.
- -11. This value is used because of margin-bottom: -11%. If scrollY = 0, then paragraph.style.marginBottom = `${scrollPosition - 11}%` is just - 11%. This prevents the lines of text from jumping abruptly like those in the above iterations.
