Basic info about skrollr.

js
best is to create the markup and then lay the scroller on top of it
absolute and fixed positions for best performance
where possible, try to animate these new CSS3 properties:
!
translate3d
!
scale
!
rotation
!
opacity
skrollr can animate any number of your css values:
!
width, height, padding, font-size, opacity, z-index, et al
skrollr can also animate colors, though it has to be RGB/RGBa values
simple markup and css with breakpoints
Setting up skrollr create header fade-out
1. google skrollr.js
2. go to github and download it
3. move the folder to the root folder
4. copy the skrollr.min.js into the js folder
5. go to the github documentation and copy the scripts
6. go to the html and just above the </body> tag, paste them in
7. correct the path to the js folder
As a test, we can run an initial animation.
skrollr works with HTML5 data- attributes which can be assigned to elements in the markup
For instance, from within the header tag, we could create a data- attribute, such as opacity,
and tell skrollr to change it as the header moves from the top of the viewport to when it has
been scrolled up and out of view a set number of pixels, say 400px.
skrollr creates the in-between frames of the two data- attribute values so the opacity would
fade evenly from 1 to 0 over the span of 400px.
Heres how to write the data- attributes:
1. find the header tag in the markup
2. add an HTML5 data- attribute directly after the word header :
!
<header data-top=opacity:1>
3. next, we can add a second attribute value at -400px with opacity equaling 0:
!
<header
!
data-top=opacity:1
!
data--400-top=opacity:0>
4. refresh the page and scroll down and youll see the header fade out as it moves up.

Lets consider the data- attributes some more, go to the github info graphic pdf and
download and open it.
Second row Relative, first two boxes represent what weve done initially. So the code
looks at when the top of the header div is at the top of the viewport and sets the opacity to
100%. Then, when the header moves to -400px (above and out of the viewport) the
opacity changes to 0%.
Look at and continue to refer to the info graphic so you are sure to understand what the
numbers relate to as you go.
Background animation create background parallax
The next thing we can do is make a change to the background div behind our images,
which will be a simple css addition, but which we can finesse with data- attributes in the
markup.
1. Find the background div called <letters> in the markup and then in the css add the line:
!
background-attachment:fixed;
2. adding this fixed background attachment keeps the background from scrolling so what is
in the div appears to move independently of the background.
3. next, we add the following data- attributes to the <letters> tag:
!
<div id="letters"
data-bottom-top=""
data-top-bottom="">
To get to know these attributes, try reading them from the end first, so1st is top of #letters
div when its at the bottom of the viewport and the 2nd one reads when the bottom of the
#letters div is at the top of the viewport (the order going forward is data-viewport-div).
So our animation will be moving the background image from when the top of #letters is at
bottom of viewport to where the bottom of the #letters is at the top of the viewport. This
sounds confusing, so spend time chewing on it.
4. Within the data- attributes, well add the following parameters:
!
<div id="profiles"
!
data-bottom-top="background-position: 50% 0%"
!
data-top-bottom="background-position: 50% -30%">
These values are the x and y coordinates, so initially the x is centered at 50% and the y is
at the top at 0%. Then, the animation will keep the x centered but shift the y up 30% as the
bottom of the div moves up towards the top of the viewport.

Relative positioning animate letters see skrollr2.html for this part

Relative positioning is good for targeting an element when it enters, leaves the viewport,
or when it is in the center, for example.
it is good for fading something out before leaving the viewport
make things fully visible and in clearest/best shape when they are in the center
see: Big Cartel Shop for elegance and artistry
To animate images, best is to set their positioning to absolute with a little padding around
them and then stick them in a relative container. This way you can control the parent
relatively and be best able to animate the child absolutely.
Here well animate the two images by fading their opacity and changing their size.
First, notice in the css that their positioning is absolute while their parent containers are
relative.
1. go to the markup, find the first image div and add data- attributes as follows:
<div class=ImgContainer>
<div class=imgWrapper left
data-200-bottom="opacity: 0"
data--100-bottom="opacity: 1">
!
!
!
<div class=inner R>
</div>
This will animate the image into opacity once the bottom of the wrapper div is 100px above
the viewport.
To effect the duration, we must increase the pixel distance, so here we can change the
200px to a lower number for a shorter duration or a larger number for a longer one.
2. to change timing of the animation for the second image, we can add a value to the first
data- attribute as well:
!
!

<div class="imgWrapper right

!
data-100-bottom="opacity: 0"
data-bottom="opacity: 1">
<div class=inner R>
!
</div>
</div>

3. now we can animate the scale to enhance the animation

4. to do this we can chain another attribute to our data by using a semi-colon:

!
<div class="imgWrapper right
data-100-bottom="opacity: 0; transform: scale(0.5)"
data-bottom="opacity: 1; transform: scale(1)">
!
!
!
<div class=inner R>
!
</div>
!
</div>
Timing animate invite card see skrollr2.html for this next bit.
To animate the invite:
1. we need to scroll down in the css and add to the #invite element as follows:
#invite{
/*this is all the same*/
!
margin:auto;
!
background:url('../images/invite2.jpg');
!
width:850px;
!
height:604px;
/*this is all added on*/
!
position:fixed;
!
top:50%;
!
left:50%;
!
margin-left:-425px;
!
margin-top:-302px;
!
}
The top 50% and left 50% works to center fixed elements in a way that margin:auto works
for relative elements. The way it works is first the top left corner is placed 50% down and
50% over. Next, we add margin-left and margin-top as negative numbers equaling half the
width and half the height so that the item is exactly in the middle of the viewport.
2. Now you will see the invite card at the top center over everything else on the page. To
compensate for this, we need to add relative positioning to the header so we can apply a
z-index of 2 to it so it will be in front of the invite element. We also need to add a z-index of
2 to the #letters and footer elements in order that the invite card is beneath them (If you
have troubles with the card showing through the lined paper background, give the card
element a z-index of -1).
3. Also, so we dont see the invite under the header, add a background color of #FFFFFF to
the header so it matches the html background color thats the same.

