我一直在尝试弄清楚导航中的文本和本网站上的徽标如何http://www.tokiolab.it/会在滚动时更改颜色。
当您轻松到达不同的部分时,我可以更改颜色,但是在这个网站上,当您滚动时,文本和徽标是一半黑色一半是白色的,反之亦然。
它似乎在使用某种透明背景?关于如何获得这种效果的任何想法?
该术语称为:"视差"
您会在tokiolab网站上注意到他们使用以下图像:
- http://www.tokiolab.it/img/en_nav_portfolio.png
- http://www.tokiolab.it/img/en_nav_contatti.png
- http://www.tokiolab.it/img/en_nav_mission.png
他们使用类似视差的效果将这些图像放在不同的"图层"上,因此当您向下滚动时,它看起来图像正在改变颜色,而实际上它只是另一层上的不同背景图像。
您可以使用一些不同的插件,如下所示:
- http://www.ianlunn.co.uk/plugins/jquery-parallax/
- http://johnpolacek.github.com/scrollorama/
- http://www.davecranwell.com/content/jquery-scroll-parallax-plugin
- http://curtain.victorcoulon.fr/#intro
- http://joelb.me/scrollpath/
可能需要一些修补,但前几个可以让你朝着正确的方向前进!