Professional Documents
Culture Documents
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.
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
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):
!
<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>
!
!
For the last one you only need one set of data attributes to bring it up and then it can just
stay there.
Questions?