如何使用jQuery在垂直滚动网站中获取当前可见幻灯片

Question

这个问题可能听起来很愚蠢,但它让我头晕目眩.我想制作一种由不同幻灯片组成的垂直滚动演示文稿; 效果应与此网站"相似":http://www.soleilnoir.net/believein/#/start

我创建了一个包含不同幻灯片的无序列表:

<div id="main">
  <div id="content">
    <ul id="bg">
      <li id="slide1"> <!-- content --></li>
      <li id="slide2"> <!-- content --></li>
    <!-- and so on -->
    </ul>
  </div>
</div>

我已经position:fixed在页面的中心给出了所有幻灯片的内容(到目前为止是图像),以及一个不同的z-index来叠加幻灯片和图像.就像是

-----  slide 1
  §§§ image 2
-----  slide 2
  §§§ image 3
----   slide 3

等等

这当然仅在某种意义上起作用:当滚动时,幻灯片揭示了下面的幻灯片,但是由于它们的固定位置,以前的图像总是可见而全部从流中移除.

所以我想给图像一个position:absolute(并给予position:relative它<li>),但这并不会使它们在页面的中心"粘",直到新的幻灯片到达并覆盖它,它们当然自然地跟随它们的父母<li>的运动.

我完全不知所措,还有如何在窗口中获取当前的可见列表.我看了所有的内置的jQuery提供的功能:scrollTop(),offset().top,position().top,我得到$(window).height()的$('#container').height(),<li>身高是固定的,等,但我得到的是元素的"绝对"位置(我的意思是,它不会改变滚动),我无法弄清楚如何说幻灯片在屏幕中间,以便我可以做某事(但仍然不知道是什么).

我确定我在这里遗漏了一些明显的东西.我已经研究了链接网站的代码,虽然我几乎可以理解它的一切,但我还是无法弄清楚它是如何得到当前的幻灯片(此外,它与我的工作方式不同,因为它加载动画的GIF动态和只对每张幻灯片都这样做.在我的每张幻灯片中都是一个包含不同元素,动画等的容器.

例如,如果$('li#slide3')是在视图内,我该如何获得？如何解决堆叠图像问题？我是否需要动态地将它们设置为"固定",或者在每次滚动时重新计算它们的位置以便做到这position:absolute一点？对于这一秒,我仍然需要将每个元素的位置与固定点进行比较(我相信$(window).scrollTop(),到目前为止,滚动时总是为0),但我无法弄清楚如何.

哦,我正在使用jQuery scroll()方法绑定滚动,因为我还有一个导航列表,可以让你跳转到所需的幻灯片,它也解释了这一点.

我希望我明确表达了这一点:图像必须始终保持在中心位置,而滚动幻灯片需要覆盖它们,并且在覆盖图像时,以下需要出现并取而代之,所以我需要了解如何获取当前<li>元素的位置,比如当它在窗口的中间位置时,并相应地设置前一个图像.

Answer 1

那种类型的网站使用视差效果来移动背景图像.

考虑使用jQuery Parallax插件,例如jparallax,可以让事情变得更容易.

但是对于整个网页,您可能希望转向具有基于您提供的示例的演示页面的jQuery Parallax插件.该演示页面也是一个教程!

还有很多网站,可以给你进一步的想法和看里面的网页,你可以发现他们使用的是什么类型的视差插件.

编辑:使用的优秀工具内置于Firefox浏览器中,因此您可以在分层3D结构中查看任何网页.这将有助于了解该网站如何与分层背景进行交互.有关Firefox 3D的 更多信息,请查看此处.

编辑2:这可能很有用:如何判断DOM元素在当前视口中是否可见？

此外,对于您提供的网站示例,一旦滚动到视图中,它们用于将图像置于视口中心的方法可以在他们的style.css文件中看到.当然他们有jQuery修改这些元素,但风格确实有意义:

#main ul.bg li img.gif { position: absolute; z-index: 1; width: 996px; height: 800px; left: 50%; right: 50%; top: 50%; bottom: 50%; margin: -400px -498px; }

编辑3:这是一个jQuery Parallax插件,与你的链接示例做同样的事情,并且有一个非常强大的API.此特定插件具有每层定位和自定义偏移.

这是一个使用该插件的网站,其中的东西排列在屏幕的中央.
此其他网站显示此插件在选择要与之交互的任何图层时没有任何问题.

该插件名为Stellar.js,gitHub页面为HERE.如果你去那儿的主页,其水平滚动...请注意这个词EASY在恒星是视差效果排队到浏览器的视口边缘.当您滚动时,其他星星会在常规区域中自动滚动以显示其他关键字.