用户向下滚动时显示图像

I was checking this website: http://www.flagofplanetearth.com/

我正在查看这个网站：http：//www.flagofplanetearth.com/

You can see, the images reveal more as you scroll down.

你可以看到，当你向下滚动时，图像显示更多。

I have seen such an effect on only a few other websites and was wondering how it is done. I don't even know what it's called so couldn't really search for it.

我已经在其他几个网站上看到了这样的影响，并且想知道它是如何完成的。我甚至不知道它叫什么，所以无法真正搜索它。

Thanks.

谢谢。

2 个解决方案

#1

It's called a parralax effect.

它被称为parralax效应。

Here's a great documentation on how it works

这是一个很好的文档，说明它是如何工作的

Cheers!

干杯!

#2

That's a parallax effect.

那是一种视差效应。

Simple method: (fixed image)

简单方法:(固定图像）

.parallax {
    background-attachment: fixed;
}

Advanced method: (what you saw)

先进的方法:(你看到了什么）

1) Use same CSS

1）使用相同的CSS

2) Use the following JS:

2）使用以下JS：

var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});

Check out this:

看看这个：

var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});

#parallax {
  background-image: url('http://lorempixel.com/400/400/abstract/');
  background-attachment: fixed;
  min-height: 400px;
}

<div id="parallax"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et arcu est. Praesent nec lacinia mi. Nulla augue erat, egestas at tortor et, gravida aliquet erat. Proin in rutrum velit. Vestibulum volutpat, leo et rutrum gravida, mauris urna malesuada justo, ut condimentum diam neque non nisi. Aenean malesuada, nisi non dapibus imperdiet, leo libero iaculis dolor, in convallis augue ante nec urna. Suspendisse vulputate vel ex dictum aliquet. Aliquam dapibus scelerisque dapibus. In ut lorem a leo feugiat iaculis cursus sit amet lectus. Integer id ante sed mi egestas tincidunt. Duis maximus augue eu ipsum ultrices dictum.
<br><br>
Proin eget enim auctor, vehicula dui eget, vulputate leo. Donec pulvinar diam interdum, vulputate erat nec, blandit risus. Fusce tristique velit libero, porttitor egestas libero feugiat ullamcorper. Maecenas bibendum tristique efficitur. Cras fringilla ac eros nec iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ut sapien molestie, molestie magna nec, consectetur velit. Etiam vestibulum pretium quam ac imperdiet. Nullam quis nisl eget felis vestibulum bibendum nec id velit. In vel commodo nisi, nec euismod quam. Duis ultrices pretium imperdiet.
<br><br>
Pellentesque quis velit lectus. Morbi id tincidunt libero. Fusce id convallis nulla, sed porttitor eros. Morbi eget libero vel mi efficitur placerat. Fusce sed commodo ex. Nulla gravida enim et elementum fringilla. Vestibulum arcu dui, suscipit ut mauris ut, iaculis aliquam tellus. Praesent in volutpat justo. Morbi volutpat metus at magna rhoncus, in molestie odio vestibulum. In vel euismod nibh. Phasellus ac dictum velit. Donec tincidunt lacus a diam tempor luctus ac ut eros. Etiam condimentum nunc in ex malesuada vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br><br>
Fusce tortor magna, fringilla sit amet dignissim in, euismod quis augue. Phasellus egestas erat eu pellentesque blandit. Vivamus vitae pellentesque arcu. Quisque commodo, leo sed auctor tincidunt, erat sem blandit nulla, quis vestibulum magna lorem sed tellus. Suspendisse ultricies hendrerit eleifend. Cras viverra, diam vitae vulputate mattis, quam augue aliquet odio, sit amet dapibus felis odio id lectus. Proin sit amet ornare mauris, quis sodales diam. In hac habitasse platea dictumst. Quisque eget hendrerit tellus. Suspendisse vulputate non dui vel auctor.
<br><br>
Curabitur volutpat eros tellus, ut fringilla nibh cursus eget. Aenean sed urna et nulla aliquet tempor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque euismod fermentum risus, sit amet semper enim. Morbi pulvinar sapien a commodo tempor. Duis ut tellus malesuada, consequat neque a, accumsan nibh. Pellentesque convallis neque sed odio tempor, quis vestibulum eros viverra. Nunc tincidunt ligula ut dolor mattis, eget mollis velit scelerisque. Fusce sed enim sollicitudin, aliquam mi non, mattis diam. Nullam faucibus massa id nisl sagittis, id pharetra enim pharetra. Ut a varius libero, ac malesuada arcu.</div>

#1