滚动时文本如何改变颜色



我一直在尝试弄清楚导航中的文本和本网站上的徽标如何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/

可能需要一些修补,但前几个可以让你朝着正确的方向前进!

最新更新