Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Slide based responsive parallax

Resources

Releases

No releases published
You can’t perform that action at this time.