Lightweight jQuery Parallax Scrolling Plugin - VScroll.js
| File Size: | 2.01MB |
|---|---|
| Views Total: | 4567 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
VScroll.js is a super tiny jQuery plugin to implement vertical parallax scrolling effect on your website when scrolling up or down.
Basic Usage:
1. Load the jQuery javascript library and vscroll.js in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.vscroll.js"></script>
2. Create the html.
<section class="page_section" id="first"></section> <section class="page_section" id="first_2"></section> <section class="page_section" id="first_3"></section>
3. The sample CSS.
#first {
background: url(../images/bg_gray_0.png) 50% 0 no-repeat fixed;
}
#first_2 {
background: url(../images/bg_gray_1.png) 50% 0 no-repeat fixed;
}
#first_3 {
background: url(../images/bg_gray.jpg) 50% 0 no-repeat fixed;
overflow: hidden;
}
#first, #first_2, #first_3 {
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
overflow: hidden;
}
4. The javascript.
<script type="text/javascript">
$(document).ready(function(){
$('#first').VScroll(0.1);
$('#first_2').VScroll(0.1);
$('#first_3').VScroll(0.1);
});
</script>
This awesome jQuery plugin is developed by JeewhanKim. For more Advanced Usages, please check the demo page or visit the official website.