4. And of course, the #card needs a height in order to hold the space until the invite comes
in, start with 750px, about 150px more than the height of the element.
Now we go into the html and script the animation for the invite, starting with its size so it
scales up as it scrolls in. (We can add an opacity change later so we dont see it until after
the header is above the viewport.)
To do this, first we create a new data tag called an anchor tag. We do this because we are
now working with a fixed element so to target the position of the #invite we create an
anchor on the #card that targets the #invite:
<div id="card">
<div id="invite"
!
data-anchor-target="#card"
!
data-bottom-top=transform: scale(0.5)
!
data-top=transform: scale(1)
!
>
</div>
</div>
This will set the card to have a scale of 50% when the top of the element is at the bottom of
the viewport (i.e. when it is offscreen bottom that is, further down the page than what is
currently being viewed) and a scale of 100% when the top of the element is at the top of the
viewport.
5. Now we can also add a twist by rotating the image as it comes in:
data-bottom-top=transform: scale(0.5) rotate(120deg)"
data-top="transform: scale(1) rotate(0)">
6. we can also add an easing to the motion (take a look at the easing documentation at
gitHub):
transform[swing] and then : scale(1) rotate(0); (swing speeds the action in)
7. Lastly, we can add the opacity change so we dont see the card come in until after the
header fades out. To do this we add a semi-colon after the last transform.
"transform[swing]: scale(1) rotate(0); opacity:1"

Pausing bring in text overlay see skrollr3.html for this next bit.
1. First we create a div with our text that is between the closing tag of the #card element
and the closing tag of the #invite element :
!

<div id=featuring >Featuring Amazing Designs.</div>

2. Next we add css for it:

!
!
#featuring{
!
!
!
padding: 20px 30px; /*give the box space around the word*/
!
!
!
font-size: 2em;
!
!
!
background-color:#222222; /*sets background box to dark gray*/
!
!
!
color:#ffffff;
!
!
!
text-transform:uppercase; /*makes text upper case*/
!
!
!
width: 170px; /*sets box width*/
!
!
!
text-align: center;
!
!
!
position: fixed;
!
!
!
top: 50%;
!
!
!
left: 50%;
!
!
!
}
Testing this in the browser, we see that the text is there but not positioned correctly
because we havent offset the element from top/left/50%. We can use chromes inspect
element by adding a margin attribute and leaving the values at 0. Then, inspecting the
element we can change the 0s until we have the text positioned correctly something like
margin: -124px 0 0 128px;
3. Next we add data tags so we can change the opacity of the text to zero until the #card
fully animates in. The script says to turn the opacity to 0 and then when the #card is 100
pixels below the top, to change the opacity of #featuring to 1:
!

<div id=featuring
data-anchor-target=#card
data-top="opacity:0"
data--100-top="opacity:1
>Featuring Amazing Designs.</div>

4. Youll notice at this point that the text doesnt fully come into opacity. This is because all
of our animation is scrolling-based, so in order to add more animation, we need to add
height to the #card element so we can keep scrolling. To do this we can change the #card
height from 844 to 1500px. This will give us a little extra scrolling too, so we can add more
animation for instance to move the text up and out of the frame.

5.To add movement to the text so it moves in from the bottom in addition to fading in, well
add transform: translateY(200px) to the first data tag and transform: translateY(0px) to the
second. This will push the element down 200px below the css position and then move it to
the css position at the end.
!

<div id=featuring
data-anchor-target=#card
data-top="opacity:0; transform: translateY(200px)"
data--100-top="opacity:1; transform: translateY(0px)"
>Featuring Amazing Designs.</div>

6. Now we can add more script to move the text up out of the view, though first a pause so
the text stops long enough to be read before moving on. To do this, we set the animation
not to begin until after you scroll 300px, then at 350px, we begin to change the opacity and
the y position (the numbers are 400 + 450 because the base was 100 already so we add
them together):
!

data--400-top="opacity:1; transform: translateY(0px)"

data--450-top="opacity:0; transform: translateY(-400px)"

so altogether it looks like this:

!

<div id="featuring"
data-anchor-target="#card"
data-top="opacity:0; transform:translateY(200px)"
data--100-top="opacity:1;transform:translateY(0px)"
data--500-top="opacity:1; transform: translateY(0px)"
data--550-top="opacity:0; transform: translateY(-400px)"
>Featuring Amazing Designs...</div>

7. To continue with more text, you just keep increasing the number values, following the
pattern above. Also, by changing #featuring to .featuring, we can add numbers so the css
applies to :
<div class="featuring 2"
data-anchor-target="#card"
data--600-top="opacity:0; transform:translateY(200px)"
data--700-top="opacity:1;transform:translateY(0px)"
data--1200-top="opacity:1; transform: translateY(0px)"
data--1250-top="opacity:0; transform: translateY(-400px)"
!
>Gregarious People ...</div>

!
!

See if you can add:

<div class="featuring 3">and Delicious Food & Drink!</div>
and then: <div class="featuring 4">*_*</div>

For the last one you only need one set of data attributes to bring it up and then it can just
stay there.
Questions?