有趣的网站设计滚动效果

您是否曾经在浏览一个网站的时候被每个滚动条上的各种动作，效果和元素转换所吸引？这就是所谓的滚动触发动画，它们不仅好看，而且可以帮助创建用户参与，让一个网站设计更令人难忘。

深思熟虑的scroll-triggered动画抓住我们的注意力，我们很快就发现自己沉浸在有趣的文本内容符合我们的滚动速度，图像放大或变得更小，因为他们进入或退出窗口，图形，认真遵循我们的鼠标光标的动作，等等。随着每一幅新的画卷，展现在我们面前的场景变得更加生动和令人兴奋。动画让我们感觉好像漂浮在3D空间里，我们周围的所有元素都在讲述一个令人振奋、连贯的故事。滚动触发动画在讲故事网站上特别受欢迎，因为它们有助于保持访问者对内容的兴趣，所以人们可能会停留更长时间。这一点很重要，因为访问者倾向于浏览文本丰富的页面，而往往没有给予实际内容应有的关注。这就是滚动触发动画派上用场的地方。

我们的动作通过网站滚动触发动画是控制和良好的计划，我们从不感到失落，因为内容以一种安排好的方式展现给我们——我们确切地看到我们应该看到的东西，以及我们应该何时看到它。浏览体验变得有趣，独特，有趣，引人注目，下面的例子是一个真正的证明如何影响滚动触发动画可以：

iPhone 11 Pro

让我们从一个用引领潮流和创新产品重塑了技术和我们生活的品牌开始吧。

在他们对iPhone 11 pro的在线展示中，苹果选择了一个展示网站设计，该网站加载了奇妙的滚动触发动画。首先是一段简短的介绍视频，视频一开始，手机的名字用白色的大字体写在黑色背景上，接着是一个摄像头镜头的特写镜头，镜头慢慢地开始旋转。然后相机缩小了，我们的视角改变了，最后，我们看到了手机的一个超大的图像，三个镜头都显示在屏幕上。

当我们开始滚动时，会发现一个包含有关该产品的一些技术信息的新部分。文字内容是浅色色调的，被组织分散在几个黑盒子中，放置在网站设计已经变暗的背景上，营造出优雅而现代的氛围。没有必要点击任何地方。当我们向下滚动页面时，我们所需要知道的就会浮现出来。

除了动画效果和不断从放大到缩小的图像切换之外，让这个网站设计更加动态的是用这款手机拍摄的快速变化的高质量照片。整个演示是和谐的，有洞察力的，以目标为导向的，它为我们提供了基本的产品信息，同时突出其设计和功能。所有这些元素的结合一定会给网站设计的访问者留下深刻的印象。

斯坦利·库布里克的生活

《斯坦利·库布里克的工作与生活》是另一个讲述故事的网站设计。这是为了纪念美国电影导演兼制片人斯坦利·库布里克90岁生日。他的生活和创作作品以令人惊叹的方式呈现，感谢滚动触发动画和众多其他创作元素的协同作用。

从一个部分到下一个部分的过渡是令人兴奋的，字体优雅地慢慢淡入，直到它们达到饱满、粗体的形式，我们得到了所有美丽的图像的特写。视差效应出现在背景部分，并被用来揭示这个项目中更突出的元素，最明显的是Kubric的作品，它是按时间顺序展示的。此外，他的每一部电影都以非常细致的方式呈现，使用了非常棒的动画效果。

让我们仔细看看他的经典作品之一——《洛丽塔》。这部电影是在他著名的历史剧《斯巴达克斯》放映之后上映的，这两部电影的放映方式对比鲜明。首先，一个心形出现在页面上。我们滚动的屏幕越多，心脏就越大，直到它失去了它的形状，把整个屏幕涂成了粉红色。这个部分使用的字体是白色的，女性化的，非常适合电影的类型。《洛丽塔》是一部黑色喜剧，改编自弗拉基米尔·纳博科夫的小说。这些信息，以及其他一些有趣的事实，都在页面上的文本简历中显示出来。

