>

解锁超酷的网页设计

>

解锁超酷的网页设计

解锁超酷的网页设计

甘肃合创中小企业公共服务平台

2022-06-23

1

导读：滚动视差的网页设计效果通过背景与模块以不同的滚动速度展示，呈现出丰富的层次感，给用户创造非常吸引人的视觉体验

滚动视差的网页设计效果通过背景与模块以不同的滚动速度展示，呈现出丰富的层次感，给用户创造非常吸引人的视觉体验。

解锁建站滚动视差设计

网站横幅及其他通栏均支持设置滚动视差，接下来一起看看是如何实现这个炫酷的效果吧。

网站横幅

进入网站设计页面，鼠标悬停在横幅上，点击“编辑横幅”。

在弹窗中选择“高级”，在图片效果栏中选择“固定，不跟随页面滚动”，即可形成网页滚动时，横幅的背景图片固定不动，直到被下一模块覆盖才消失的效果。

2. 其他通栏滚动视差设置

点击“编辑通栏模块”按钮。

在弹窗中选择“固定，不跟随页面滚动”效果即可将模块背景固定，还能调整模块滚动的速度。

对对对，就是这么的简单！！！

接下来一起看看这么简单的动作

还能实现什么炫酷效果

变装效果

krystalrae通过网站滚动展示了变装效果

当用户向下滚动页面时

会看到画面中人物变换服装

页面采用同样的人物

同样的静态站姿

同一种画面底色

以强调服装元素的变化

页面故事显得干净利索

接下来

小编用表情包来进行演示

首先到凡科快图找一个表情包

编辑表情包牌子中的文字

小编保存了三张不同文字的图片

（建议保存时修改命名以便后期查找哦）

接着回到网站编辑页面

添加三个通栏排版模块

① 点击编辑通栏模块

② 选择自定义背景并添加图片

③ 选择效果为“固定，不跟随页面滚动”

以上操作重复操作三次

就可以获得以下效果 ↓↓↓

【其他案例】

Prosche 官网中展示了不同时代的保时捷车型演进的过程

背景和配乐也会随着时代的变化发生改变

带给用户沉浸式体验

制作网站时会有很多灵感

但苦于没有制作方法

现在有一个可以让网站充满故事

会动起来的滚动视差效果

遇到了就不要轻易放掉哦

让您的网站设计效果更丰富多彩

关于网站您有什么想分享的好设计吗？

欢迎评论区告诉我们哦！

- END -

@原创者，版权归原创所有，如有侵权，请及时联系

联系我们：

微信号码：hcys1688-03

QQ号码：296118973

公司地址：甘肃表是科技孵化园（国家级科技企业孵化园）一楼北侧105号

公司电话：13399446511

电子邮箱：296118973@qq.com

公司网址：www.hcds1688.com

点击阅读原文了解更多详情

【声明】内容源于网络

0

0

甘肃合创中小企业公共服务平台

1234

内容 658

粉丝 0

甘肃合创中小企业公共服务平台 1234

总阅读44

粉丝0

内容658