93 lines
4.2 KiB
HTML
Executable file
93 lines
4.2 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
|
|
<head>
|
|
<title>ScrollIt.js by @ChrisPolis</title>
|
|
<script src='jquery-1.10.2.min.js' type='text/javascript'></script>
|
|
<script src='../scrollIt.min.js' type='text/javascript'></script>
|
|
<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
|
|
<link href='style.css' rel='stylesheet'>
|
|
<script>$(function() { $.scrollIt(); });</script>
|
|
</head>
|
|
<body>
|
|
<div class='nav-container'>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a class='active' data-scroll-nav='0'>About</a>
|
|
</li>
|
|
<li>
|
|
<a data-scroll-nav='1'>Usage</a>
|
|
</li>
|
|
<li>
|
|
<a data-scroll-nav='2'>Options</a>
|
|
</li>
|
|
<li>
|
|
<a data-scroll-nav='3'>Credit</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<section data-scroll-index='0'>
|
|
<div class='content'>
|
|
<h1>ScrollIt.js</h1>
|
|
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Check out this jQuery plugin - ScrollIt.js" data-via="ChrisPolis">Tweet</a>
|
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=cmpolis&repo=scrollIt.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
|
<h2>About</h2>
|
|
<p>ScrollIt.js<i>(scroll•it•dot•js)</i> makes it easy to make scrolling pages like this one or add scrolling functionality to existing pages. <a href='http://bytemuse.com/post/easy-scrolling-pages-with-scrollit-dot-js/'>Here's a brief blog plost explaining it.</a></p>
|
|
<h4>This is why it rocks:</h4>
|
|
<ul class='why-list'>
|
|
<li><b>Easy to implement:</b> One JS call, just put data- attributes on the DOM</li>
|
|
<li><b>Lightweight:</b> ~1kb minified</li>
|
|
<li><b>Active Class:</b> Your navigation is updated automatically</li>
|
|
<li><b>Configurable:</b> Set the animation easing, duration, callbacks and more</li>
|
|
<li><b>Keyboard Navigation:</b> Press the up and down keys to move...</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<section data-scroll-index='1'>
|
|
<div class='content'>
|
|
<h2>Usage</h2>
|
|
<p>
|
|
1) Include jQuery and scrollIt.js
|
|
<script src="https://gist.github.com/cmpolis/5954658.js"></script>
|
|
</p>
|
|
<p>
|
|
2) Put a <i>data-scroll-index</i> attribute on each section
|
|
<script src="https://gist.github.com/cmpolis/5954675.js"></script>
|
|
</p>
|
|
<p>
|
|
3) Put corresponding <i>data-scroll-nav</i> attributes on each nav element
|
|
<script src="https://gist.github.com/cmpolis/5954686.js"></script>
|
|
</p>
|
|
<p>
|
|
4) For links to sections, put on a <i>data-scroll-goto</i> attribute
|
|
<script src="https://gist.github.com/cmpolis/5954690.js"></script>
|
|
</p>
|
|
<p>
|
|
5) Call <i>scrollIt()</i>
|
|
<script src="https://gist.github.com/cmpolis/5954703.js"></script>
|
|
</p>
|
|
<p><i>View the source of this page for an example</i></p>
|
|
</div>
|
|
</section>
|
|
<section data-scroll-index='2'>
|
|
<div class='content'>
|
|
<h2>Options</h2>
|
|
<p>To customize scrollIt.js, simply pass in an options object: <i>(defaults shown)</i></p>
|
|
<script src="https://gist.github.com/cmpolis/5954639.js"></script>
|
|
</div>
|
|
</section>
|
|
<section data-scroll-index='3'>
|
|
<div class='content'>
|
|
<h2>Credit</h2>
|
|
<p>ScrollIt.js was created by <a href='http://twitter.com/chrispolis'>@ChrisPolis</a>.</p>
|
|
<p>Feel free to use, share and fork it. <a href='https://github.com/cmpolis/scrollIt.js'>It's on Github.</a></p>
|
|
<p>Enjoy!</p>
|
|
<p class='bottom-link'>
|
|
<a data-scroll-goto='0'>Back to top</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html>
|