This is a messy prototype. Don’t use it for a serious project. It probably has several issues and it also spews out dozens of console.log messages. Try it and play around a bit and then wait for or find a more recent version with better documentation for more serious projects, such as exams….
Here is an example of this in action:
https://www.spacemoped.com/?page_id=723
Please note that the example linked above might be functioning poorly if I am testing new versions of Scrollyteller. Yes, I do the tests on the live server :=
Here is how it works:
Scrollyteller is a child theme of Generatepress. That means you must have Generatepress installed in order to use this. I also recommend using the Generateblocks plugin for controlling layout of scrolling elements.
Once you have installed Generatepress(must) and Generateblocks(recommended) you can install Scrollyteller. Click download below to get the .zip file with the extra scrollyteller features:
In order to Install the Scrollyteller theme go to:
Appearance > themes
Select ‘Add new’
Select ‘Upload theme’
Select the Scrollyteller file on your computer that you downloaded from the link above, no need to unzip.
Select ‘Activate’
Now your WordPress installation should be ready to make an image based fullscreen story. Here is How:
Setting up a new page
Make a new page. Then open the right hand panel inside the page editor. This panel typically has two tabs on top, ‘Page’ and ‘Block’. Choose ‘Page’. Now find the option in the panel that says ‘Content Contained’ and set it to ‘Full width’.
This is necessary so that we can choose to use the entire screen width for our content. A normal page layout will have margins for text and images but with the full width setting in Generatepress the entire screen is our canvas. The downside of course is that we have to make the page nice ourselves as opposed to a well made page template where text and images are positioned and spaced in a (hopefully) nice way.
How scrollyteller works with images
First you need some images in your media library. For optimal performance and image quality in full screen these should be quite large, but no too large. They should also be quite compressed, but not too much or too little.
For now I recommend images in landscape mode with a width of 2560 pixels. The height should be whatever gives the correct aspect ratio with the given width. This is standard in image editors. Photoshop has a little lock icon when resizing that will maintain the aspect ratio.
Upload images to the media library and then place the images on the page. For the images make sure the ‘size’ is set to ‘Full size’ (should be 2560 px wide or so).
Each image that should work as a background image needs an extra CSS class with the classname ‘bgimage’, you know short for ‘Background image’. To do this just click on the image in the page editor. The right hand panel should automatically jump to the ‘Block’ tab giving you the settings for this image. At the bottom of the panel click ‘advanced’ and then where it says ‘ADDITIONAL CSS CLASS(ES)’ you add ‘bgimage’.
Add text or other content that will flow over the images
Typically you will want one background to remain the bacground image until some new text or other content scrolls into the screen. Here is how you fix that:
First let’s describe simple paragraphs with text flowing over the image since this is the simples way. After each image you add the elements (in this case paragraph elements) that will flow over that image. Then after the next image you add the paragraphs for that image etc…
Each paragraph/element that shall scroll over the image need a specific CSS class name, just like the bacground images needed ‘bgimage’.
Add the classname ‘swoosh’ for each element that should flow over the backgrounds.
Save draft and preview.
Does it work? If not check that the class names have been added for each element.
Other classnames for scrolling paragraphs
Here are some other classNames that work in scrollyteller. You can use these to further control the placement and to some extent visuals of the scrolling content.
Use these in addition to the ‘swoosh’ class name:
rightie – Positions a paragraph to the right
leftie – Positions a paragraph to the left
centrist – positions a paragraph in the centre
halfwidth – postions a paragraph in the centre but it is wider than a centrist
bookie – Makes a paragraph with a semi transparent background and black text. It is made for the purpose of having longer block of text and making this more readable by giving it a background colour.
Using Generateblocks to control placement of elements
Maybe easier and better than the classnames above is using Generatblocks to control the placement of elements. For example if you want to constrain the width of several content elements (paragraphis, images etc) it is quite easy. Add a block with a limited width (try giving the block a left margin of 20-30% and a max width of 4-600 pxels for starters) and then place all the scrolling elements within that block and give them each the ‘swoosh’ class name.
With generatepress you can also compose a container that has for example a headline,an image, a caption and some paragraph text. This can all be one scrolling elements contained in the container and then the container gets the ‘swoosh’ class name. I have tried with several types of components/blocktypes as swoosh. It mostly works but if you start placing youtube videos or interactive maps it might result in trouble.
Good luck and don’t hesitate to contact me if you have trouble, or even better if you have suggestions for new features or how it should work 🙂