Tuesday, 15 February 2011

jquery - Parallax effects with Stellar.js -



jquery - Parallax effects with Stellar.js -

i'm working on website , want implement slight parallax effects.

here site far:

http://claytonkinder.com/

i want parallax impact grayness field background image scrolls @ different rate, can't configure work.

here html:

<div id="top-block" data-stellar-background-ratio="0.5"> <div class="bg-title"> <h1 id="site-title">modern</h1> </div> <h2 id="site-subtitle">a splash of color</h2> <a href="#"> <div class="top-block-button button1">watch video</div> </a> <a href="#"> <div class="top-block-button button2">download</div> </a> </div>

here css:

#top-block { background-image: url('../../img/block.jpg'); background-repeat: no-repeat; background-size: cover; text-align: center; padding-top: 200px; padding-bottom: 200px; }

and here jquery:

$(function(){ $.stellar(); });

i can't figure out went wrong according stellar.js documents.

when set code in js fiddle works: http://jsfiddle.net/a32qeyz1/

looks phone call stellar.js causing 404

<script src="js/stellar.min.js"></script>

might want double check file path.

jquery stellar.js

No comments:

Post a Comment