这是什么HTML技术



我最近开始看到具有全尺寸,全宽背景图像的网站,当您向下滚动时,会出现一个包含一些内容的部分,然后是不同的背景。 并随页面滚动。我相信如果你看过它,你就会知道我在说什么。

你怎么称呼这种技术?它有名字吗?我想寻找有关此的教程,但我不知道要寻找什么。

谢谢!

我想你正在寻找视差滚动网站。

有许多教程可以轻松做到这一点。

这里给出了一个简单的例子。

萌萌可以找到——

  1. http://webdesign.tutsplus.com/articles/web-design-inspiration-scrollin-scrollin-scrollin--cms-25486
  2. http://webdesign.tutsplus.com/tutorials/how-to-give-your-logo-the-slip-scroll-effect--cms-22274
  3. http://webdesign.tutsplus.com/tutorials/create-a-masked-background-effect-with-css--cms-21112
  4. http://webdesign.tutsplus.com/articles/building-a-complete-website-with-the-gumby-framework--webdesign-16980
  5. http://webdesign.tutsplus.com/articles/working-with-gumbys-parallax-extension--webdesign-16967
  6. http://webdesign.tutsplus.com/tutorials/jazz-up-a-static-webpage-with-subtle-parallax--webdesign-10195
  7. http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellarjs--webdesign-7307
  8. http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

如果您想使用Twitter Bootstrap实现视差,那么本教程适合您-

https://www.impulse-themes.com/zenith/development/twitter-bootstrap-parallax-scrolling

认为你有完整的答案。

你在寻找视差吗?网上有很多资源,其中包含有关它的说明,希望知道该术语会让您到达那里。

这是一个带有纯CSS视差的简单演示,但您也可以查看Awwwards以获取一些灵感。

"视差"一词最初来自2D横向卷轴视频游戏的视觉效果,该视频游戏使用不同的背景图像移动速度在游戏过程中产生深度错觉。这通常是通过使游戏的背景移动速度比前景慢来完成的,以使其看起来更远。同样的概念也适用于视差网站设计,其中网站的背景以与页面其余部分不同的速度移动,以获得令人印象深刻的视觉效果,从而允许无数创造性地应用于在线讲故事。

您可以查看下面的链接以获取更多信息,提示和一些缺点。

查看更多

最新更新