花哨滚动网站

Ladida Cafe

# 2011年9月14日

它们使用 JavaScript 吗？
哇... 它们有一个很棒的想法。
太棒了！！

迈克尔·阿纳尔多

# 2011年9月14日

很棒的文章！这些网站确实展现了高水平的创造力！

建议：您可以将图形链接到相应的网站。

k

# 2011年9月14日

兄弟，你想要更多帮助，而不是“它是 JavaScript”！

教程呢？

Chris Coyier

# 2011年9月14日

以下是如何使用 jQuery 监视滚动并执行操作

$(window).scroll(function(eventObject) {
  // do stuff! You can find out about how far the window has scrolled via the eventObject.
});

彼得

评论的永久链接# 2011年9月15日

您想要多少个教程？
这里大约有 200 万个。

玩得开心！
此致敬礼，
彼得
安迪·格里芬

评论的永久链接# 2011年9月17日

太可惜了，JavaScript 本身没有类似 window.onscroll 事件的东西。为 jQuery 团队添加了这一点而点赞。
我捣鼓过一段时间滚动，最终使用计时功能编写了自己的滚动检测器，该计时功能用于观察滚动位置的变化。它也运行良好，但我担心在后台持续运行计时功能可能会占用过多的处理器资源。
当然，谁知道呢，jQuery 可能会以完全相同的方式来做。我实在想不出其他方法了。
迈克

评论的永久链接# 2011年9月20日

为了获得更流畅的滚动，您可以获得文档高度的百分比，而不是直接的滚动量。

我在这里尝试过：reddirtcollective

还有这里：bdw3

然后我发现，如果您使用直接滚动量，您的元素将始终偏移，因为 JavaScript 的速度不足以跟踪每个滚动像素，而只能跟踪每次的块。

滚动量 / 页面高度 = 页面滚动百分比
布里

评论的永久链接# 2011年9月21日

搜索“Nikebetterworld 教程”...

道格·T

# 2011年9月14日

... 而且没有一个是响应式的，或者在移动设备上运行良好。想不通...

Jefffan24

评论永久链接# 2011年9月14日

在移动设备上滚动很糟糕（或者至少很难知道用户的位置）。这几乎是不可能的，所以你为什么期望它们在移动设备上工作呢？

Chris Sobolewski

# 2011年9月14日

Ugh.. 我访问了 Dentsu Network 网站（你的第一个例子）并使用滚动条向下滚动。然后我尝试点击后退按钮回到这里查看剩余内容/发表一些评论。

好吧，我的评论是 Dentsu Network 做得完全错误。当你滚动时，它们实际上会更改 URL。所以，当我点击后退按钮时，我不得不通过它们所有的锚点标签导航回来，然后才回到这个页面。这不是一个好的用户体验。我们难道没有都学过“后退”是一个神圣的按钮，不应该被乱动吗？

jenius

评论永久链接# 2011年9月14日

实际上，他们做对了。如果你要手动浏览所有这些页面，你也会处于相同的位置，只是它们有不同类型的导航，你没有习惯。如果你点击“关于”，然后是另一个链接，你想回到关于页面？你不应该滚动回去——你点击了链接到达那里，后退按钮应该反映这一点。

问题在于这个例子是如何从这个网站链接出来的（目前没有任何链接……？），当你写一篇有外部链接的例子或旁支的文章时，它们应该在新标签页中打开（target=”_blank”），这样你就不会失去你在原始文章中的位置。

如果是这种情况，你就不需要使用后退按钮——因为你只是从列表中查看一个例子，你只需关闭例子，你的列表仍然会打开，就像它一直存在的那样。
Andy

评论永久链接# 2011年9月14日

说实话，我不记得上次使用后退按钮是什么时候了。在发明了标签式浏览之后，它就失去了所有的威严。
Chris Sobolewski

评论永久链接# 2011年9月14日

@Jenius 是的，他们应该有锚点，这样后退按钮就可以在以传统方式浏览网站时正常工作，但你永远不应该劫持用户的按钮并提供他们意想不到的功能。简而言之… 锚点不应该存在，但你不应该以编程方式更改用户的 URL 栏。
jenius

评论永久链接# 2011年9月14日

@chris，你说的毫无道理… 你知道后退按钮是链接到 URL 栏的吗？
bill

评论永久链接# 2011年9月14日

我100%同意 Chris 的观点。

jenius 你什么都不知道。
Henrique Erzinger

