【问题标题】:revolution slider reveal text革命滑块显示文本
【发布时间】:2017-04-05 16:41:19
【问题描述】:

我正在使用旋转滑块在屏幕上从左到右为图像设置动画(这部分正在工作)。我想要一层文本,当图像越过它时出现。有没有办法通过滑块革命来做到这一点?

【问题讨论】:

    标签: slider revolution-slider


    【解决方案1】:
                 <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>
    

    显然根据您的需要调整每个图层的设置,但这就是添加多个图层的方法,这些图层会在不同的时间出现......希望对您有所帮助

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-10-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-05-30
      相关资源
      最近更新 更多