https://github.com/Prinzhorn/skrollr
Tiếp theo là example:
File index.html:
<html>
<head>
<title>Test Parallax</title>
<link rel="stylesheet" type="text/css" href="css/me.css">
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/skrollr.js"></script>
</head>
<body>
<section id="slide-1" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-anchor-target="#slide-1"
>
<div class="hsContainer">
<div class="hsContent"
data-center="bottom: 200px; opacity: 1"
data-top="bottom: 1200px; opacity: 0"
data-anchor-target="#slide-1 h2"
>
<h2>Simple parallax scrolling is...</h2>
</div>
</div>
</div>
</section>
<section id="slide-2" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-2"
>
<div class="hsContainer">
<div class="hsContent"
data-center="opacity: 1"
data-center-top="opacity: 0"
data--100-bottom="opacity: 0;"
data-anchor-target="#slide-2"
>
<h2>great for story telling websites.</h2>
</div>
</div>
</div>
</section>
<section id="slide-3" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-3"
>
<div class="hsContainer">
<div class="hsContent"
data--50-bottom="opacity: 0;"
data--200-bottom="opacity: 1;"
data-center="opacity: 1"
data-200-top="opacity: 0"
data-anchor-target="#slide-3 h2"
>
<h2>Now go and create your own story</h2>
</div>
</div>
</div>
</section>
<section id="slide-4" class="homeSlide">
<div class="bcg"
data-center="background-position: 50% 0px;"
data-top-bottom="background-position: 50% -100px;"
data-bottom-top="background-position: 50% 100px;"
data-anchor-target="#slide-4"
>
<div class="hsContainer">
<div class="hsContent"
data-bottom-top="opacity: 0"
data-25p-top="opacity: 0"
data-top="opacity: 1"
data-anchor-target="#slide-4"
>
<h2>and share mine.</h2>
</div>
</div>
</div>
</section>
<div id="skrollr">
<div id="footne" class="gap">
<div class="container">
<div class="inner-container">
<p>Hello word</p>
</div>
</div>
</div>
<div id="foolne1" class="gap">
<div class="container">
<div class="inner-container">
<p>the gioi mo ra nhe</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
skrollr.init({
smoothScrolling: false,
mobileDeceleration: 0.004
});
</script>
</body>
</html>
File me.css:
