十五年信息化建设品牌 - 主营:提供信息化建设解决方案、提供内容安全监测解决方案

柳州信息化建设之解锁超酷的网页设计

 二维码 6
发表时间:2022-07-08 20:55

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





解锁建站滚动视差设计


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


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



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


2. 其他通栏滚动视差设置
点击“编辑通栏模块”按钮。


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





对对对,就是这么的简单!!!

接下来一起看看这么简单的动作
还能实现什么炫酷效果

变装效果



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

当用户向下滚动页面时

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

页面采用同样的人物

同样的静态站姿

同一种画面底色

以强调服装元素的变化

页面故事显得干净利索



接下来

小编用表情包来进行演示



首先到云设计找一个表情包

编辑表情包牌子中的文字



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

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




接着回到网站编辑页面

添加三个通栏排版模块



① 点击编辑通栏模块
② 选择自定义背景并添加图片
③ 选择效果为“固定,不跟随页面滚动



以上操作重复操作三次
就可以获得以下效果 ↓↓↓



【其他案例】
Prosche 官网中展示了不同时代的保时捷车型演进的过程
背景和配乐也会随着时代的变化发生改变
带给用户沉浸式体验



制作网站时会有很多灵感
但苦于没有制作方法
现在有一个可以让网站充满故事
会动起来的滚动视差效果
遇到了就不要轻易放掉哦

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







会员登录
登录
其他帐号登录:
留言
回到顶部