【发布时间】:2017-04-05 16:41:19
【问题描述】:
我正在使用旋转滑块在屏幕上从左到右为图像设置动画(这部分正在工作)。我想要一层文本,当图像越过它时出现。有没有办法通过滑块革命来做到这一点?
【问题讨论】:
我正在使用旋转滑块在屏幕上从左到右为图像设置动画(这部分正在工作)。我想要一层文本,当图像越过它时出现。有没有办法通过滑块革命来做到这一点?
【问题讨论】:
<ul>
<!-- SLIDE 1 -->
<li data-transition="curtain-1" data-slotamount="5" data-masterspeed="700" data-title="Slide 1">
<!-- MAIN IMAGE -->
<img src="yourIMGhere.jpg"
alt="slidebg1" data-bgfit="cover"
data-bgposition="center center"
data-bgrepeat="no-repeat">
<!-- LAYERS -->
<div class="tp-caption rs-caption-1 sft start"
data-x="center"
data-hoffset="0"
data-y="100"
data-speed="800"
data-start="2000"
data-easing="Back.easeInOut"
data-endspeed="300">
<u>TEXT PLACED HERE FOR FIRST LAYER</u>
</div>
<!-- LAYER -->
<div class="tp-caption rs-caption-2 sft"
data-x="center"
data-hoffset="0"
data-y="200"
data-speed="1000"
data-start="3000"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">
ADD A SECOND LAYER OF TEXT HERE THAT COMES IN AT NEW TIME
</div>
<!-- LAYER -->
<div class="tp-caption rs-caption-3 sft"
data-x="center"
data-hoffset="0"
data-y="360"
data-speed="800"
data-start="3500"
data-easing="Power4.easeOut"
data-endspeed="300"
data-endeasing="Power1.easeIn"
data-captionhidden="off"
style="z-index: 6">
THIRD LAYER HERE AND SO ON...
</div>
</li>
显然根据您的需要调整每个图层的设置,但这就是添加多个图层的方法,这些图层会在不同的时间出现......希望对您有所帮助
【讨论】: