[Slider Revolution 6] 比较具有拖动/显示功能的前后两张幻灯片

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionalitySlider Revolution
这篇文章约4分阅读完。
[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

插件要求

之前/之后是需要购买代码注册和激活的高级插件。

内容

  1. 视图切换器
  2. 模块设置
  3. 幻灯片背景
  4. 幻灯片设置
  5. 图层设定
  • 相关话题
  • 安装附加组件
  • 启用插件
  • 导入模板

1.视图切换器

设置前后视图时在模式之间切换

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

2.模块设置

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality
图示
分频线
动画化
拖箱

箭头图标可用于水平和垂直拖动栏。单击其中一个图标将其更改为另一个。

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality
[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

1.图标大小
拖动箭头图标的字体大小。

2.图标间距
拖动箭头图标之间的间距,以像素为单位。

3.图标颜色
拖动箭头图标颜色。

4.图标阴影
选择将CSS文本阴影添加到拖动箭头图标。

5.阴影模糊
图标阴影的模糊值。

6.阴影颜色
图标阴影的颜色。

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

1.
线宽分隔线的宽度(以像素为单位)。

2.线条颜色
分隔线的颜色。

3.线阴影
将CSS框阴影添加到分隔线。

4.阴影模糊
分隔线阴影的模糊值。

5.阴影颜色
分隔线阴影的颜色。

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

1.在舞台上单击动画,
将分隔线视图自动移动到单击模块的位置。

2.持续
时间单击动画发生的总时间(以毫秒为单位)。

3.缓和单击动画
的缓和方程。

4.鼠标光标
将鼠标悬停在模块上时要使用的CSS光标。

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

1.
拖动箭头容器的填充空间。

2.边境半径
一个CSS边界半径为拖动箭头容器。

3. BG颜色
拖动箭头容器的背景颜色。

4.边框
为拖动箭头容器添加可选边框。

5.边框宽度
拖动箭头容器的边框大小。

6.边框颜色
拖动箭头容器边框的颜色。

7. Box Shadow
将可选的CSS box-shadow添加到拖动箭头容器。

8. Shadow Blur
拖动箭头容器框阴影的模糊值。

9.暗影力量
阴影强度为拖动箭头容器框的阴影。

10.阴影颜色
拖动箭头容器框阴影的颜色。

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

3.幻灯片背景

设置之前和之后视图的主要背景

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

4.幻灯片设置

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality
常规设置
开始/结束动画
前贴广告设置
箭头设定

1.激活
为当前幻灯片启用添加之前/之后。

2.方向
选择是将视图并排还是彼此分开。

3.初始分割
每当显示幻灯片时,Before / After视图的起点。

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

1.延迟
之前/之后视图开始其初始位置之前的延迟(以毫秒为单位)。

2.持续
时间初始动画发生的总时间。

3.缓  动初始动画
的  缓动方程式。

4.动画输出
选择当当前幻灯片更改为下一个时,“前/后”视图是否应淡出或“折叠”(反转开始动画)。

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

对箭头进行动画处理,以向用户提示可以拖动它们。

1.预告片动画

  • 无限循环
    对箭头进行连续动画处理。
  • 首次显示
    幻灯片时,在初始显示时对箭头进行动画处理。
  • 直到首次抓取
    动画箭头,直到用户首先与“之前/之后”视图进行交互。

2.动画类型
选择“排斥”或“吸引”来确定动画的反弹方向。

3.距离
使箭头动画的像素数量。

4.速度
动画发生的总时间(以毫秒为单位)。

5.缓  动动画
的  缓动方程式。

6.延迟
动画开始前的延迟(以毫秒为单位)。

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

1.箭头过渡
在鼠标悬停时为拖动箭头启用悬停过渡。

2. Shift Offset偏移
箭头的像素数量。

3.速度
动画发生的总时间(以毫秒为单位)。

4.缓  动动画
的  缓动方程式。

5.延迟
动画开始之前的延迟(以毫秒为单位)。

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

5.图层设置

在编辑舞台上选择一个图层,然后选择将其放置在“之前”或“之后”视图中。

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

然后,在时间轴编辑器中,图层的名称将为“ B”(之前)或“ A”(之后)  ,并且划线的眼睛图标将指示图层是否在编辑阶段可见,这取决于  编辑视图。

[Slider Revolution 6] Compare two slides before and after with drag/reveal functionality

评论

复制标题和 URL