背景图像的微妙变化

I have been trying to find an answer via google for a while now but to no avail.

我一直试图通过谷歌找到答案一段时间但无济于事。

I've come across an interesting feature on site: http://dicksonfong.com/

我在网站上遇到了一个有趣的功能：http：//dicksonfong.com/

The feature involves the background image, which appears to change from the bottom as a section passes up the screen. I can't describe it any better which is probably why I'm geting no hits on Google.

该功能涉及背景图像，当一个部分向上通过屏幕时，该图像似乎从底部变化。我无法更好地描述它，这可能就是为什么我没有在谷歌上点击。

Can anyone identify what this trick is called and where I can find the source code to implement something similar?

任何人都可以识别出这个技巧被调用了什么，以及在哪里可以找到实现类似内容的源代码？

Thanks in advance.

提前致谢。

Simon

西蒙

3 个解决方案

#1

This is called Parallax effect scrolling. It looks very creative in terms of UI and involves a lot of things for it to work. If you want to start off with, Here is an Ideal example for a start.

这称为视差效果滚动。它在UI方面看起来非常有创意，并且涉及很多工作。如果你想开始，这是一个开始的理想例子。

Hope this helps.

希望这可以帮助。

#2

There is a nice JavaScript library called skrollr for making parallax scrolling websites.

有一个很好的JavaScript库叫做skrollr，用于制作视差滚动网站。

It requires of You to only know HTML and CSS.

它要求您只知道HTML和CSS。

More examples.

更多例子。

#3

The above answers about Parallax are incorrect. Parallax does create some amazing looking websites. However, the one you linked to (http://dicksonfong.com/), doesn't use it. This is because Parallax happens when one has multiple levels moving at different speeds.

关于视差的上述答案是不正确的。 Parallax确实创造了一些令人惊叹的网站。但是，您链接到的那个（http://dicksonfong.com/）不会使用它。这是因为当一个人有多个级别以不同的速度移动时会发生视差。

Imagine that the speed of your scrolling is 100%. If an image is moving with the entire page, it's moving at 100%. If it's not moving at all, it's moving at 0%. If it's moving half speed, 50%. Parallax incorporates multiple moving speeds. Dickson's site simply has content, moving at 100%, and backgrounds, moving at either 100% or 0%. Since 0% means unmoving, there is only one speed at which moving items are moving.

想象一下，滚动的速度是100％。如果图像随整个页面移动，它将以100％移动。如果它根本不移动，它将以0％移动。如果它移动半速，50％。视差包含多种移动速度。 Dickson的网站只有内容，移动率为100％，背景为100％或0％。由于0％表示不动，因此移动物品的移动速度只有一个。

That said, it's still a cool website, and because it is more simple, it's easier to create, requiring zero javascript (or HTML5). He simply uses fixed backgrounds, and absolute positioning. His first and third rows have fixed backgrounds. This allows for them to remain in place.

也就是说，它仍然是一个很酷的网站，因为它更简单，它更容易创建，需要零javascript（或HTML5）。他只是使用固定背景和绝对定位。他的第一排和第三排有固定的背景。这允许它们保持在原位。

Example Code:

示例代码：

HTML:

HTML：

<div id="home" class="page">

    <div class="content">

        <h1>First Page</h1>

        Content here!

    </div>

</div>

<div class="divider">

    <div class="content">Divider</div>

</div>

<div id="about" class="page">

    <div class="content">

        <h1>First Page</h1>

        Content here.

    </div>

</div>

CSS:

CSS：

body{
    margin:0;
    padding:0;
    font-size:80px; 
    font-family:Calibri; 
    font-weight:bold; 
    text-align:center;
    text-shadow:0px 0px 4px white;
}

.page {
    margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    height: 800px;
}

.divider {  
    height: 300px;
    margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
}

.page .content {
    height: 450px; 
    top: 100px; 
    position: absolute;
    width: 100%;
}

.divider .content { 
    padding-top:50px; 
    height: 250px; 
    position: absolute;
    width: 100%;
}

#home { 
    background: url(background_home.jpg) no-repeat fixed 50% 0 / cover;  
}
#about { 
    background: url(background_about.jpg) no-repeat fixed 50% 0 / cover;
}

Working Demonstration: http://jsfiddle.net/6Hck4/1/

工作示范：http：//jsfiddle.net/6Hck4/1/

#1