导航从透明变为彩色背景

时间:2013-09-30 22:59:59

标签: html css

我已经连续工作了10个小时,我尝试了不同类型的位置,但它只是不起作用。当你向下滚动页面并且导航从透明背景变为白色背景时,我无法复制这个有趣的效果。这个例子可以在http://www.bakkenbaeck.no/找到。任何人都可以指出我正确的方向吗?

2 个答案:

答案 0 :(得分:0)

Reaserch Paralax滚动如果你不熟悉js,网上有很多教程你会发现如果你一步一步地按照这些教程我很常见:

http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/

在谷歌有很多例子的时候,不要让jQuery吓到你真的很容易!

答案 1 :(得分:0)

TL; DR此效果不仅可以通过HTML和CSS实现,还需要一些JS来完成此操作。

我正在猜测你所指的是你所提到的那个例子,但我会假设这篇文章你指的是一旦用户向下滚过初始全高图像时发生的变化您会看到徽标从白色变为灰色,此导航区域的背景变为白色。

不知道你的技能水平/知识有点难以做出关于什么会给你方向的假设,但我会尽我所能。这里发生的是CSS z-index,一些javascript和重复菜单的创造性使用。如果您将网页视为一叠纸,则第一张纸是位于第二页顶部的菜单,即打开图像,然后是第三页,即下一个(重复)菜单。重复菜单正好位于第一个菜单下。当您向下滚动时,您将删除该中间图像层,并通过某些JS公开新的导航。有一个页面滚动事件监听器(javascript)正在检查页面当前滚动到的位置。一旦用户到达徽标和导航需要开始更改的点,javascript开始并开始将第一个导航的高度设置为每1px小1px,超过您已经一直走的滚动点直到它获得高度为0px有效地隐藏它。如果您通过检查两个导航来查看chrome Web工具,您可以在滚动时看到这种情况发生(导航的高度会缩小)。

我可以看到网站正在使用http://pagescroller.com/,这可能是他们用来触发我所描述的高度调整的插件。

希望能给你一些指导!