评论永久链接# 2011年9月15日

他们不应该通过滚动位置更改 URL，但是的，当用户点击链接时，应该有锚点。
Richeh

评论永久链接# 2011年9月15日

Henrique，你说得对。如果你点击了链接，或者只是滚动，[后退]完全可以重定向到页面上的一个位置。我很惊讶它会被淹没在条目中。
Miller Medeiros

评论永久链接# 2011年9月15日

Dentsu Network 网站不仅仅是垂直滚动，它还有很多内部页面（点击“查看我们的员工”、“查看我们的人才”等按钮…），location.hash 被更新，这样人们就可以分享网站内页面的链接（例如特色人才），并且因为你可以通过点击链接或滚动进行混合交互，所以最好保持一致——我们没有使用 HTML5 历史 API，因为它在一些浏览器上存在 bug，而且对所有页面编写静态回退是不切实际的或没有意义的，因为该网站是如此面向 JavaScript，而且截止日期很短。

在 iPad 上，视差效果被移除，因为它不像在桌面上的那么流畅，而且因为 iOS 4 不支持“position:fixed”，所以我使用了一些技巧来使滚动工作（这也降低了性能），另一个原因是，在 iPad 上，触摸屏幕几秒钟后，JavaScript 执行会被停止（如果启用原生滚动），破坏了体验。而且看起来也不那么酷，因为你的屏幕区域更小，交互方式完全不同（我们决定添加手势支持，并对位置进行捕捉）。

请注意，Dentsu Network 还有一个移动版本的网站：m.dentsunetwork.com——需要更少的带宽，并且针对较小的屏幕进行了优化。

我是 Dentsu Network 桌面网站的前端开发主管，但这并不意味着我同意所有决定，只是想解释一下网站为什么这样表现…——**这是我个人的评论，不代表我的客户或雇主**——我真的很享受编写这个网站的过程，也喜欢最终的结果。

干杯。
Joshua Cottrell

评论永久链接# 2011年9月21日

它还有助于 SEO（搜索引擎优化）。

Alexander Albrecht

# 2011年9月14日

http://www.nikebetterworld.com

Francisco

评论永久链接# 2011年9月14日

啊，是的，这是我记得看到的那个。谢谢你的提醒。

Chrissy

# 2011年9月14日

这里还有一个，虽然它不像以前那么好用了。

http://2011.beercamp.com/

关于它是如何完成的信息可以在这里找到：http://2011.beercamp.com/colophon/

kimblim

评论永久链接# 2011年9月14日

实际上，Dave DeSandro（天才，顺便说一句）今天开源了 beercamp 网站的代码
Francisco

评论永久链接# 2011年9月14日

是的，我喜欢这个。太好了！记得以前看到过它。

Kim Pimmel

# 2011年9月14日

在 SophyWong.com 上，滚动触发的效果使用得非常巧妙。

Rene

# 2011年9月14日

哦，天哪，最近我看到了很多滚动网站。绝对是一个趋势。

@k：Smashing Magazine 上有一篇很棒的文章，抱歉在這個網站上發送垃圾郵件。但是它很好地解释了滚动网站是如何工作的。
http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

Michael

# 2011年9月14日

最近我看到的最棒的是 http://sf-langstrasse.hvo.ch/page/

Jens

评论永久链接# 2011年9月27日

太对了！

有人知道他们是怎么让滚动那么流畅的吗？
我真的想知道，为了一个完全不同的东西，但这太棒了。

他们滚动 1050 张图片！！！！

ales

# 2011年9月14日

是我一个人还是没有一个链接指向这些网站？我的意思是，在谷歌上找到“新西兰”相当困难..

Chris Coyier

评论永久链接# 2011年9月14日

每个下面都有一个写着“查看网站”的按钮。也许尝试清除缓存。
Chris Rocks

评论永久链接# 2011年9月14日

按钮不可见。
style.css 中的第 606 行。

figure p {
display: none;
}

应该被移除。

ales

# 2011年9月14日

哦，它实际上是新西兰的官方网站.. 但另一方面，“ala”更难..

K

# 2011年9月14日

谷歌有一个关于滚动网站的应用开发者教程。 http://www.guidetotheappgalaxy.com/

Konstantinos

# 2011年9月14日

来吧，Chris！如何做一个教程？

Chris rocks

# 2011年9月14日