然后我们把焦点转移到标志性的心形眼镜和棒棒糖上，这两个东西在电影中从未出现过，但已经成为了它的商标(这两个东西都是在电影开拍前组织的宣传中使用的)。

奇妙的黑白编辑照片和电影剧照被放置在对比鲜明的粉红色背景上，它们一起生动地描绘了电影和这次展示的氛围。在这个项目中，所有电影的展示都以该专题获得的奖项信息结束。这里，这个元素特别突出，使用的颜色是有意为我们介绍下一部电影。

最后关于“洛丽塔”的细节消失了，我们看到的是一个黑色的背景。几次滚动后，一个二维导弹出现，爆炸，并把屏幕涂成红色。字体是强大的，黑色，从druk浓缩集合。他们是一个完美的选择来宣布。《奇爱博士》”。

这部电影创作于1964年。这是一部关于冷战和苏联与美国之间的核冲突的政治讽刺黑色喜剧。这个展示的开头和洛丽塔很像，除了现在的黑白照片漂浮在黑色的背景上，完美地描绘了电影的氛围。在简短的文本部分之后是一个在作战室会议的全屏图像，此时我们可以看到水平滚动的实际效果。多亏了这种滚动效果，我们几乎感觉自己就在那个房间里，有人认为这是有史以来设计最好的电影场景。

由于这个网站设计是巨大的，需要一些时间去探索，有人可能会认为用户会很快厌倦。然而，随着每一卷书的展开，一些令人兴奋的东西就在我们眼前展开。正因为如此，我们相信库布里克电影的粉丝们会坚持到最后，彻底享受这一令人震惊的体验。

Vincent Saïsset

要想让滚动页面吸引人，您不必总是使用大量的元素和华丽的图形。事实上，有时候您所需要的只是一些精心选择的字体，就像下面这个网站设计所展示的那样。

当Vincent Saisset的作品集网站加载后，我们首先看到的是黑色背景上一个巨大的白色字母V。V是艺术家名字的首字母，但也可以看作是一个向下的箭头，鼓励我们开始探索这个地点。

鼠标的第一次滚动开始了大量的动画字体和单色交互，字母和背景的颜色从黑色切换到白色，反之亦然。网站设计装饰了垂直和水平的滚动过渡，以及有趣的微互动之间的光标和字母。

Fabian Ferdinand Fallend

对于那些非常依赖滚动条触发动画的网站设计来说，确保所有的东西——从实际的内容到界面的最小部分——完美地结合在一起，创造出一个连贯的整体是很重要的。

以Fabian Ferdinand Fallend的投资组合网站设计为例。它看起来粗糙、粗犷，您可以立即看出它的目标人群是另类。

有许多垂直放置的字母在滚动条上移动。它们被涂成红色，这使得它们在为网站设计增加特色的同时更加引人注目。除了大字体，还有一个有趣的视频，在网站设计的第一部分循环播放。当您滚动屏幕时，视频就会放大，变得非常大，甚至覆盖了整个屏幕。然后它就消失了。

它被不对称的投资组合列表所取代，而这个列表被视差效应所丰富。然而，这些图片以不同的速度滑进来，这让它们看起来像是漂浮在一个覆盖着某种网络的空间里。在portfolio列表的底部有更多的红色字体，但是这一次它们的出现带有水平滚动的效果。

这个网站设计是引人注目的，它反映了艺术家的个性。大胆的字体、不对称的布局和滚动触发的动画的组合使排版看起来特别引人注目和有趣。所有这些元素一起激发我们滚动浏览网站设计和探索内容的方式，而不是使用菜单直接跳到一个特定的部分。

Home Société

法国兴业银行的网站设计漂亮地展示了这家公司的室内设计作品。说到设计，这个网站设计相当简单，但同时丰富多样的动画，图形元素，当然，排版。动画元素是有节奏的，它们相互重叠和交叉。背景中的图像不断变化，字体也非常醒目。这个排版精美的网站设计与上一个不同之处在于它的水平滚动，这给了它一个全新的维度，为用户提供了无限的滚动体验。

