- 开始使用
- 功能组件
- 附加组件
- 教程
- 如何定制
- 布局示例
- 项目结构
- 使用 Less & Sass
- 创建主题
- 创建样式
- Customizer.json 变量
- JavaScript 示例
- 自定义前缀
- 基础
- 打印组件
- 网格组件
- 面板
- 块
- 文章
- 评论
- 效果
- Flex 布局
- 覆盖
- 导航菜单
- 导航栏
- 二级导航
- 面包屑
- 分页
- 选项卡
- 缩略图导航
- 列表
- 描述列表
- 表格组件
- 表单
- 按钮组件
- 图标
- 关闭
- 徽章
- 提示框组件
- 缩略图
- 遮罩
- 文本
- 列
- 动画组件
- 对比度
- 下拉菜单
- 模态对话框
- 抽屉
- 切换器
- 拨动组件
- 滚动监听
- 平滑滚动
- 动态网格
- 视差网格
- 圆点导航
- 滑动导航
- 动态分页
- 高级表单
- 文件表单
- 密码表单
- 选择表单
- 占位符
- 进度条
- 灯箱
- 自动完成
- 日期选择器
- HTML 编辑器
- 滚动条
- 滑块集
- 幻灯片
- 视差
- 手风琴
- 通知
- 搜索
- 可嵌套
- 可排序
- 附着
- 时间选择器
- 工具提示
- 上传
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
视差
依赖于页面滚动条位置的动态 CSS 特性。
用法
要使用这个组件,需要添加 data-uk-parallax
属性到容器元素。并为每个你想要使之动态变化的 CSS 属性添加对应的选项值。注意 此组件需要额外添加 parallax.js
文件,在js/components
文件夹中。
<div data-uk-parallax="{bg: '-200'}">...</div>
选项
UIkit 提供了一系列的选项,你可以把它们添加到 data-uk-parallax
属性中:
选项 | 描述 |
---|---|
x | 以像素为单位的 X 轴方向位移。 |
xp | 以百分比为单位的 X 轴方向位移。 |
y | 以像素为单位的 Y 轴方向位移。 |
yp | 以百分比为单位的 Y 轴方向位移。 |
bg | 使背景图片动态变化。 |
bgp | 以百分比为单位的背景图片动态变化。 |
rotate | 以度为单位的顺时针动态变化。 |
scale | 缩放的动态变化 |
color | 色彩的动态变化(需要设置起始值和终止值) |
background-color | 背景色彩的变化(需要设置起始值和终止值) |
border-color | border 色彩的变化(需要设置起始值和终止值) |
opacity | 透明度的变化 |
注意 你可以基础性地使任意只有一值的 CSS 属性动态变化,比如宽度和高度,直接添加到属性中即可。
<div data-uk-parallax="{y: '-200', opacity: '0'}">...</div>
起始值和终止值
属性通常由当前值变化到你设置的目标值。然而,你还可以自己定义一个起始值。这将通过传递字符串到包含由逗号隔开的两个值的选项中来实现。
注意 某些属性,比如颜色,必须要有起始值和终止值。
<div data-uk-parallax="{x: '-100,100', 'background-color': '#EBF7FD,#FFF1F0'}">...</div>
嵌套的动画/Nested animation
为前提的元素使用不同的动画是很简单的事情。只需在视差容器中再创建一个容器,并在新的 data-uk-parallax
属性中添加你的选项即可。
<div data-uk-parallax="{bg: -200}">
<div data-uk-parallax="{opacity: '0,1', scale: '0,1'}">...</div>
</div>
目标选项/Target Option
通常,视差动画从元素进入视口开始,到离开视口结束。开始和终止动画基于另一个元素在视口中的可见性,使用 target
选项进行设置。在使用嵌套动画时会很有帮助。
<div>...</div>
<div data-uk-parallax="{target: '#target-id'}">...</div>
速度/Velocity
添加 velocity
选项,调整动画的缓动效果。
<div data-uk-parallax="{velocity: '0.5'}">
...
</div>
视口/Viewport
使用 viewport
选项,动画持续时间将被调整。其值为 1
或 false
时,视差动画从元素进入视口开始,到离开视口结束。将其设置为 0.5
,如下面的例子,动画只在元素出现的前半个视口中发生。
<div data-uk-parallax="{viewport: '0.5'}">...</div>
JavaScript 选项
选项 | 可用值 | 默认值 | 描述 |
---|---|---|---|
velocity | float | 0.5 | 页面滚动时,动画的速度 |
target | mixed | false | 关于动画持续时间的元素尺寸参考/Element dimension reference for animation duration. |
viewport | float (0 to 1) | false | 依赖于视口的动画范围 |
media | integer / string | false | 启用视差效果的视口宽度条件(比如640px),或CSS媒体查询 |
手动初始化
var parallax = UIkit.parallax(element, { /* options */ });
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论