如何在滚动时在水平条后面实现视差 [英] How to achieve parallax behind horizontal bars while scrolling

问题描述

我已经看过这种效果几次了，但我找不到一个名称，它叫什么？这种效应背后的基本理论是什么？是否使用纯CSS，还是主要由JS驱动？

I've seen this effect a couple times now, but I can't find a "name" for it - what's it called? What's the basic theory behind this effect? Does it use pure CSS, or is it primarily driven by JS?

说明：

垂直向下的页面，固体背景让路，àla窗帘显示，到背景图象。然而，不是仅到达页面的底部，以与先前的实心背景相同的速率移动的另一个水平条从底部覆盖背景图像。随着用户继续滚动，实心背景再次让位给背景图像，但这次背景已经改变为一些其他图像。效果类似于魔术师在物体前挥动他或她的手，并且物体在某种程度上发生显着变化。

As the user scrolls vertically down the page, the solid background gives way, à la "curtain reveal", to a background image. Rather than just reaching the bottom of the page, however, another horizontal bar, moving at the same rate as the previous "solid background", covers up the background image from the bottom. As the user continues to scroll, the solid background again gives way to a background image, but this time the background has changed to some other image. The effect is similar to a magician waving his or her hand in front of an object and the object substantially changing in some way.

另一种表达方式是，

这是我找到的一个例子（经过一番搜索后）： http://www.astoriacassis.com/

（忽略图库 - 旋转）

Here's an example I found (after a good bit of searching): http://www.astoriacassis.com/
(Ignore the "gallery"-style rotating image at the top. Scroll down and notice the picture of the pool and then later a lamp with an elephant on it.)

最初我认为这可能是因为类似于视差效果

Initially I thought it might be something similar to the parallax effect, but it actually appears to be substantially different.

我已经看过这个效果，我想知道如何复制它。

I've seen this effect before and I'd like to know how to replicate it.

推荐答案

这是通过利用背景附件属性移动 divs 导致图像显示变化，而实际上两个 divs 只是向上滚动屏幕。

This is achieved by exploiting the background attachment property on moving divs to create an effect that causes the images to appear to change, while it is in fact two divs simply scrolling up the screen.

检查请参阅此代码演示： http://codepen.io/anon/pen/sCuvI/

Check out this CodePen for a demo: http://codepen.io/anon/pen/sCuvI/

重要部分：

HTML

<div class="content">
  Lorem Ipsum
</div>
<div id="s1" class="scroll"></div>
<div class="content">
  Lorem Ipsum
</div>
<div id="s2" class="scroll"></div>

CSS

.scroll
{
  width: auto;
  height: 200px;
  /*The important part*/
  background-attachment: fixed;
  background: no-repeat center center fixed;
  /*Stretch the background*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

这篇关于如何在滚动时在水平条后面实现视差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！