手机版 欢迎访问人人都是自媒体网站

当前位置:主页 > 推广 >

Axure教程:顶部导航跟随页面滚动

时间:2020-12-21 09:30|来源:网络整理|编辑:采集侠|点击:

当页面往下滚动时,导航跟随页面一起,点击右侧图标可直接返回顶部。那这个效果是如何实现的呢,一起来文中看看~

 Axure教程:顶部导航跟随页面滚动

如下图:

顶部导航跟随页面滚动

顶部导航跟随页面滚动

线上效果图,查看:

制作方法 1. 添加导航与页面

按平时制作导航与页面的方式制定,无需设置任何交互效果,但为了看到页面效果,页面建议添加长页面,才可出现滚动。

2. 添加滚动图标

添加滚动图标,并设置为隐藏。

顶部导航跟随页面滚动

滚动图标

针对图标做交互操作,设置为摇摆,时间为500。

顶部导航跟随页面滚动

图标交互

3. 添加热区

添加一个热区,并放置与菜单同坐标值位置。

顶部导航跟随页面滚动

热区

4、页面窗口滚动交互

在页面添加窗口滚动交互,添加用例

顶部导航跟随页面滚动

窗口滚动交互

添加用例一,移动导航,设置为绝对位置,x值为[[Target.x]],y值为[[Window.scrollY]]。

顶部导航跟随页面滚动

用例1

添加用例二,添加条件,设置值>10,显示滚动图标,动画逐渐500s。

顶部导航跟随页面滚动

用例2

设置用例三,设置滚动图标隐藏,动画逐渐500s。

顶部导航跟随页面滚动

用例3

Copyright © 2018 DEDE97. 织梦97 版权所有 京ICP