A very basic page stacking system. Learning to create jQuery plugins.
Assumes usage of:
- [jQuery] (https://jquery.com/) for easier DOM manipulation
- [TweenMax] (https://greensock.com/) for simplier animation controls
Add myPageStack.js
<script src="js/myPageStack.js"></script>
Have a div with the id of my-page-stack.
<div id="my-page-stack"></div>
Have section divs nested inside my-page-stack.
<div id="my-page-stack">
<div class="section"></div>
<div class="section"></div>
</div>
For dot navs, scrollable sections etc, follow index.html and app.scss for configurations.
Add the script that attaches myPageStack to the page.
<script type="text/javascript">
$( '#my-page-stack' ).myPageStack({
// change settings or else can remove them
stacked : 3, // 1 is scroll, 2 is stack, 3 is reverse stack
callback : false, // should there be a callback to section
dotNav : true, // is there a dot menu
topNav : true, // is there a top menu
loopTop : false // loop sections
});
// section animations
$( '#my-page-stack' ).on( 'section', function( e, which ) {
// which is a number index from 0 to x
// alert( which );
});
</script>
- Add tooltip for dot menu buttons
- Combine scolling functions to minimize scripts
Feel free to use this or point out any mistakes.
[@Kelvin___] (https://twitter.com/Kelvin___)