对标题部分的视差效应

Question

是否有任何简单的解决方案可以轻松获得视差效果？

我只想在我的标题上做一个简单而整洁的效果。这是我的页面：www.arcanova.no/bolig 我希望标题文本“Bolig”的滚动速度比它背后的图片快。

这是我的HTML代码：

    <section class="band banner">
        <div class="container">
            <div class="row">
                <div class="columns sixteen">
                    <div class="duk"><p></p> </div>
                    <div class="overskrift_firma">
                    <h2>Bolig</h2>
                    </div>  
                </div> <!--/columns sixteen banner-->
            </div><!--/ row-->
        </div> <!-- / container-->
</section> <!-- / band -->

图片是乐队横幅部分类的背景。

Answer 1

See this fiddle

$(window).scroll(function(){
    $('#back').css({'top':''+(-($(this).scrollTop()*0.05))+'px'});
});

希望从上面你可以了解视差是如何工作的