ionic-基于angularjs实现沉浸式顶部导航栏,滚动时产生渐变效果
来源:互联网 发布:两学一做网络答题答案 编辑:程序博客网 时间:2024/04/29 06:56
最近一直在研究angularjs和ionic框架,对于如何设计好的产品和用户体验一直都在思考,看了很多关于app设计的资料和其他的产品,觉得基于material design的设计确实是目前比较好的语言,闲着的时候就写了一个关于app实现沉浸式顶部导航栏。
demo:
导航栏由透明的状态跟随页面往下混动是动态的调整,主要是根据往下滚动时计算距离顶部的距离,滚动至一定的距离时,透明度基本没有了,原色显示header导航栏,同时设置一个计算透明度的基数作为分母,滚动的距离作为分子,动态计算opacity,所以会产生渐变效果。
由于代码比较多,已整理开源在github上。欢迎访问:https://github.com/bingcool
0 0
- ionic-基于angularjs实现沉浸式顶部导航栏,滚动时产生渐变效果
- tableView:实现导航栏渐变和顶部禁止弹簧效果
- 沉浸式顶部导航栏
- ionic-基于angularjs实现固定顶部的可循环滚动文字的通知banner
- jQuery实现固定顶部 定位滚动导航效果代码
- Swift:向下滚动时BannerCell扩大效果,导航栏的颜色渐变效果:
- 如何实现渐变导航栏效果
- 导航栏渐变效果
- 导航栏滚动到顶部时固定在顶部
- Ionic 顶部贴附效果的实现
- app实现状态栏和导航栏沉浸效果
- ionic Angularjs 产生简单的列表滚动区域
- Android沉浸式状态栏 + actionBar渐变 + scrollView顶部伸缩
- 导航栏颜色渐变效果
- swift实现图片下拉放大,导航栏渐变效果
- iOS开发实现导航栏透明度渐变效果
- 沉浸式导航栏
- tableView滚动时(渐变)隐藏显示导航栏
- 二叉树中和为某一值的路径
- 什么是拟合
- ubuntu 14.04 samba安装及使用
- 第三十一讲项目2.1-公式pi/4=1-1/3+1/5-1/7+...的近似值
- request.getParameter(pName)传参中文问题
- ionic-基于angularjs实现沉浸式顶部导航栏,滚动时产生渐变效果
- python wordcloud 对电影《我不是潘金莲》制作词云
- 使用poi导出Excel ,加上筛选框
- jFinal写的修改密码的具体实现
- Python列表操作
- 简单计算器的实现
- php实现斐波那契数列
- 以类的某个属性对类排序
- ICMP