虽然我真的很喜欢看你的节目和阅读你的文章（甚至还买过你的书），但这个确实很糟糕 lol :) Javascript .dot. 嗯，谢谢我的 RSS 订阅。祝你今天愉快。

Eduardo

# 2011年9月14日

这是一个来自巴西南部的当地啤酒网站。
http://www.polar.rs

Attila Hajzer

# 2011年9月14日

不需要后退按钮，因为我只需要用 3 根手指滑动。哈哈。

WilhelmR

# 2011年9月14日

Activated Drinks 和 Ben the Bodyguard 太棒了。

Nizo 网站的概念非常好。

我发现 Art of Flying 网站很有趣，技术上，但疯狂的、非垂直的滚动让我失去了兴趣。无法想象它如何在触摸屏上“处理” :P

不过，这是一个很棒的展示，我迫不及待地想看看这些网站的代码。

Matt Fordham

# 2011年9月14日

jQuery Waypoints 插件可能对这种事情很有用：http://imakewebthings.github.com/jquery-waypoints/

Charbs

# 2011年9月14日

我喜欢这个！看到很多其他网站使用这种效果。这里有一个我非常喜欢的网站
unfold

DJG33KD0UT

# 2011年9月14日

http://www.qualitycabinets.com » 不仅利用了“花式滚动”，还利用了将多个图像叠加在一起（完全披露：我在制作这家公司的公司工作，但没有参与这个项目）

Evan Payne

评论永久链接# 2011 年 9 月 15 日

这是一个非常令人愉快的效果。告诉他们做得很好。

另外，这篇文章需要链接。干杯！

Piotr

# 2011 年 9 月 14 日

这是来自波兰的另一个例子 - http://team-travel.pl/ 。
100% JavaScript。我的编码。

Aamir Maniar

# 2011 年 9 月 14 日

不知道为什么，我找不到任何定位这些网站的方法……点击图像对你有效吗？

Sagar Ranpise

# 2011 年 9 月 15 日

嗨，克里斯，我最近创建了一篇关于垂直滚动视差网站的文章。

http://www.alldesignstuffs.com/2011/inspirational-websites-set-2-with-latest-vertical-parallax-scrolling-technique/

我希望你喜欢他们！

Paul

# 2011 年 9 月 15 日

http://www.bmw.com/com/en/newvehicles/mseries/m5sedan/2011/showroom/highlights/highlight.html

PeHaa

# 2011 年 9 月 15 日

很棒的列表，很棒的效果，谢谢。
顺便说一下，我发布了一篇关于如何重现 Nizo for iPhone 滚动效果的教程：http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/

Christian Lallo

# 2011 年 9 月 15 日

嗨，克里斯,
我们的工作室最近推出了这个网站，它使用 CSS3 的背景大小来产生不同类型的垂直视差效果。

http://www.xsbaltimore.com

继续努力！

Sagar Ranpise

评论永久链接# 2011 年 9 月 15 日

@Christian
很棒的网站 http://www.xsbaltimore.com
感谢分享！

Pietropizzi

# 2011 年 9 月 15 日

kinderueberraschung.de 是另一个非常好的例子

Pat

# 2011 年 9 月 15 日

这是另一个可以查看的……http://www.asb.co.nz/futureready/online.aspx

CésarL

# 2011 年 9 月 15 日

嗨,
这是我的动画简历
http://www.cesar.lc/cv

Jack MCDade

# 2011 年 9 月 15 日

呃……链接？说真的，这篇文章在没有办法访问这些网站的情况下就完全没有用。

Sarah Saunders

评论永久链接# 2011 年 9 月 15 日

你在说什么？所有的例子都有链接。这就是我们所有人看到动画和滚动技术的方式，并且在对它们大肆吹嘘。

感谢你的帖子，克里斯。很好的汇编。这些太棒了，看到它们我感觉很受鼓舞。

jake

# 2011 年 9 月 15 日

很棒的帖子！我一直想做一个测试网站来学习如何做到这一切。很高兴你提供了一个调查清单。我之前见过 Nizo 网站，但我见过的其他“花式滚动网站”只有：一个我现在记不起来的名字 - 一个乐队的网站，以及“失落的世界博览会”网站上的两个（El Dorado & Atlantis）……http://lostworldsfairs.com/

Steven

# 2011 年 9 月 15 日

好文章，绝对有一些很酷的效果！
这是另一个：http://work.nemata.com/renault-laguna/
没有视差，但滚动/浏览器画布的创新使用方式。

Andy

