InstaLax: Panel Based Parallax Framework
https://github.com/kdubbicles/InstaLax/
Version: 1.0pre, Last updated: 04/04/2013
InstaLax lets developers render panel based sliding parallax experiences using data attributes and HTML
Getting Started
Add the scroller div
<div id="scroller"></div>
Define your container with a section tag below:
<div id="scroller"></div>
<section id="instalax">
</section>
Add a div with the class 'slide':
<div id="scroller"></div>
<section id="instalax">
<div class="slide" data-fade="true" data-noslide="true">
</div>
</section>
Inside, add a background div with the class bg, and an img tag inside:
<div id="scroller"></div>
<section id="instalax">
<div class="slide" data-fade="true" data-noslide="true">
<div class="bg">
<img src="images/background.jpg"/>
</div>
</div>
</section>
Optionally, add a div for content and fill it with what you'd like. The attribute data-width is required:
<div id="scroller"></div>
<section id="instalax">
<div class="slide" data-fade="true" data-noslide="true">
<div class="bg">
<img src="images/background.jpg"/>
</div>
<div class="content" data-width="400" data-start="center" data-stop="top" data-fade="out">
<h1>Hello World</h1>
</div>
</div>
</section>
Continue adding slides and be amazing
The .slide tag has the following options:
-
data-fade: true || null
-
data-noslide: true || null
The .content tag has the following options
-
data-width: integer (required)
-
data-start: center || top || bottom
-
data-stop: center || top || bottom
-
data-fade: in || out
Examples
Demo:
http://dubmediagroup.com/InstaLax
Release History
1.0pre - (04/04/2013) Pre-Initial release
License
Copyright (c) 2011 Ken Wheeler Licensed under the MIT and GPL licenses.
Free as in Bacon.