As a frontend developer, it's always great to know Javascript. But, what if you don't know much of it or just want to use HTML ? If you want to manipulate css properties when user scrolls a page, there's Skrollr for your rescue!
Skrollr is a parallax scrolling library. Parallax scrolling is when the background images move slower than foreground images in a web page.Apart from that, this library allows you to apply all sorts of various css transitions,animations etc when a user scrolls through the document.
Here, we'll create a simple webpage, in which a ball rolls down a ramp when user scrolls down.
First of all, download the Skrollr.js file from here:
https://github.com/Prinzhorn/skrollr/tree/master/src
HTML AND CSS
Create a file named skroll1.html and add the boilerplate HTML code:
<html>
<head>
<meta charset="utf-8">
<title>Moving Ball</title>
</head>
<body>
<div class="container">
<h1>Moving Ball</h1>
<h3>Scroll up or down to make the circle move</h3>
</div>
</body>
<style>
</style>
</html>
Now, we'll draw two components on the screen: A trianglular ramp and a circular ball. Add the following elements inside container div:
<div id="circle"></div> <div id='triangle-bottomleft'> </div>
Inside style tags, add the css code to draw the above shapes:
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 500px solid red;
border-right: 500px solid transparent;
}
#circle {
width: 40px;
height: 40px;
background: cyan;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: relative;
bottom: -14px;
}
Now, let's add the transition properties for circle. Inside the #circle{ ... } tags, add the following lines:
-webkit-transition: 2s ease-in-out; -moz-transition: 2s ease-in-out; -o-transition: 2s ease-in-out; transition: 2s ease-in-out;
For demonstration purposes, we'll keep the position of container fixed, it's height and width to 100% and overflow property to auto.
.container {
width: 100%;
height: 100%;
position:fixed;
overflow-y: auto;
}
ENTER SKROLLR!
Include the required skrollr.js file into your webpage:
<script type="text/javascript" src='./skrollr.js' charset="utf-8"> </script>
Initialise the skrollr as:
<script type="text/javascript" charset="utf-8">
var s = skrollr.init();
</script>
That's pretty much all the Javascript we need!
Now, we need to add the css that we want to be applied when a user scrolls down or up. Change the <div id="circle"> </div> So that it looks like this:
<div id="circle"
data-0='transform: translate(0px,0px);'
data-100='transform: translate(490px,490px);'
></div>
What this code does is, it tells the browser to translate the circle div by 490px in X direction and 490px in Y direction when user scrolls down 100% (i.e. he/she reaches the end of webpage). When user scrolls up to the beginning of the page, it tells the browser to translate the circle back to its original position. The transition property specified earlier "eases" the transformation, that is, the transition of the ball does not happen suddenly, but is eased and spread over a time of 2 seconds.
Click here to see a codepen of the above code.
That's it! For more information about Skrollr, click here
No comments:
Post a Comment