AI 助理
备案控制台
开发者社区 云计算 文章 正文

视差滚动在网页设计中应用的21个优秀案例

2012-02-10 783
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验非常出色，这是今年网页设计的热点趋势。今天这篇文章就与大家分享21个视差滚动效果的网页设计作品，一起欣赏（以拖动滚动条方式浏览效果会更佳）。

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验非常出色，这是今年网页设计的热点趋势。今天这篇文章就与大家分享21个视差滚动效果的网页设计作品，一起欣赏（以拖动滚动条方式浏览效果会更佳）。

iutopi

parallax10

Guy Vernes

parallax15

Campaign Monitor is Hiring

parallax01

International Watch Co

parallax03

cultural solutions uk

parallax02

Nike Better World

parallax04

Old Pulteney Row to the Pole

parallax05

Webdesign Karlsruhe

parallax06

YEBO Creative

parallax07

Head2Heart

parallax08

Len M

parallax09

Drupalcon Denver 2012

parallax11

Ben the Body Guard

parallax12

Fingerbilliards

parallax13

Kisko Labs

parallax14

Netlash-bSeen

parallax16

Egopop Creative Studio

parallax17

Jan Ploch

parallax18

Web is Beautiful

parallax19

unfold

parallax20

manufacture d’essai

parallax21

楚广明
目录
相关文章
萝卜丝丸子
|
4月前
|
算法
互动游戏解决遇到问题之视差滚动的问题如何解决
互动游戏解决遇到问题之视差滚动的问题如何解决
萝卜丝丸子
36 0
游客fz577umxdejsg
|
4月前
|
前端开发
CSS动画新潮流：炫酷水波效果，让网页元素生动起来！
CSS动画新潮流：炫酷水波效果，让网页元素生动起来！
游客fz577umxdejsg
74 0
土木林森
|
7月前
|
前端开发 JavaScript UED
【专栏：交互与用户体验篇】CSS 滚动效果与视差滚动
【4月更文挑战第30天】本文探讨了CSS滚动效果和视差滚动在提升网页用户体验中的作用。CSS滚动效果通过`transition`和`animation`属性实现元素动态变化，包括平滑滚动、元素跟随和滚动触发动画。视差滚动则利用不同元素滚动速度差异营造立体感，适用于长页面设计、故事讲述和创意展示。实现方法包括纯CSS和结合JavaScript。这些效果能增强吸引力、提升沉浸感并引导用户注意力，但需注意性能优化、适度使用和兼容性测试。案例分析展示了它们在实际项目中的应用和影响。
土木林森
88 2
会敲代码的_TT
|
7月前
|
前端开发 JavaScript API
想要吸引用户的眼球？试试CSS视差滚动，给你带来超级视觉盛宴
欢迎来到前端入门之旅！
会敲代码的_TT
100 1
秋天风景
|
前端开发 JavaScript
经典网页设计：25个应用视差滚动的单页网站
　　有许多有趣的网站类型，其中之一是视差技术，也被称为视差滚动（Parallax Scrolling）。在网页设计中，视差滚动是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动形成 3D 运动效果，有很强的视觉冲击力。
秋天风景
1332 0
chokcoco
|
前端开发 JavaScript 容器
滚动视差？CSS 不在话下
滚动视差？CSS 不在话下
chokcoco
150 0
滚动视差？CSS 不在话下
哈你真皮
|
前端开发 容器 Web App开发
如何用纯 CSS 创作一个圆环旋转错觉动画
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/oPWJNj/ 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。
哈你真皮
1230 0
秋天风景
|
前端开发 UED HTML5
神奇的滚动动画，30个视差滚动网站设计
　　使用 HTML5 和 CSS3，我们能够在浏览器中创建更有趣和更吸引眼球的效果。其中，视差滚动（Parallax Scrolling）就是这样的效果之一。这种技术通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
秋天风景
1101 0
秋天风景
|
Web App开发
20个华丽的时间轴例子，寻找网页设计灵感
　　我敢肯定，你们中的大多数都知道在设计中使用时间轴的，尤其是 Facebook 个人主页改版成这样之后，这种风格更加流行。此外，像 Path 和 Tweetbot 也在一些智能手机应用程序使用基于时间轴的设计，以展示他们的故事。
秋天风景
1408 0
秋天风景
|
Web App开发 前端开发 iOS开发
美！视差滚动在图片滑块中的应用【附源码下载】
　　视差滚动（Parallax Scrolling）已经被广泛应用于网页设计中，这种技术能够让原本平面的网页界面产生动感的立体效果。下面分享的这个图片滑块效果是难得一见的结合视差滚动的例子，之前的文章给大家分享过，这里再推荐一下。
秋天风景
868 0