Two text slides

Two text slides

by rajnishw3

HTML

<div class="center">
  <p class="swipe"> 
    <span class="sentence sentence--show">Do you not think so far ahead? Because I've been thinking about forever</span>
    <span class="sentence">Aman is a great man for his work, but his salary is not coming in time</span>
  </p>
</div>

CSS

.swipe {
  position: relative;
  text-align: center;
  height: 3em;
}
.swipe .sentence {
  position: absolute;
  display: block;
  overflow: hidden;
  width: 100%;
  z-index: 1;
  color: transparent;
}
.swipe .sentence .line-wrap {
  position: relative;
  display: block;
  width: 100%;
  color: transparent;
  -webkit-transition: color 1ms;
  transition: color 1ms;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}
.swipe .sentence .line-wrap:nth-child(2) {
  -webkit-transition-delay: 666.6666666667ms;
          transition-delay: 666.6666666667ms;
}
.swipe .sentence .line-wrap:nth-child(3) {
  -webkit-transition-delay: 833.3333333333ms;
          transition-delay: 833.3333333333ms;
}
.swipe .sentence .line-wrap:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #EBE8E1;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
}
.swipe .sentence--show {
  z-index: 2;
}
.swipe .sentence--show .line-wrap {
  color: #333;
}
.swipe .sentence--show .line-wrap:after {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 1000ms ease-in-out;
  transition: -webkit-transform 1000ms ease-in-out;
  transition: transform 1000ms ease-in-out;
  transition: transform 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out;
}
.swipe .sentence--show .line-wrap:nth-child(2):after {
  -webkit-transition-delay: 166.6666666667ms;
          transition-delay: 166.6666666667ms;
}
.swipe .sentence--show .line-wrap:nth-child(3):after {
  -webkit-transition-delay: 333.3333333333ms;
          transition-delay: 333.3333333333ms;
}

body {
  background: #F0CF61;
  color: #333;
  font-family: 'Avenir', sans-serif;
  font-weight: 100;
  font-size: 5vw;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vw;
  -webkit-transform:...

JavaScript

linePage();
cycleText();

function linePage(){

	var splitMe = $('.sentence');

	splitMe.each(function(index){

		var text = $(this).html();
		var output = '';

		//split all letters into spans
		for (var i = 0, len = text.length; i < len; i++) {
		  
		  	output += '<span data-index="'+i+'">' + text[i] + '</span>';
			
		}

		//put it in the html
		$(this).html(output);

		//check the offset of each letter to figure out where the line breaks
		var prev = 0;
		var parts = [];
		$(this).find('span').each(function(i){
			if ($(this).offset().top > prev){
				parts.push(i);
				prev = $(this).offset().top;
			}
		})

		parts.push(text.length);

		//create final 
		var finalOutput = ''

		parts.forEach(function(endPoint, i){
			if (endPoint > 0){
				finalOutput += '<span data-line="'+i+'" class="line-wrap"><span class="line-inner">' + text.substring(parts[i-1],parts[i]) + '</span></span>';
			}
		})

		$(this).html(finalOutput);
		$(this).addClass("lined");

	})

}

function cycleText(){

	setInterval(function(){

		$('.sentence').toggleClass('sentence--show');

	}, 4000)

  setTimeout(function(){
    $('.sentence').toggleClass('sentence--show'); 
  },1000)
  
}