童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

Axure:如何实现Banner导航悬浮顶部效果(PC端)?

12月24日 相思宫投稿
  本文内容适合初级Axure同学学习,Axure高手有更快捷的方法可达此效果欢迎评论留言,一起交流学习
  背景
  相信大家在工作中遇到这样的一个难题,绞尽脑汁,尝试N种方法,还是没有做出很流畅的悬浮效果。
  曾经作者也遇到这样难题,今天我将带领大家一起学习,一起解决这个难题。
  这是一个什么难题?
  请查看下图:
  网站头部,整站导航;页面下滑时提起,悬浮置顶效果很好做;把网站头部,整站导航放在动态模板外面或者将网站头部,整站导航放在动态面板里面,设置固定到浏览器中居中靠上即可。
  但是页面下滑时,如果需要将频道导航提起,悬浮至置顶效果该怎么做呢?
  这样的效果,现在网站中比比皆是,比如:36Kr、不凡商业、钛媒体。等等,都用此交互效果展示频道分类,便于用户点击,减少用户学习成本。
  效果该怎么实现?
  步骤1:建模块
  我们新建3个板块,分别起上名字头部、广告、频道导航。
  别光看着,来动手一起练习吧
  步骤2:起名字,后便找
  选中板块后,给每一个板块名称写上。
  步骤3:配置判断条件
  前提:鼠标不要选中任何板块,如果你选中了头部板块,点击下背景即可取消板块选中。
  右侧点击窗口滚动时。
  点击添加条件,进入条件配置页面。
  选择值。
  点击然后点击插入变量或函数,最后鼠标往下滑到窗口处,选择Window。scrollY,确认。
  回到条件配置页面,点击号旁边的fX按钮然后点击添加区域变数选择元件选择广告,确认。
  回到条件配置页面,选择大于。
  解释:刚刚我们设置的是,当窗口滚动时,向下所滚动的距离大于广告板块高度的值条件。
  步骤4:添加频道导航提起案例
  条件设定好后,点击确认。
  找到移动并点击它然后选择频道导航最后移动选框中选择“到达”。
  以上操作完成后,点击y处的然后点击插入变量或函数最后选择Window。scrollY,点击确认。
  解释:
  步骤3中,当窗口滚动时,向下所滚动的距离大于广告板块高度的值。
  步骤4中,移动频道导航,到达坐标X0,Y窗口滚动的起点,也就是顶部位置。
  频道导航提起,悬浮至置顶效果大功告成。
  注意点:
  频道导航板块别忘了置顶,不置顶提起悬浮时会被其它板块盖住。
  练习时,请在频道板块下面增加点内容,随便打点字,页面展示区大于1屏才有向下滚动的效果。
  频道导航如何回到自己位置上?
  刚刚完成了,当窗口滚动时,向下所滚动的距离大于广告板块高度的值。移动频道导航,到顶部位置提起,浮动。
  步骤1:新建案例名称
  可以将刚刚做好的案例复制,粘贴生成一份新的案例。也可重新编辑一份新的案例,为了节省时间我就复制,粘贴生成一份新的案例。
  步骤2:编辑条件
  按刚刚教您的步骤,进入条件设立板块,别的都不要动,将大于改成小于即可。
  解释:刚刚我们设置的是:当窗口滚动时,向上向下所滚动的距离小于广告板块高度的值条件。
  步骤3:频道导航回城案例
  选中,频道导航,记住Y轴坐标值。
  点开案例,将记住的Y轴坐标值填充到Y字段。
  解释:
  案例2:当窗口滚动时,向上向下所滚动的距离小于广告板块高度的值时。
  案例3:移动频道导航,到达坐标X0,Y220的位置(自己起始位置)。
  效果预览:https:m45sa3。axshare。com
  以上是作者的全部讲解,有点啰嗦,希望能帮助到你们。
  如有疑问欢迎留言,一起探讨,学习。
投诉 评论 转载

Axure教程:如何实现爱彼迎App首页Banner的切换效本文分享一个用Axure实现爱彼迎App首页Banner切换效果的方法,供大家参考,欢迎一起交流。作者最近闲暇时间试着将爱彼迎App的Banner切换效果用Axure实现……AxureRP9Beta开放下载,距离Axure9正式版已经AxureRP9。0Beta已经更新,最新版已经开放下载,最新版本号为:9。0。0。3611。AxureRP9下载地址:目前Axure官网已经开放下载,下载地址为:……中继器使用场景(四):新闻类APP频道自主增减今天我们以腾讯新闻为例,讲一下如何做出app内频道自主增减的效果。新闻类app由于内容的原因,一般会分为很多的阅读频道,比如:要闻、娱乐、体育、金融等等,用户可根据自己的……Axure教程:天气APP及色彩主题的切换本文主要介绍了用Axure制作高保真天气APP以及色彩主题切换一、效果展示:原型体验地址:https:p5eysh。axshare。comc2二、操作分析……Axure:APP图片动态切换场景本文主要介绍了APP中图片动态切换的运用,一起来看看效果图:操作分析鼠标向左向右滑动,图片动态切换至下一张上一张,且当前图片尺寸变大,清晰度由透明变不透明。……Axure教程:制作进度条的简单方法看到大家在制作进度条的时候都喜欢用函数去实现,函数的实现方法虽然精准,但是函数复杂导致耗时耗力。在能够实现相似效果的情况下,我选择使用懒人的方法好了,动态面板走起效果图:……原型设计:百词斩单词翻转还原效果实现最近无意间被百词斩官网首页的页面效果所吸引,当我们选择一个不认识的单词时,单词会进行翻转,并显示为图片状态,并且会在一段时间后还原为单词状态。依照官网的样式,根据自己的理解绘制……Axure:如何实现Banner导航悬浮顶部效果(PC端)?本文内容适合初级Axure同学学习,Axure高手有更快捷的方法可达此效果欢迎评论留言,一起交流学习背景相信大家在工作中遇到这样的一个难题,绞尽脑汁,尝试N种方法,……中继器使用场景(三):轮播图放大效果本文以“人人都是产品经理”手机app原型为例,讲解轮播过程中的,侧图留框、主图放大的功能,以及自动轮播和手动拖动的实时切换。(末尾有彩蛋)现在手机app中我们经常能看到有……Axure设计:双向列表带计数选择列表框左右双向选择效果在互联网平台中应用非常多,从左侧的待选项中选中选项移入右侧,从右侧的已选项中取消选项移入左侧。作者将通过这篇案列分享,教大家使用Axure制作实现“双向列……Axure函数系列使用字符串函数实现模糊搜索效果继续本系列Axure函数教程,上一篇文章主要给大家分享了Slice、Concat、Math。floor等字符串处理函数的使用,本篇文章将结合中继器给大家讲解IndexOf函数的……原型的第一性原理:讲清楚目标一个产品需要有一个核心定位,我们的原型也首先要说清楚这个定位所转化过来的目标,这是第一层次,我称为产品目标。在动手进行原型制作之前,还有一个很重要的事情要先梳理清楚,我们可以称……
简短的职场正能量的语录摘录96条简洁的职场正能量的语录摘录36条职场正能量的语录职场心灵鸡汤语录摘录职场心灵鸡汤语录职场的语录简短的职场的语录简洁的职场的语录86条职场的语录摘录30条简单的职场正能量的语录职场礼仪培训心得体会职场的语录

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界