Sliding text

index.jade

.center
		p.swipe 
			span.sentence.sentence--show Do you not think so far ahead? Because I've been thinking about forever
			span.sentence I remember how I forget how you feel. How you were the first for me

script.js

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)
  
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

sliding-text.markdown

Sliding text

A Pen by Nathan Taylor on CodePen.

License.

style.scss

$main: #EBE8E1;
$second: #333;
$back: #F0CF61;

$time: 1000ms;

.swipe{
	position: relative;
	text-align: center;
	height: 3em;

	.sentence{
		position: absolute;
		display: block;
		overflow: hidden;
		width: 100%;
		z-index: 1;
    color: transparent;
		.line-wrap{
			position: relative;
			display: block;
			width: 100%;
			color: transparent;
			transition: color 1ms;
			transition-delay: 500ms;
			&:nth-child(2){
				transition-delay: $time*4/6;
			}
			&:nth-child(3){
				transition-delay: $time*5/6;
			}
			&:after{
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background: $main;
				transform: translateX(-100%);
				transform-origin: 0% 50%;
			}
		}
		&--show{
			z-index: 2;
			.line-wrap{
				color: $second;
			}
			.line-wrap:after{
				transform: translateX(100%);
				transition: transform $time ease-in-out;
			}
			.line-wrap:nth-child(2):after{
				transition-delay: $time*1/6;
			}
			.line-wrap:nth-child(3):after{
				transition-delay: $time*2/6;
			}
		}
	}
}




body{
	background: $back;
	color: $second;
	font-family: 'Avenir', sans-serif;
	font-weight: 100;
	font-size: 5vw;
}

.center{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60vw;
	transform: translate3d(-50%,-50%,0);
}