This was a very quick fix / hack requested by a student. It requires the scrollyteller theme and basic knowledge of how to use it (full width editing, using relevant scrollyteller class names such as swoosh, bgimage, waw etc and using generateblocks container elements).
The aim is to start an article with some graphical elements and some narrative texts to go along with it, and then as the user scrolls further down it changes to a more normal standard article layout.
You can see the result here:
How this works
This article has two images with class name ‘bgimage’ to make them appear as backgrounds, and then each of those images has three (identical) text pieces that flow over the images. The text pieces have the classname ‘swoosh’ which is required for any element to scroll over the stationary background image or graphic.
Then comes the hack. In order to get something that looks a bit more like a normal article I had to hack the scrollyteller theme a bit, but it is not very hard. I had to add another element to act as ‘bgimage’ so the normalk text could scroll over it. This element is not an image but a container element.
Sttings for the container element:
The element must cover the entire screen so it has a widht of 100% and a height of 100vh:
It also has classname ‘bgimage’:
And it probably needs to have a background colour, in this case a very light grey just to differentiate it a bit from the white. You can use any colour but be careful using heavy / intense colours behind text as it might affect readability.
The normal article text
We are still dealing with the scrollyteller theme so we need a swoosh element to go over the light grey background. That means we need another element with classname ‘swoosh’. For this example I used several paragraphs of dummy text and then added all these paragraphs to a container element and gave the container element the classname ‘swoosh’. That way we get a long article like piece of text.
I also gave this container element the classname ‘bookie’ which gives the paragraph text a semi transparent white background and a serif font (font can easily be changed, email me if you need to). This is meant to make longer texts be readable over background graphics, but can also be used just to make text appear normal with the grey dummy background we just made.
Because this is using full width page layout we need to limit the width of the article like text. On the container element set max width to something between 500-700px and also set margin left and right to ‘auto’.
Max width and auto margins ensure the text does not cover the entire width of the screen (bad for readability) and also centres it on the page.
This works but ideally I would like the last bgimage (in this case the old vide store) to scroll up once the user has scrolled past, but in this case it fades to the light grey background.
Contact me if you have issues 😉