Slide based responsive parallax
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
fonts Initial Oct 13, 2013
images Initial Oct 13, 2013
.gitattributes Initial Oct 13, 2013
.gitignore Initial Oct 13, 2013
README.markdown Initial Oct 13, 2013
app.js Initial Oct 13, 2013
index.html Initial Oct 13, 2013
instalax.css Initial Oct 13, 2013
instalax.js Initial Oct 13, 2013
main.css Update main.css Apr 4, 2014

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.