*NOTE: WordPress purchased Scroll Kit and has taken the site offline.
This walkthrough explains how to create a multimedia story using free parallax scrolling software (Scroll Kit). Here are some examples of scrolling style stories:
The Manhunt for Christopher Dorner
You’ll want to start by clicking on the link and signing-up for a Scroll Kit account. Once logged-in, you should see this screen:
To start creating your first scroll, click the ‘compose’ tab at the bottom right of the main window. You should then see this screen:
Click the ‘Use kit’ button under the ‘Blank’ template (top left).
This is the main Scroll Kit interface.
Start by clicking the settings button (looks like a flywheel) and adding some basic information about your scroll (i.e. name and description) for SEO purposes. This is also where you’ll find the embed code for your scroll in case you want to self-host it.
Add a background: At the top of the scroll (this can be either a photo or a video). To add the content, click anywhere inside the vertical blue bar on the left side of the screen to reveal this window:
All photos and videos must have their own URL. For photos, upload to an image-hosting website (such as Flickr or Picasa), a content management system (such as WordPress) or a web host (via FTP). Video must be hosted by YouTube or reside on your own web host’s server (if the latter, the video files must be in h.264 format and less than 30 mb). Experiment with settings. For images, I prefer using the ‘fixed’ setting. For videos, I prefer hiding the ‘controls’ and ‘start playing on scroll.’ For fonts, avoid using anything too fancy (beyond Times, Helvetica, Arial). If you want to use more original fonts (for pull-quotes and headlines, for instance), use Photoshop or Illustrator to create .pngs with transparent backgrounds.
Add a headline text field: Close the ‘Background’ window and click the text tool icon. Click on the layout to create a text box. Paste and format text, expand text box as needed. Make the background of the text box transparent using the ‘background color’ setting (icon is a paint bucket). After formatting, drag the text box by its edge and place it over the background content.
Add body text: Click the ‘new text strip’ button at the bottom of the page and paste/format 2-3 paragraphs of text. Using a larger font size (such as 14 or 16) is recommended.
Add a pull-quote: An easy way to add a pull-quote is by duplicating your headline text box using the duplicate button (just to the left of the font family menu on the horizontal toolbar). After duplicating, create a ‘new strip’ and drag the copy down into the new strip area.
Animate content: Your pull-quote should placed in the position you want it to be when the animation ends. With the pull-quote text box selected, click the ‘skrollr’ button on the horizontal toolbar at the top of the page. Add two new rules. Scroll up to the top (where you first placed your background content) — this is where your animation will begin (in this case, it’s where your pull-quote will begin sliding from the left or right toward the center of the layout. Now click the refresh button to the left of the first rule. Click inside the CSS code field and adjust either the right or left value to -1500 (meaning it’s off the page when the animation begins). Here’s another tutorial on using the ‘skrollr’ button.
Important: Add a home button hyperlink at the end of your story that links back to the home page of your J410 website.
Test your skroll: When finished, click the ‘done’ button and copy/paste the URL into a new window or tab in your web browser (*note: the scroll will only work once you copy/paste the URL into a new browser tab). Scroll Kit also works better in some browsers than others (I’ve had the most success using Chrome).
Exporting: Click on the gear icon, and then click the Export Code link at the bottom of the window. This will prompt your browser to download a folder containing all the relevant Scroll Kit files (including an index.html file, a style.css file and script.js file). Unzip the folder, and add all three files to the appropriate folder in your website’s directory. Note: your Scroll Kit story will not have a header image or a navigational menu, so it’s essential that you provide a link at the end of the story back to your website’s home page.
Lastly, in Dreamweaver, relink the Scroll Kit’s style.css and script.js files to the index.html page exported by Scroll Kit (find the code for each by searching for ‘style.css’ and ‘script.js’ using Command+F (find)). If some of your font styles are not showing up correctly, edit these in Scroll Kit so they’re using a normal font (or create pull-quotes in Photoshop or Illustrator and save as .jpegs).
