Lavonen Lavonen - 1 month ago 9
CSS Question

(Textillate.js) Two lines with different fonts etc

I'm trying to create two lines of texts (one heading and one underline) that changes every 5 seconds. However, I have not managed to change the CSS of the two rows and not found any clues on how to do this online.

Anyone who has any ideas?

jsFiddle: http://jsfiddle.net/9dKum/151/

HTML:

<div class="outer-box">
<div class="tlt">

<ul class="texts">
<li>HEADING #1</li>
<li>HEADING #2</li>
</ul>

<ul class="texts">
<li>underline #1</li>
<li>underline #2</li>
</ul>

</div>
</div>


CSS:

.outer-box {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}

.tlt {
text-align: center;
z-index: 999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.hd {
color: #000000;
}

.un {
color: #ff0000
}

Answer Source

Please try this. Your css is not applied because js generated new classes.

$(document).ready(function(){
  $('.texts').textillate({ 	
    minDisplayTime: 5000,
    initialDelay: 100,	
    loop: true,
    autoStart: true,

    in: {
      effect: 'fadeInUp',			     
      delay: 50,    
      sync: true
    },     
    out: {
      effect: 'fadeOutDown',		
      delay: 50, 
      sync: true
    }	
  });    
});
.outer-box {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.tlt {
  text-align: center;
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.texts:first-child span {color: #ff0000;}
.texts:last-child span {color: #000000;}
<link href="http://jschr.github.io/textillate/assets/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<script src="http://jschr.github.io/textillate/jquery.textillate.js"></script>

<div class="outer-box">
  <div class="tlt">
    <ul class="texts">
        <li class="hd">HEADING #1</li>   
        <li class="un">HEADING #2</li>
    </ul>	
    <ul class="texts">
        <li class="hd">underline #1</li>   
        <li class="un">underline #2</li>
    </ul>
  </div>
</div>