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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>

<script src="https://www.greensock.com/js/src/utils/SplitText.min.js"></script>


<div class="box">
	<p class="split">
    
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, quasi magnam eos quisquam accusantium facilis voluptatum expedita assumenda cumque tempore natus eaque? Voluptatem, iste maxime suscipit reprehenderit beatae molestiae nobis.    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, quasi magnam eos quisquam accusantium facilis voluptatum expedita assumenda cumque tempore natus eaque? Voluptatem, iste maxime suscipit reprehenderit beatae molestiae nobis.
    
    
</p>
	
</div>
html, body {
	height: 100%;
}

body {
	overflow: hidden;
}

.box {
	max-width: 70vw;
	padding: 30px;
	margin: 0 auto;
	position: relative;
	top: 50%;
	font-size: 30px;
	line-height: 1.5;
	transform: translateY(-50%);
	perspective: 400px;
}

.source {
	color: skyblue;
	margin: 0 auto;
}
var text = $(".split");

var split = new SplitText(text);

function random(min, max){
	return (Math.random() * (max - min)) + min;
}

$(split.chars).each(function(i){
	TweenMax.from($(this), 2.5, {
		opacity: 0,
		x: random(-500, 500),
		y: random(-500, 500),
		z: random(-500, 500),
		scale: .1,
		delay: i * .02,
		yoyo: true,
		repeat: -1,
		repeatDelay: 10
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.