{"id":1651,"date":"2014-01-16T10:58:21","date_gmt":"2014-01-16T17:58:21","guid":{"rendered":"http:\/\/miriamposner.com\/blog\/?p=1651"},"modified":"2014-02-22T23:31:43","modified_gmt":"2014-02-23T06:31:43","slug":"advanced-scroll-kit-techniques-the-parallax-effect","status":"publish","type":"post","link":"https:\/\/miriamposner.com\/blog\/advanced-scroll-kit-techniques-the-parallax-effect\/","title":{"rendered":"Advanced Scroll Kit Techniques: The Parallax Effect"},"content":{"rendered":"
\n

My\u00a0Digital Labor, Urban Space, and Materiality<\/a>\u00a0class will be using the drag-and-drop framework\u00a0Scroll Kit<\/a>\u00a0to create multimedia \u201cdevice narratives<\/a>.\u201d Here\u2019s the tutorial I\u2019ve created to teach them to use Scroll Kit. You\u2019re welcome to download these instructions as a\u00a0PDF<\/a>\u00a0or as a\u00a0Word document<\/a>, in case you\u2019d like to modify them.<\/em><\/p>\n

This is my second Scroll Kit tutorial; the first<\/a> covers Scroll Kit basics.<\/em><\/p>\n

<\/p>\n

What is the parallax effect?<\/h3>\n
\"media_1389829799320.png\"<\/div>\n
\n

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.<\/p>\n

Here’s<\/a> an example of the parallax effect.<\/p>\n<\/div>\n<\/div>\n

\n

Click on the element you’d like to change<\/h3>\n
\"media_1389829884126.png\"<\/div>\n
\n

Once you’ve clicked on the element, click on the Scroll Effects<\/strong> button (marked skrollr<\/strong>).<\/p>\n<\/div>\n<\/div>\n

\n

Scroll down to the part of your strip where you’d like the animation to end<\/h3>\n
\"media_1389829967839.png\"<\/div>\n
\n

As you scroll down, you’ll see that the number under current scroll point<\/strong> advances.<\/p>\n<\/div>\n<\/div>\n

\n

Click on “New Rule”<\/h3>\n
\"media_1389830028246.png\"<\/div>\n
\n

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

\n

Alter your object.<\/h3>\n
\"media_1389830157401.png\"<\/div>\n
\n

If you’d like the image to grow in size, increase its size. Alternatively, you could change its transparency, location, or other attributes.<\/p>\n<\/div>\n<\/div>\n

\n

Click on the skrollr button again<\/h3>\n
\"media_1389830235839.png\"<\/div>\n
\n

Make sure the image is still selected and click on the skrollr<\/strong> button again. This time, click on the tiny refresh <\/strong>button just to the right of the second rule. Then click Apply <\/strong>and then Done. <\/strong><\/p>\n<\/div>\n<\/div>\n

\n

Open your scroll in a new window<\/h3>\n
\"media_1389830358564.png\"<\/div>\n
\n

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.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

My\u00a0Digital Labor, Urban Space, and Materiality\u00a0class will be using the drag-and-drop framework\u00a0Scroll Kit\u00a0to create multimedia \u201cdevice narratives.\u201d Here\u2019s the tutorial I\u2019ve created to teach them to use Scroll Kit. You\u2019re welcome to download these instructions as a\u00a0PDF\u00a0or as a\u00a0Word document, in case you\u2019d like to modify them. This is my second Scroll Kit tutorial; the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[303,306,73],"class_list":["post-1651","post","type-post","status-publish","format-standard","hentry","category-digital-humanities","tag-scroll-kit","tag-scrollkit","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/1651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/comments?post=1651"}],"version-history":[{"count":5,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/1651\/revisions"}],"predecessor-version":[{"id":1668,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/1651\/revisions\/1668"}],"wp:attachment":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/media?parent=1651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/categories?post=1651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/tags?post=1651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}