如何创建像这样的视差效果? [英] How to create parallax effect like this?

查看:91
本文介绍了如何创建像这样的视差效果?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在试图建立一个像本网站上的视差效果的网站:
http://www.sparksandhoney.com/the-open-agency-index/

http://www.sparksandhoney.com/press-index/



一直试图使用stellar.js,但我似乎无法使导航栏和网页在本网站的图像上同步滚动。到目前为止,我只是试图让导航栏和文本图层成为一个可以滚动到固定背景上的div,但是这根本不起作用?



由我已经通过这个网站的源代码,他们使用Squarespace,但我试图没有它的效果。



有没有人有任何想法?

解决方案

它其实非常简单。导航和内容容器正在流动中。内容有一个 margin-top 来将其与nav分开。然后背景图像被设置为 position:fixed ,并且在滚动上被滚动位置的百分比偏移(例如,30%)。

你不需要任何库,但jQuery使它更容易。考虑到stellar.js需要jQuery,我假设你没有使用它的问题。在这种情况下,下面的代码足以让它适用于你:

  $(window).on('scroll' ,function(){
$('#background')。css('margin-top',$(window).scrollTop()* -.3);
});

下面是整个行为的一个jsFiddle: http://jsfiddle.net/9gK9z/1/


I've been trying to get build a website with a parallax effect like the one on this website: http://www.sparksandhoney.com/the-open-agency-index/ or http://www.sparksandhoney.com/press-index/

I've been trying to use stellar.js, but I can't seem to make the nav bar and web page scroll in sync over the image like this website. So far I've just been trying to make the nav bar and text layer be one div that scrolls over a fixed background but that is not working at all?

By the way, I've gone through this websites source code, and they use Squarespace, but I'm trying to do the effect without it.

Does anyone have any ideas?

解决方案

It's actually super simple. The nav and content containers are in the flow. The content has a margin-top to separate it from the nav. Then the background image is set to position: fixed, and on scroll is offset by a percentage of the scroll position (eg, 30%).

You don't need any libraries, but jQuery makes it easier. Considering stellar.js requires jQuery, I assume you don't have a problem using it. In which case, the following code is enough to get it working for you:

$(window).on('scroll', function() {
    $('#background').css('margin-top', $(window).scrollTop() * -.3);
});

Here is a jsFiddle of the entire thing in action: http://jsfiddle.net/9gK9z/1/

这篇关于如何创建像这样的视差效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