Slide based responsive parallax
JavaScript CSS
Latest commit 3a9482a Apr 8, 2014 @kenwheeler Merge pull request #1 from o-l-e/patch-1
Update main.css
Permalink
Failed to load latest commit information.
fonts
images
.gitattributes
.gitignore
README.markdown Initial Oct 13, 2013
app.js
index.html
instalax.css
instalax.js
main.css

README.markdown

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.