Danilo De Marco

丹尼洛·德·马尔科的网站设计是与K95工作室合作创建的，目的是推广他的作品。尽管滚动触发的动画只在网站设计的某些部分使用，但它们仍然很突出。De Marco作品的标志和字体展示生动有趣，充满活力的绿色让参观者的眼睛紧紧地盯在屏幕上。排版是非常主要的，文本内容显示在滚动。如果您点击任何一个特色项目，然后转到一个单独的页面，您会注意到，当您浏览内容时，照片似乎离您的观点越来越远。

Yuto Takahashi

Yuto Takahashi的作品集网站是另一个说明滚动触发动画效果的例子。您首先看到的是一个旋转的圆圈，上面有艺术家的名字、作品集和“以东京为基地”等字样。然后，您被指示按住鼠标按钮一段时间来访问他的工作。他所从事的项目看起来引人注目，并在屏幕的较好部分飞溅。

环绕在照片周围的衬线字体很突出，并且不对称地放置在项目周围。随着每一个新的滚动，某种液体状的动画出现在图像上，破坏了它们的形态，而我们的注意力则集中在波浪状的动作上。如果我们点击任何一个特色作品，我们会看到滚动触发的动画也被用在单个项目页面上，主要是为特色图片，在滚动中改变它们的大小。

Gucci Hallucination

“古驰的幻觉”是由古驰创意总监亚历山德罗·米歇尔(Alessandro Michele)指导的2018年春夏系列活动，由西班牙艺术家伊格纳西·蒙里尔(Ignasi Monreal)绘制。

这个网站充满了数码、超现实的场景和插图，灵感来自古典艺术作品，并加入了一些流行文化元素。

整个竞选活动将现实描绘成超现实和乌托邦式的幻想。

插图中有各种各样的人物。有些人穿着18年古琦系列的衣服，像是在钓天上的飞机。下面有几张卷轴，上面有美人鱼在等着我们。他们一边在岩石上为免费的高保真音响区(免费WiFi)做广告，一边试图捕捉完美的自拍。还有一个场景让人想起迪斯尼的白雪公主，一个模特穿着印有这个深受喜爱的迪斯尼人物形象的毛衣睡觉。一些著名的艺术作品也在这个项目中，如凡·艾克的“阿尔诺菲尼肖像”和约翰·埃弗雷特·米莱斯的“奥菲利亚”。

插图色彩丰富，充满超现实元素。从美学角度来说，这个网站设计看起来非常独特和独特(这使它更加鼓舞人心)，但同时，这正是古琦多年来众所周知的风格。

Editorial New

《编者新编》网站设计是机车公司与Pangram Foundry公司合作的网站设计。该项目致力于编辑新字体，一种serif字体，反映了90年代的设计趋势。这一切都始于一个像报纸一样的部分，当我们滚动时它会旋转，直到填满整个屏幕。然后介绍使用这种字体的多个例子，展示它的通用性。还有一个使用这种漂亮字体制作的杂志封面的例子。如果您点击杂志下面的随机按钮，封面会改变，显示不同大小和重量的字体。即使在最小的细节中也包含了大量的排版和滚动触发的动画，使这个字体呈现令人难忘和突出。

t

Wtower是俄罗斯数字机构JetsStyle创建的网站设计。他们建立了一个互动的虚拟世界来告诉我们乌拉尔白塔的故事，它曾经是世界上最大的水塔。这是另一个讲述故事的网站和滚动条触发的动画如何适合拼图的漂亮例子。滚动的效果引导我们深入3D空间，我们可以了解塔的起源和它现在面临的问题。在屏幕的底部还有一个进度条。它在任何时候都是可见的，对于讲故事的网站来说，这是一个非常有用的元素，因为访客可以随时查看他们在哪里，还有多少内容还没看完。似乎这个网站设计还不够吸引人，它的创建者决定添加一个VR版本，让您成为行动的中心。

Green Chameleon

