Updated with twitter bootstrap - getbootstrap.com demo. Will commit the bootstrap example later.
Demo.
[Demo with bootstrap] (http://at.mosphe.re/ParallaxDiv/example/).
inspired by https://github.com/wagerfield/parallax
parallaxdiv.js is a jQuery plugin that you can create simple background parallax effect in specific div on browser triggered by
- mouseon
- mobile gyroscope
Please add the following assets
<script src="js/jquery.parallaxdiv.js"></script>Set your div css and put it inside body
<style>
body{
margin:0px;
}
#object{ //set the with and height for your parallax div tag
width:100%;
height:300px;
}
</style>
...
<body>
<div id="object"></div>
</body>Apply javascript
$('#object').parallaxDiv(backgroundURL);Further customize the parallax background margin and wrapper div name
If you would rather run parallaxDiv confined to a particular container (instead of using the whole document) you can
change body to some other selector.
Default Value below:
{
pixelMargin: 20,
wrappername: "parallaxWrap"
}customize the parallax background margin
$('#object').parallaxDiv(backgroundURL,{pixelMargin: 40});If you also want to customize the wrapper name
$('#object').parallaxDiv(backgroundURL,{pixelMargin: 60, wrappername: "theWrapper" });Result HTML
<div id="theWrapper" style="...">
<div id="object" style="...">
</div>
</div>Browser support Only tested with Chrome browser, iOS and android devices. Feel free to give any comments.