Welcome

Intro

Welcome to this Skrollr tutorial! This tutorial will show you how to use the Skrollr plugin and the data attribute to quickly and easily add cool transitions and effects.

After adding the Skrollr plug-in to your HTML code, users can start assigning data points. Data points represent how far you have scrolled down from the top of the page.

According to the scroll counter in the top-right corner, we are around 2000 data points.

How It Works

Next you can start adding data points to your HTML code to make the Skrollr magic happen. Typically each data set will have four different data attributes. The example below defines how a sentence will behave based on the data attributes assigned to it.

The first data point defines where the sentence is and when it is going to start appearing. At 400 data points its location is 100 percent below the top of the screen and its opacity is zero, meaning it's invisible.

The second data point defines when the sentence will be fully visible. At 1000 data points the sentence will be fully on the screen and visible at opacity 1.

The third data point is blank, which causes the sentence to pause on the screen until 1500 data points.

Lastly, the fourth data point defines when the sentence will fully disappear. At 2000 data points the sentence will be -100 percent from the top and invisible at opacity 0.

Attributes, such as top and opacity, can be substituted for other attributes to yield different effects.

Transitions

For example, you can create interesting transitions by making things slide in and out using top, bottom, right and left.

Rotate in and out to add a dynamic effect using transform.

Or disappear completely using opacity.

Transitions

Directions, transform and opacity are all different values that can be used within a data attribute.

Color

You can also do fun things with color, like change the background color

and text using RGB values.

You can even change the color of individual words.

That covers some of the basics. Swipe or arrow-right over to go to page 2.