Responsive jQuery One Page Scrolling Layout with Fixed Background
File Size: | 791 KB |
---|---|
Views Total: | 12427 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Fixed Scroll Background is a jQuery plugin for creating responsive and full-screen One Page Scrolling website layout with fixed scrolling background and smooth selection effects. Inspired by codrops's Fixed Background Scrolling Layout.
You might also like:
- jQuery Dynamic One Page Scrolling Plugin - Scrolld.js
- Apple iPhone 5S Website Like One Page Scroll Plugin For jQuery
- jQuery Plugin For Fullscreen One Page Scrolling Websites - fullPage.js
Basic Usage:
1. Load the latest jQuery javascript library and jQuery Fixed Scroll Background plugin files on your web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/jquery.debouncedresize.js"></script> <link rel="stylesheet" type="text/css" href="css/default.css" />
2. Load the other necessary javascript library fiels on the web page.
<script src="js/jquery.easing.min.js"></script> <script src="js/waypoints.min.js"></script> <script src="js/jquery.debouncedresize.js"></script>
3. Markup Html structure.
<div class="container"> <div id="scroller" class="scroller"> </div> </div> <div id="mainContent"> ... </div>
4. The javascript.
$(document).ready(function(){ $('body').fixedScroll({ // or provide a list of background images or colors 'backgrounds': [ 'images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg' ], // also specify the number of sections manually with 'numSections' // 'numSections': 5, // use 'sectionContent' to override what shows up in each section by default 'sectionContent': '' + '<div class="contentwrap">' + '<div class="content">' + '<header>' + '<h2>Title</h2>' + '</header>' + '<p>...' + '...</p>' + '</div>' + '</div>' }); // move the display content into the first section $('#section0 .content').empty() $('#mainContent').appendTo('#section0 .content'); });
Change log:
Fixed the download link. Thanks to: terryjett
This awesome jQuery plugin is developed by ebaumstarck. For more Advanced Usages, please check the demo page or visit the official website.