• 郑州软件开发

    |

    郑州网站建设

    |

    郑州网站制作

    |

    APP开发

    |
  • 郑州软件开发电话: 15937160052
  • 郑州网站建设页面滚动交互js效果
  • 发表日期:2018-07-25   浏览:2019   关键词: 交互设计 滚动交互设计 页面设计
  • 郑州网站建设

    昨天同事跑来问我,郑州网站建设有什么想法没有,找了几种风格的官网给他看,结果一眼就看中了QQ的官网样式,我重新分析了一下我司产品同属工具类,官网同样不需要太多的展示内容和功能,所以准备做一个交互样式相似的仿真给老板看,同时也分享给大家交互的设计思路。

    为了避免泄露我司产品,本来想使用线框图展示,结果因为效果太差只好换成了本人自己拍摄的照片供大家欣赏了。

    QQ官网样式展示

    官网地址:https://im.qq.com/index.shtml

    再看一下原型样式:

    体验地址:https://ur6hf9.axshare.com/index.html

    此处需要说明仍然有一个BUG就是如果滚动条拖动的太快,软件在触发区间没有做出反应时就会出现图片加载不一致的情况,各位体验的小伙伴可以慢点拖拽(看完下面的触发讲解后就可以理解了,如果各位有什么好的方法欢迎与我交流)

    原型设计分享:

    一、元件准备

    此效果设计到四个元件:

    • 内容页;

    • 背景图片上;

    • 背景图片下;

    • 拖动条。

    1. 内容页

    内容页动态面板长度设为1200,高度设为600。

    然后在里面自上而下建立四个长方形,分别填写内容,命名1、2、3、4。其中 1 号、 4 号长度设为1200,高度设为600。 2 号、 3 号长度设为1200,高度设为350。然后中间间隔距离为 300 一次排开,设为一组。

    2. 背景图片上/下

    背景图片页动态面板长度设为1200,高度设为300,各添加 3 个切换页面。按照上下位置紧贴着对其排列,同时在界面中分别放入三张长1200、高度 600 的图片。

    3. 拖动条

    拖动条画成常规格式即可。

    长度根据需要计算,本仿真滚动条移动范围为 0 至600,内容页移动范围为- 2200 至2800,所以我将其高度设为160,使内容页的移动距离等于 5 倍的滚动条移动距离(后续公式中要使用)。

    二、郑州网站建设交互动作

    完成元件的建立后,将内容页完整的盖到背景图片上/下,将滚动条上端对其放置在内容页右侧及可以开始设计交互动作。

    1. 拖动条

    首先在滚动条上添加用例拖动时:

    • 先移动“拖动条”为“垂直拖动”,设置边界为 0 至 600 范围内;

    • 然后设置移动内容页内的“1、2、3、 4 的组”为“相对位置”,x=0,y=[[(-DragY)*5]](前面算过内容页移动距离是拖动条移动距离的 5 倍,拖动条向下移动时,内容页向上移动,所以为(-DragY)*5),设置边界为- 2200 至 2800 范围内。

    2. 内容页

    因为我们要实现的效果是,当内容页1、 2 之间的缝隙经过时看到的是背景图片1;内容页2、 3 之间的缝隙经过时看到的是背景图片2,内容页3、 4 之间的缝隙经过时看到的是背景图片3。

    同时我们将2、 3 的高度设置为350,背景图片页上/下高度为300,所以在内容页移动时,2、 3 可以完全覆盖住背景图片页的上或下,我们将在完全覆盖的时候进行背景页的切换,从而实现我们想要的效果。

    我们将内容页 2 覆盖背景图片页时,进行图片 1 和图片 2 的切换,内容页 3 覆盖背景图片页时,进行图片 2 和图片 3 的切换。

    背景图片上的坐标为(0,0),背景图片下的坐标为(0,300),所以内容页坐标在 250 至 300 时完全覆盖背景图片下,将内容页坐标y等于 250 至 275 时背景图片下转换为图片2,坐标y等于 275 至 300 时背景图片下转换为图片1。

    同理内容页完全覆盖背景图片上的范围为- 50 至0,内容页坐标y等于- 25 至- 50 时背景图片下转换为图片2,坐标y等于- 25 至 0 时背景图片下转换为图片1。

    内容页 2 设置好后,内容页 3 同样的坐标范围只是调整为图片 2 与图片 3 的切换即可。

    然后运行一下程序就可以出来我们想要的效果了。

  • 相关新闻
    • 如何搭建景区网站建设?
      搭建一个景区网站建设的很有必要的,因为做了网站可以增加客户对旅游景点的信任,还有一方面是能让旅游企业获得更多
      日期:2022-09-02 浏览:2492
      电商网站建设为什么要独立开发?
      线上购物的基础就来源于企业的电商网站建设,做好电商网站,才能让客户在线上购物,而且现在市面上有很多的电商网站
      日期:2022-03-24 浏览:3176
      郑州建网站细节分析说明
      郑州建网站要重视产品介绍和展示,作为网站建设,其最重要的一个特点就是能够较好的进行产品的推广和宣传
      日期:2021-12-26 浏览:3324
  • 一个企业的成长,从无到有,从一个人到一群人,从一种元素到元素集合;或多或少、都要有品牌意识的存在……