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?

media_1389829799320.png

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

media_1389829884126.png

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

media_1389829967839.png

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

Click on “New Rule”

media_1389830028246.png

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.

media_1389830157401.png

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

media_1389830235839.png

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

media_1389830358564.png

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 thought to “Advanced Scroll Kit Techniques: The Parallax Effect”

Leave a Reply

Your email address will not be published.