绿色变色龙设计机构创建了这个网站设计来展示他们自2018年以来最珍贵的记忆和成就。我们首先看到的是一个介绍图形，然后，我们开始滚动浏览这个站点。我们不禁觉得自己仿佛进入了一个时间胶囊。月复一月，我们进行了他们在2018年所做项目的多次演示。如果我们点击其中的任何一个作品，图像就会显示在屏幕的中心，而项目的相关信息则放在图片的下方。当我们使用鼠标从一个月到下一个月在3D空间中导航时，背景颜色会发生变化。

Sally

Sally是一家来自纽约的公司，向优步(Uber)、Lyft、Juno和Via出租汽车，他们的网站设计是由Red Collar Agency创建的。

这个网站设计看起来微不足道的设计和颜色，华丽的细节。这是一个3D汽车模型，多亏了70多个独立的动画，它看起来像在动。您可以通过在您想要的方向上滚动或移动您的光标来让它从一个部分移动到下一个部分。所有的转换都是完美同步的，它们工作得很顺利。

Composition 24

当滚动触发动画，一般来说，时间是必不可少的，这个网站设计的现代建筑项目K24莫斯科是一个完美的例子。这个地方唤起了俄罗斯先锋派和至上主义的精神。滚动触发动画在整个演示中使用。一切看起来都非常流畅和动态，每一次新的滚动我们都会发现一些新的东西。红，白，黑的组合，移动，重叠，从小到大的尺寸看起来惊人的搭配非常独特的字体。这些元素共同构成了一个非常令人兴奋的网站设计，完全符合俄罗斯的前卫精神。

Bewegen

Bewegen是一个世界级的共享单车系统。他们的网站设计，由火车头机构创建，是一个惊人的展示内容丰富，动画和互动。通过滚动触发动画和变焦镜头，作者为我们提供了Bewegen Pedelec自行车的详细视图，这是该公司著名的车型。当您继续浏览这个网站设计时，您会发现关于这个自行车共享系统的所有知识，并学会如何使用它。您也可以通过选择城市，输入您想加入项目的人数，选择自行车的颜色等方式创建您自己的共享系统，然后提交表格给Bewegen。再一次，火车头团队展示了他们是如何精通于为客户创建引人注目和真实的互动演示。

Parmigiani Fleurier

由瑞士钟表制造商Parmigiani Fleurier设计的奢华Kalpa系列展示网站是另一个滚动触发动画将网站设计提升到一个全新水平的绝佳例子。布局优雅端庄。这款手表是本次演示的专用手表，它会跟随鼠标的移动而移动。您可以首先使用屏幕左边和右边的箭头来研究整个集合。当您找到一款吸引您眼球的产品时，有关该产品的信息和更多图片就会不对称地显示在手表的滚动条上。您可以学习关于卷绕系统，外壳，表带，表盘和其他技术细节。动画很好地平衡和微妙。您绝对不会错过它们，但它们也不会分散您对卡尔帕手表系列的注意力。

总结

只要看一下这个列表中的例子，就会清楚滚动触发动画是非常通用和实用的，并且可以在各种网站上使用。

关于这种类型的动画，最重要的一点是要记住平衡是关键。我们可以说，“少即是多”，在总体设计上，我们是对的。但是，当我们讨论滚动触发动画时，就不一定是这样了。正如您在浏览这些网站时看到的那样，当事情被推到动画的极限时，用户体验会变得特别令人兴奋。当我们看到从一页或一节过渡到另一页或一节时，我们通常会对我们所看到的感到惊讶，但更重要的是，我们感到激动和鼓舞。

关于动画的另一个创意的事情是，它可以刺激元素的动作，把我们的注意力集中在一个网站设计的特定部分，并引导我们从一个屏幕到下一个屏幕，它们可以对网站设计的整个界面产生积极的影响。他们使它看起来干净整洁。无需使用大量的按钮、菜单、导航、不同类型的箭头等，只需将精心设计的滚动触发动画效果整合到我们的项目中，我们就可以为用户确保有趣、交互式和流畅的浏览体验。