写点什么

网页设计:视差特效的 5 种运用技巧

  • 2020 年 1 月 08 日
  • 本文字数:752 字

    阅读完需:约 2 分钟

网页设计:视差特效的5种运用技巧

在视差特效的具体运用过程中, 有一些技巧和注意事项是不容错过的,今天的文章总结了视差特效的 5 种运用技巧。



视差特效是目前最流行的网页设计趋势之一。在这个滚动动画特效支撑之下,前景的元素和背景会在滚动浏览时以不同的速度运动,营造出动感又独特的视觉体验。


视差动效可以运用在绝大多数类型的网站当中,它是增强用户参与度、提升用户体验的有效手段之一。视差特效的好处在于,它并不需要硬性的运用到每一个页面当中,同时,它还能促使用户更加专注于网页内容,提升整体的参与度。


视差特效让网页中的元素,相互之间有了距离和深度,换句话说,它让网页拥有了接近三维的视觉体验,这也使得网页有了接近沉浸式的体验。


不过,视差特效的缺陷也很明显,它在移动端上并不一定总是那么好用。在视差特效的具体运用过程中, 有一些技巧和注意事项是不容错过的,今天的文章我们总结了视差特效的 5 种运用技巧。


1、用动效来展示变化



Porche



Sonance


设计师能够使用视差动效来展示页面中的变化。这些随着滚动而不断运动的元素能够传达出时间、空间和位置上的关系。


视差特效和网站内容一起工作的时候,最能展现其中的变化。


在上面 Porsche Evolution 这个网站当中,不同时代的保时捷车型随着时间的变化而展现,背景的图片场景也随之变化,如果你仔细听会发现音乐也会随着年代的变化而演变。


这种设计技巧会驱使着用户滚动浏览,因为大家想看接下来会有什么样的变化。在这种视差滚动+时间轴的搭配之下,用户可以从上到下浏览,反过来看也很有意思。


Sonance 这个网页当中的视差则呈现出另外一种变化,元素在页面中的位置变化。视差特效成为了网站导航模式中的一部分,当用户在浏览的过程中,视差特效会告知用户他们所处的位置。


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/r795g_lO391zGPkixSAOfA


2020 年 1 月 08 日 15:21228

评论

发布
暂无评论
发现更多内容

Rust 元宇宙 7—— 异步和消息

Miracle

rust 异步 元宇宙

架构营模块五作业

GTiger

微博系统中”微博评论“的高性能高可用计算架构设计

Beyond Ryan

使用ES6编写一个超简单的搜索算法

DisonTangor

JavaScript 大前端

架构训练营 - 模块六

Geek_9de3de

架构实战营

OpenELB 进入 CNCF Sandbox,让私有化环境对外暴露服务更简单

青云技术社区

云计算 云原生

使用redis生成唯一编号

喵叔

11月日更

你需要用战略耐心实现职业目标

石云升

读书笔记 11月日更

阿里巴巴服务网格技术三位一体战略背后的思考与实践

阿里巴巴云原生

阿里云 云原生 服务网格 三位一体

29 K8S之ReplicaSet控制器

穿过生命散发芬芳

k8s 11月日更

【死磕Java并发】-----J.U.C之深入分析CAS

chenssy

11月日更 死磕 Java 死磕 Java 并发

中国首批区块链订单融资缘何落地雄安?

CECBC

超强实时跟踪系统首次开源!支持跨镜头、多类别、小目标跟踪!

百度大脑

人工智能 人工智能摄像头

网络监控原理

喀拉峻

网络安全 安全 网络

[Pulsar] 消息的消费

Zike Yang

Apache Pulsar 11月日更

DDD领域驱动设计落地实践系列:战略设计和战术设计

慕枫技术笔记

Java 后端 签约计划第二季

百度ERNIE新突破!登顶中文医疗信息处理权威榜单CBLUE冠军

百度大脑

人工智能

企业决策智能项目的五种失败姿势

脑极体

如何用JavaScript实现2+2=5?

Jerry Wang

JavaScript 大前端 语音识别 语音合成 11月日更

面试官:int和Integer有什么区别?为什么要有包装类?

王磊

12.04 Serverless Meetup 深圳站 | Call 你来参加

阿里巴巴云原生

阿里云 Serverless 云原生 活动

面试官:说一下final关键字和final的4种用法?

王磊

在线文本并集计算工具

入门小站

工具

激发数字新活力 打造发展新优势

CECBC

Spring AOP内功修炼

4ye

Java spring 程序员 后端 签约计划第二季

花了2个钟才搞懂这AOP为啥没生效,水友却睡着了……

4ye

Java spring 程序员 后端 签约计划第二季

面试官:final、finally、finalize 有什么区别?

王磊

java面试

架构训练营 - 模块五

Geek_9de3de

架构实战营

AOP 插件就这?上手不用两分钟!!

4ye

Java spring 程序员 后端 签约计划第二季

元宇宙是人类文明不可避免的一次内卷

CECBC

Python Qt GUI设计:QClipboard剪贴数据类(基础篇—19)

不脱发的程序猿

Python PyQt GUI设计 QClipboard 剪贴板

网页设计:视差特效的5种运用技巧-InfoQ