这是什么HTML技术

Question

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

你怎么称呼这种技术？它有名字吗？我想找一个关于这个的教程，但我不知道该寻找什么。

谢谢！

Answer 1

我想你正在寻找Parallax Scrolling Website。

有很多教程可以轻松完成。

一个简单的例子是 here 。

可以找到萌 -

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实现Parallax，那么本教程适用于您 -

  

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

认为你有完整的答案。

Answer 2

您是否正在寻找Parallax？网上有很多资源都有关于它的说明，希望知道这个术语可以帮助你。

这是一个简单的demo纯CSS Parallax，但你也可以check out Awwwards for some inspiration.

Answer 3

  

术语“视差”首先来自2D侧滚动视频游戏的视觉效果，它使用不同的背景图像移动速度来创建游戏过程中的深度幻觉。这通常是通过使游戏的背景移动得比前景慢，以使其看起来更远。同样的概念适用于视差网站设计，其中网站的背景以与页面其余部分不同的速度移动，以获得令人印象深刻的视觉效果，允许无数的创意应用程序进行在线讲故事。

您可以查看以下链接，了解更多信息，提示和一些缺点。

See More