Blast text

blast-text.markdown

Blast text

A Pen by Saijo George on CodePen.

License.

index.html

<p>Good decisions come from experience. Experience comes from Bad decisions. The trick is to get the experience before the bad decisions get you.	</p>
<span class="small">by : Someone Wise <br/>
<span class="vsmall">CodeMyUI</span><span>

script.js

var p = document.querySelector('p');
p.innerHTML = p.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span>$2</span>');

style.scss

@import url('https://fonts.googleapis.com/css?family=Gelasio&display=swap');


body {
	background: black;
	color: white;
	font: 3vw/1.2 'Gelasio', serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 55vw;
	margin: 0 auto;
	min-height: 100vh;
	perspective: 200px;
	animation: perspective 9s cubic-bezier(.35,.06,.92,.03) infinite;
	
	@keyframes perspective {
		0% { perspective: 100px; transform: scale(.5); }
		100% { perspective: 10000px; transform: scale(1);	}
	}
}

p {
	transform-style: preserve-3d;
}

span {
	display: inline-block;
	
	@for $i from 1 through 150 {
		&:nth-child(#{$i}) {
			transform: translateZ((random() * -1000px));
		}
	}
}

.small{
	font-size: 30px;
}

.vsmall{
	font-size: 20px;
}