评论永久链接# 2011 年 9 月 20 日

我相信这是使用某种地图 API（例如谷歌地图），而不是使用地图作为背景，而是使用汽车图像。

Julius

# 2011 年 9 月 15 日

Preview11 一个使用这种效果的学校项目

Aaron

# 2011 年 9 月 15 日

这是我最近做的一个网站。但它似乎与这里发布的其他一些网站相比相形见绌。非常酷的东西，每个人！

stumptown.danner.com

Roman Serebryakov

# 2011 年 9 月 15 日

我最近看到了很多这样的网站。如果你听说过http://www.awwards.com，每三个网站中就有一个是垂直滚动组合网站。在这里做个案例研究或类似的东西会很棒。因为这些网站有一个很酷的功能，当你经过窗口的特定点时，它会选择主链接或弹出边缘的东西，真的很酷的技术。我尝试搜索它，但我猜这是设计师用来保密的秘诀。 ))

Eddie

# 2011 年 9 月 15 日

非常好的总结！这是另一个：http://22mars.com/

Alan Chang

# 2011 年 9 月 15 日

对酷炫滚动网站的精彩总结。我实际上之前写过一篇类似的文章，其中包含很多这些网站，甚至更多：14 个带你踏上独特滚动冒险之旅的网站

Andrew de Andrade

# 2011 年 9 月 15 日

YCombinator 启动 OhLife 在滚动方面做了一些有趣的事情。

http://ohlife.com/

只需点击页脚，它会问你为什么你会喜欢 OhLife。

Keith

# 2011 年 9 月 15 日

这可能会有所帮助：Dave Cranwell/jQuery Scroll Parallax 插件 - http://www.davecranwell.com/content/jquery-scroll-parallax-plugin

Tricia

# 2011 年 9 月 15 日

作为一个新手设计师，我一直关注视差效果，awwwards 上有很多这样的效果，包括这里列出的效果。

但如何应用于 wordpress 是我的想法。我尝试在一个 wordpress 网站上添加一个简单的 scrollto 命名锚点，但没有成功，我认为是因为命名锚点是用一个 get slug 生成的（因为我的客户会添加和更改这些特定部分。）

对我来说太可惜了，尽管这是一种趋势，但我认为它会成为一种经典趋势。我当然永远不会厌倦上下翻滚这些页面。

Petri Lehtinen

# 2011 年 9 月 15 日

PyCon Finland 2011 的网站有一个视差背景（用背景画布实现），顶部徽标在滚动时也会动画。

http://fi.pycon.org/2011/

Simon Duda

# 2011 年 9 月 15 日

你错过了这个来自瑞士的网站，它使用了 html5 和其他东西 :)

http://www.360langstrasse.sf.tv/page/

Jens

评论永久链接# 2011 年 9 月 27 日

实际上它已经在上面提到了，但它确实是最棒的网站之一！

很想了解他们是如何让滚动如此流畅的。
有人知道“模糊”图像的谷歌街景般行为是故意的还是只是传统的？因为加载的图像都是全尺寸的。他们是如何实现如此快的显示的？

smoke

# 2011 年 9 月 15 日

嘿，克里斯………………….. http://demo.phpmyadmin.net/STABLE/index.php?token=18fc14fc9dd32572da1e24c1882946c8#PMAURL:server=2&target=main.php&token=18fc14fc9dd32572da1e24c1882946c8 这些家伙是如何做以下菜单的……检查窗口调整大小时的菜单选项卡。哇……我想破解它。

impact crusher

# 2011 年 9 月 16 日

也许我可以试试。crusher的网站不错

Ryan Beard

# 2011 年 9 月 16 日

不要误会我的意思，这里有很多创造力，但这些滚动网站有一些让我感到困扰的地方。

首先，它们通常非常依赖用户必须“以正确的方式”滚动才能使效果正常工作。你可以点击预先确定的书签链接到内容，使用鼠标滚轮滚动，使用滚动条等等等等。通常这些网站只有在使用正确的方法时才会看起来很好看，否则它们会看起来很糟糕。

其次，如果你误解了想法，你就是在向用户展示一堆乱七八糟的东西。东西到处乱动乱跳，如果它们试图做太多事情，这会分散注意力并让人反感。

最后，它们似乎都需要大量的资产。其中一个网站有 8mb！对不起，但我认为任何大小为 8mb 的主页都不是一个好的主页。即使这些网站以响应式的方式设计，你也无法在你的手机上查看它们，因为它们需要 30 分钟才能加载！！

