Advanced Scroll Kit Techniques: The Parallax Effect

My Digital Labor, Urban Space, and Materiality class will be using the drag-and-drop framework Scroll Kit to create multimedia “device narratives.” Here’s the tutorial I’ve created to teach them to use Scroll Kit. You’re welcome to download these instructions as a PDF or as a Word document, in case you’d like to modify them.

This is my second Scroll Kit tutorial; the first covers Scroll Kit basics.

What is the parallax effect?


Adding a parallax effect to your scroll means that as you scroll downwards through your narrative, some element of the narrative will change as you go. For example, we can make this puppy grow in size as we scroll downwards.

Here’s an example of the parallax effect.

Click on the element you’d like to change


Once you’ve clicked on the element, click on the Scroll Effects button (marked skrollr).

Scroll down to the part of your strip where you’d like the animation to end


As you scroll down, you’ll see that the number under current scroll point advances.

Click on “New Rule”


Once you’re at the place in your strip where you’d like the animation to end, click on the New Rule button. Don’t change anything inside the text window yet. Click Apply.

Alter your object.


If you’d like the image to grow in size, increase its size. Alternatively, you could change its transparency, location, or other attributes.

Click on the skrollr button again


Make sure the image is still selected and click on the skrollr button again. This time, click on the tiny refresh button just to the right of the second rule. Then click Apply and then Done.

Open your scroll in a new window


You must complete this step, or your parallax effect won’t work. Copy the URL for your scroll and open it in a new window. Now, as you scroll, down, your image should change.

One Reply to “Advanced Scroll Kit Techniques: The Parallax Effect”

Leave a Reply

Your email address will not be published. Required fields are marked *