<body class="flex">
	<main class="wrapper">
		<figure class="text">
			<section class="line">
				<p>KEWIN</p>
				<p>MARCHAND</p>
				<p>DESIGNER WEB</p> 
			</section>
			<section class="line">
				<p>MARCHAND</p>
				<p>DESIGNER WEB</p>
				<p>KEWIN</p>
			</section>
			<section class="line">
				<p>DESIGNER WEB</p>
				<p>KEWIN</p>
				<p>MARCHAND</p>
			</section>
		</figure>
	</main>
</body>
@import url(https://fonts.googleapis.com/css?family=Bangers);
* {
	margin:0; 
	padding:0;
	box-sizing:border-box;
	list-style: none;
}
body {
	background: hsl(178, 35%, 35%);
	box-shadow: inset 0 0 8vh hsl(178, 15%, 15%);
	color: #fff;
	font-family: 'Bangers';
	font-size: 16px;
	min-height: 100vh;
	font-size: 86px;
	text-align: left;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	line-height: .9;
	white-space: nowrap;
}
.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
}

.text .line {
	overflow-y: hidden;
	white-space: nowrap;
	height: 70px;
	
}
.text .line:first-child + .line {
	margin-left: 75px;
}
.text .line:first-child + .line + .line {
	margin-left: 150px;
}
p {
	height: 70px;
	font-size: 1em;
}
.text .line:nth-child(odd) {
  transform: skew(60deg, -30deg) scaleY(0.66667);
}
.text .line:nth-child(even) {
  transform: skew(0deg, -30deg) scaleY(1.33333);
}
.wrapper .text .line p {
	animation: moveWords 6s infinite ease;
}
@keyframes moveWords {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
$(function(){
	
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js