Skip to content

Instantly share code, notes, and snippets.

@Bellfalasch

Bellfalasch/skrollr-full.html

Created February 4, 2016 09:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Bellfalasch/7029de0eb4f40a547cdd to your computer and use it in GitHub Desktop.
Save Bellfalasch/7029de0eb4f40a547cdd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
skrollr-full.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="IE=Edge" http-equiv="X-UA-Compatible" />
<title>Let’s test Skrollr!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Insert code -->
<div class="block" id="block1"
data-start="padding-left:20px;"
data-500-start="padding-left:400px;"
>
<p>Some text that we will try and animate in a cool and easy way!</p>
</div>
<div class="block" id="block2">
<div
data-600-top="width:100px; height:100px; background-color:red;"
data-300-top="width:300px; height:300px; margin-top:0px;"
data-top="margin-top:300px;"
>
<!-- Empty ^^ -->
</div>
</div>
<div class="block" id="block3">
<div
data-750-top="margin-left:-400px; width:100px;"
data-top="margin-left:0px; width:500px;"
>
<!-- Empty ^^ -->
</div>
<div
data-400-top="background-color:hsla(255,70%,100%,0.1)"
data-top="background-color:hsla(255,100%,100%,1.0)"
>
<!-- Empty ^^ -->
</div>
<p
data-600-top="padding-top:400px; opacity:0;"
data-200-top="padding-top:10px; opacity:1;"
>
Lorem ipsum doler sit amet!
</p>
</div>
<script src="skrollr.min.js" type="text/javascript"></script>
<script>
// Start Skrollr
window.onload = function() {
skrollr.init({
forceHeight: false
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment