视差滚动 - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享13项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

投稿

视差滚动话题

首页
设计文章
视差滚动

写给新手的滚动视差设计指南（附7个教科书级案例）

UI

写给新手的滚动视差设计指南（附7个教科书级案例）

现在有很多刚入行的设计师可能已经不知道什么是滚动视差了。没关系，只要你花 5 分钟体验下本文提到的优秀案例，你肯定会停不下来，还附上教程唷

2019/09/12

视差滚动网站

这10个教科书级的网页，帮你搞明白视差滚动特效

网页

这10个教科书级的网页，帮你搞明白视差滚动特效

在视差滚动网页的设计上，无论是移动端还是桌面端，如今的设计师都有了足够深入的探索，并且对于功能和体验上的挖掘，都有了比较成熟的经验。无论是导航悬停式的滚动还是水平滚动和分屏3D特效，视差滚动这一设计趋势已经深刻地影响到了如今的UI设计。今天的我们将要推荐10个颇为值得学习的视差滚动网页设计作品，它们在设计上都有其独到之处。

2017/11/23

视差滚动网站

用这5个技巧在网页设计中玩转视差特效

教程

用这5个技巧在网页设计中玩转视差特效

视差特效是目前最流行的网页设计趋势之一。在这个滚动动画特效支撑之下，前景的元素和背景会在滚动浏览时以不同的速度运动，营造出动感又独特的视觉体验。视差动效可以运用在绝大多数类型的网站当中，它是增强用户参与度、提升用户体验的有效手段之一。

2017/11/15

视差滚动网站

想让用户忍不住浏览下去，这5种设计策略需谨记

教程

想让用户忍不住浏览下去，这5种设计策略需谨记

网站中的内容再好，总得让用户能看到，才有价值，而矛盾在于，首屏的空间始终是有限的。所以，我们总希望用户能够滚动页面向下看，从某种意义上来说，长滚动页面和无限滚动的设计，如此地受欢迎，就是因为它贴合了用户下意识滚动浏览的习惯，也符合内容的创建者希望被用户看到的需求。一般而言，依托滚动交互的页面，同样多的内容，在小屏幕上需要滚动的距离更长，同时，它们也需要设计师提供更优秀、可用性更强的导航和辅助元素，甚至借助动效等元素来引导用户滚动浏览。

2017/10/07

重新认识滚动交互，让你设计的网页更适合这个时代

教程

重新认识滚动交互，让你设计的网页更适合这个时代

出于对新交互模式的探索和技术的发展，曾经网页设计中的许多禁忌，现如今反而成为了越来越受欢迎的趋势，网页中的滚动交互，就是如此。作为一项基本的交互方式，滚动交互并不是一成不变，它正将新的技巧和新的规则纳入其中，逐步演进。今天的文章，我们会探讨滚动交互在网页中的新变化，探讨新“滚动”的利弊，分享技巧。

2017/05/08

帮你搞定长滚动网页的设计最佳实践

网页

帮你搞定长滚动网页的设计最佳实践

长滚动页面和无限滚动式的网页已经彻底流行开来了，甚至可以说它已经脱离趋势，成为了一种常规的设计，它们的流行并不是巧合。当用户向下滚动的时候页面的时候，所需要的内容与信息会自然的呈现出来，在此过程中通常不会涉及到额外的、多余的交互。长滚动式的页面有着如下的优势：·更为精简的导航·更容易呈现故事，拥有吸引用户的潜质·与移动端设备的良好兼容性长滚动页面的流行和移动端设备的广泛普及有着直接的因果关系：屏幕越小，相同内容所需要展现的页面就越长。

2017/01/18

打开新世界的大门！悄然流行的混合型视差网页设计趋势

教程

打开新世界的大门！悄然流行的混合型视差网页设计趋势

如果你仔细观察那些最新的使用了视差技术的网页，你会发现这些网站所采用的视差设计已经似是而非了。这些网页中的可动元素非常之多，但是并非动画；配色风格和视觉元素趋近于扁平风，并且借用了来自Material Design的物理隐喻，融合了许多微妙的交互细节。诸多时下流行的设计手法和新趋势开始被打碎分解揉合到一起，形成了新的混合型视差滚动网页。

2016/02/01

HTML5视差滚动

独辟蹊径！20个精巧走心的单页滚动网页设计案例

酷站推荐

独辟蹊径！20个精巧走心的单页滚动网页设计案例

单页滚动也算是目前网页设计中一个独立的类别了，导航、菜单等网页元素的设计也有一套独特的手法。极简风的导航栏设计其实算不上太多，毕竟导航栏的部分应该是包罗万象并且常驻页面的。而汉堡菜单的存在让导航具备了更优秀的隐藏性，摆脱了滚动条、分页和复杂的下拉框，让页面更整洁，为视觉设计留下更大的空间，留住了用户。

