18佳使滚动技术更上层楼的网站

绝地灬酷狼 2022-04-24 12:14 156阅读 0赞

本文由whqet翻译自[WDL][]，[18 Websites that Take Scrolling to the Next Level][]，作者[ Gisele Muller][Gisele Muller]2013年5月20日发表。

曾经有一段时间，我们尽量把内容放在一个版面之上，竭力避免滚动条的产生。但是现在，一切改变了，设计者和开发者不在恐惧滚动，开始以开放的心态拥抱滚动，并努力用滚动来实现背景和元素的显示和动画，以及其他有意思的效果。今天就纠集了几个效果，希望可给你带了一些灵感。

# [Playground Inc][]. #

![20130520160400974][]

# [Shadow][] #

![20130520161644562][]

# [Artem & Julia are getting married][Artem _ Julia are getting married]. #

![20130520161656220][]

# [Shaun Dona][]. #

![20130520161710441][]

# [Koa Water][]. #

![20130520161721958][]

# [Loft City Church][]. #

![20130520161734960][]

# [I shot Him.][] #

![20130520161746274][]

# [ISL][]. #

![20130520161755863][]

# [Scroll for your Health][]. #

![20130520161805629][]

# [Puma Actv][]. #

![20130520161845151][]

# [Designed to Move][]. #

![20130520161857178][]

# [The Story of the Pound][]. #

![20130520161907027][]

# [BTP Design][]. #

![20130520161921262][]

# [DSPG][]. #

![20130520162005211][]

# [Hot Dot][]. #

![20130520162020233][]

# [5 Reasons to Celebrate SoLoMo][]. #

![20130520162029805][]

# [Smart Phood][]. #

![20130520162040837][]

# [numero10][]. #

![20130520161934653][]

完工！感谢牛人Adham Dannaway  
\-------------------------------------------------------------------------------------  
前端开发whqet，关注web前端开发技术，分享网页相关资源。  
欢迎您评论选出自己最喜欢的效果，然后我们一起研究实现下。  
\-------------------------------------------------------------------------------------

[WDL]: http://webdesignledger.com/
[18 Websites that Take Scrolling to the Next Level]: http://webdesignledger.com/inspiration/18-websites-that-take-scrolling-to-the-next-level
[Gisele Muller]: http://webdesignledger.com/author/gmuller
[Playground Inc]: http://playgroundinc.com/
[20130520160400974]: /images/20220215/b12f3fcc2cb745abb7e182d1dda85947.png
[Shadow]: http://www.discovershadow.com/
[20130520161644562]: /images/20220215/6f8f45a68b2e4ebab5a72e88dbb8bbab.png
[Artem _ Julia are getting married]: http://artemjuliawedding.com/en
[20130520161656220]: /images/20220215/7d4da6865cfb401ba989476456c61eba.png
[Shaun Dona]: http://shaundona.com/
[20130520161710441]: /images/20220215/87135d6f84574a7fa84c91027f952f82.png
[Koa Water]: http://www.koawater.com/#top
[20130520161721958]: /images/20220215/1a14fc87cfb44e339e7b01ad93a3fd33.png
[Loft City Church]: http://loftcitychurch.com/welcome
[20130520161734960]: /images/20220215/df4a012bda2b4366969f4cac5f73dddc.png
[I shot Him.]: http://ishothim.com/
[20130520161746274]: /images/20220215/3c4ce692cf714f6ebe7c6353774b25d8.png
[ISL]: http://islreview.com/
[20130520161755863]: /images/20220215/98a3d8d423c44556ad02bbe74d16ad77.png
[Scroll for your Health]: http://shibui.me/web/scroll/index.html
[20130520161805629]: /images/20220215/bb8b54972b2b4e4097dc7d80e9d19bef.png
[Puma Actv]: http://www.puma.com/actvrcvr/#/home
[20130520161845151]: /images/20220215/2280181eecc746bbb139c315e9412554.png
[Designed to Move]: http://designedtomove.org/
[20130520161857178]: /images/20220215/066babd624734101bd7e138d49856f23.png
[The Story of the Pound]: http://www.moneysupermarket.com/savings/infographics/story-of-the-pound/
[20130520161907027]: /images/20220215/06fffedf5b1544d29b1236254b7ef3b1.png
[BTP Design]: http://btpdesign.com/#welcome
[20130520161921262]: /images/20220215/4c9f417a3d824254985e0368852c347a.png
[DSPG]: http://dspg.sg/home/
[20130520162005211]: /images/20220215/5fda35c433bd46ebac56b506c21ebd31.png
[Hot Dot]: http://hotdot.pro/en/
[20130520162020233]: /images/20220215/baa5bb11db134ff0bd170f0b0e2310d0.png
[5 Reasons to Celebrate SoLoMo]: http://solomo.welovedigital.com/
[20130520162029805]: /images/20220215/21e406ccd632449d8519bbe3f7833cea.png
[Smart Phood]: http://smartphood.it/index-en.html
[20130520162040837]: /images/20220215/c9c1482d02204da48739e37639da5c7b.png
[numero10]: http://www.numero10.ch/fr
[20130520161934653]: /images/20220215/8df7c50bf3794e7f93b43bf7420bf611.png