话虽如此，它们看起来确实很酷，看到这些创意的想法涌现出来真是太好了。总之，它们非常适合展示设计和编码技巧，但它们是“好的网页设计”的例子吗？我得说不是。

Aaron @ iamcreative.me

# 2011年9月16日

太棒了，

您又写了一篇好文章。
我想尝试一下我的网站的视差页脚。

我是Aaron iamcreative.me

Miss A

# 2011年9月17日

http://www.google.com/green/the-big-picture.html

CSS 过渡的使用也非常好。

Giannhs

# 2011年9月17日

我不喜欢它......访问这些网站对我来说是一种非常糟糕的用户体验。我不明白为什么网页设计师要搞乱滚动。
滚动就是上下滚动，这样你就可以轻松地阅读网站上写的内容。而不是让你头晕目眩，把东西扔到你的屏幕上......

Karol

# 2011年9月18日

感谢您精彩的鼓舞人心的帖子！
网站经过深思熟虑，尽善尽美。

Megan

# 2011年9月18日

您是否考虑过制作一个关于如何创建这种效果的完整教程？我一直都在寻找，却找不到一个真正一步一步讲解的教程。求求你了？我想很多人都感谢你。

ed

# 2011年9月19日

这是一篇很棒的文章！我不同意滚动网站是一个趋势。我认为我们与网站交互的方式在不断发展，我们对快速高效地获取信息的需求也在不断增长。我完全支持单页滚动网站！

我发现了一个滚动网站失败的例子（我认为一个网站滚动失败列表会很有趣），http://www.beetroot.gr/work 当访问单个项目时，侧边滚动在 Mac 触控板上非常灵敏！

DG

# 2011年9月19日

我们之前做过这个网站

http://www.skyartsignition.co.uk

Rudie

# 2011年9月19日

Andy Griffin，实际上有。你给 jQuery **太** 多了功劳！ https://mdn.org.cn/en/DOM/window.onscroll

喜欢这个合集。新西兰的网站非常漂亮，完美无缺。太棒了。Screw mobile and accessibility =)

没有降价？

Hemant

# 2011年9月20日

类似的概念可以在我的作品集网站上看到......
http://hemantajax.kodingen.com/portfolio/fancy-scrolling

Onur Celik

# 2011年9月20日

http://www.werbungrockt.de/
也是一个很酷的网站

迈克

# 2011年9月20日

我们之前为我们的班级网站做过一个

bdw3

Jeroen Boersma

# 2011年9月20日

http://www.martinegoldenbeld.nl/

我自己也为朋友做了一个，但考虑到搜索引擎友好性。

所以我创建了一个静态网站，然后应用了 JavaScript......

JavaScript 会查找页面上的位置，并因此更改菜单和 URL 的标题，因此即使向下滚动到联系信息也可以添加书签。

David L

# 2011年9月21日

嗨，Chris，哇，真是一组酷炫的网站！我同意上面其他人说的，关于这个主题的教程会很棒。

zahid

# 2011年9月21日

非常棒的想法......真的很喜欢。我将在我的网站上尝试一下......干得好

Chris

# 2011年9月21日

我最喜欢这个：http://www.emailology.org

它是水平滚动的，但看看页面的背景......它看起来像是两个以不同速度滚动的背景，给它一种 3D 的外观。

非常感谢任何关于这个主题的教程！

Simon Duda

# 2011年9月21日

我发现了一个：http://www.beetle.de

Michael Tysk-Andersen

# 2011年9月22日

还有这个：http://www.melancholiathemovie.com/

Matt

# 2011年9月23日

还有这个：http://www.mattalarie.com

Wojtek Szkutnik

# 2011年10月6日

这是一个简单但花哨的例子 http://apocalypse.pl/ ;-)

peschmae

# 2011年10月11日

http://www.360langstrasse.sf.tv/page/
由于它是德语，所以你可能不太明白，但看到汽车和火车移动仍然很酷 :)

tushar

# 2011年10月17日

你们见过 Smartcar 网站吗？

http://www.smartusa.com/

Shylo Hana

# 2013年10月22日

我喜欢Firefox OS 网站

电通网络

飞翔的艺术

本·保镖

激活饮料

新西兰

ala

正宗工作 | 慈善之水

TEDx波特兰

Nizo

那么，他们是怎么做到的呢？

您还知道其他网站吗？