html - 标题部分的视差效果

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 -->

图片为乐队banner节课背景

Answer 1

See this fiddle

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

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