2015/10/11

优秀网页设计

潮流趋势！带你梳理正在流行的长滚动页面设计

教程

潮流趋势！带你梳理正在流行的长滚动页面设计

在内容一定的情况下，屏幕越小，页面自然就越长。长滚动页面的兴起并不是没有理由的，移动端对桌面端市场份额的挤压，可穿戴设备等小屏幕的流行，所有的这些变化都在促使这一趋势更加流行。长滚动页面的流行促使设计师在新需求下探索新的导航模式和独到的视觉设计，故事的讲述也有了新的方式，浏览体验也将截然不同。

2015/10/02

花样百出！21个动感酷炫的视差网站设计

酷站推荐

花样百出！21个动感酷炫的视差网站设计

编者按：今天这组视差网站个个别出心裁，每一个都会让你体验到不同的视觉之旅，卖萌打滚小清新，冷艳高傲御姐范，都齐活了，握紧鼠标进来瞧。Aquatilis ExpeditionDAN ParisTrading CultureIce and skyGiampiero Bodino30uNicolas TarierSavse SmoothiesBORNShaker BrandDragoneIntroducing Squarespace 7Relatos Salvajes / Wild TalesOne To...

2015/07/01

网站运用新趋势！神奇的鼠标滚轴动画（视差滚动）

酷站推荐

网站运用新趋势！神奇的鼠标滚轴动画（视差滚动）

动画在每一年都是最具影响力和占据主导地位的。Web开发者通过不同的实验来实现动画，从最简单的基础效果到富有开创性的展示结果。毫无疑问，这种雪崩式的动画效果已经被认为是web技术史上最先进的技术。

2014/03/13

教程

网页特效之视差滚动设计指南

@腾讯ecd 星旧：作为未来网页设计的热点趋势之一的“滚动视差”在近年来被越来越多网站所采用，特殊新颖的展示模式也让许多用户眼前一亮。网络上也如雨后春笋一般出现了很多像《30个让人兴奋的视差滚动网站》、《60个视差滚动网站赏析》……等一系列的视差滚动的文章，不过赏析的居多，真正指导设计师如何去设计，如何去实现的实用型文章却很少。

2014/01/09

Parallax Scrolling

让网页舞动起来！25个免费的视差滚动插件

前端开发

让网页舞动起来！25个免费的视差滚动插件

以前我们通过优秀字体、配色让网站变得舒服，现在我们通过视差滚动让网站拥有由上至下一站式的视觉震撼效果，访客只需滑动鼠标滚轮就能体验到，你可以利用今天提供的这25款免费的视差滚动插件轻松实现，每款插件都有提供Demo，设计师们来感受一下。科普一下：视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。

2013/12/15

11个超炫的视差滚动网站欣赏（附神器推荐）

酷站推荐

11个超炫的视差滚动网站欣赏（附神器推荐）

目前这种视差滚动效果被越来越多的国内外网站所应用，成为网页设计的热点趋势。通过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。

2013/10/08

优秀网页设计

20个创意十足的倾斜式网站设计

酷站推荐

20个创意十足的倾斜式网站设计

大多数传统的网页都是直愣愣的竖直水平的设计。不过现在，斜线网页设计与视差滚动设计（译者注：一种特殊的网页形式呈现形式，其基础原理是让多层背景以不同的速度搬动，形成立体的感觉，带来卓越的视觉体验）正在挑战这一传统。倾斜的设计构图与之前我们接触的各种理论背道而驰，将人们的注意力从网页内容中吸引到这些不规则的图形设计上。

2013/05/27

优秀网页设计

利用Adobe神器十分钟零代码实现HTML5视差滚动特效

前端开发

利用Adobe神器十分钟零代码实现HTML5视差滚动特效

视差滚动是最近出现的一个比较火的站点视觉效果，适用于做整站(mini-site)也可以做小动画。通常来说，要使用JavaScript和CSS手工编代码来实现视差滚动效果。本文来介绍如何使用Edge Animate，在十分钟之内，无编码，无压力地实现类似效果。

2013/03/25

HTML5视差滚动

没有更多文章了

大家都在看

用户体验设计

文章 329

职场规划

文章 414

UI

文章 147

设计理论

文章 132

设计圈干货

文章 188

界面设计

文章 162

设计流程

文章 154

干货大合集

文章 166

干货合集

文章 197

热门频道

设计专题

热门设计知识精挑细选

细节猎人

1分钟小短文揣摩设计真谛

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

优设9图

优设爆火的干货频道

设计问答

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号： uisdc123

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航

优设训练营