Membuat Efek Slide Teks dengan CSS3

Jika pada tutorial sebelum nya saya telah membahas mengenai Cara Membuat Efek Teks Keren dengan CSS3. Kali saya akan berikan referensi dan tutorial lagi mengenai efek pada sebuah teks yakni tutorial bagaimana Membuat Efek Slide Teks dengan CSS3. Penasaran seperti apa efek teks nya ? Simak langkah-langkah nya berikut ini.

Seperti biasa, untuk membuat sebuah efek maka pertama yang harus kita lakukan adalah membuat struktur ataupun membuat element teks dengan sintak HTML5 berikut ini.

<body>
	<div class="wrapper">
		<a class="teks teks-2" href="#" data-letters="DUMET SCHOOL.">DUMET SCHOOL.</a>
	</div>
</body>

Untuk teks yang akan ditampilkan kalian bisa menyesuaikan sendiri, yang perlu diperhatikan adalah attribut data-letters pada sintak HTML5 harus sama dengan teks yang akan ditampilkan, pada contoh di atas teks yang ditampilkan adalah DUMETSCHOOL. Setelah membuat teks selanjut nya adalah mendesain dan membuat efek tampilan teks diatas dengan sintak CSS3. berikut sintak CSS3 untuk membuat efek pada sebuah teks.

@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');
.wrapper {
	width: 1200px;
	margin:auto;
}
.wrapper a {
	margin-top: 50px;
	font-family: 'Baloo Bhaina', cursive;
	letter-spacing: 15px;
}
.teks {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 8em;
	line-height: 1;	
	display: inline-block;
}
.teks-2 {
	text-transform: uppercase;
	font-weight: 900;
	overflow: hidden;
	line-height: 1.75;
	color: #E0E9EE;
}

.teks-2:hover {
	color: #E0E9EE;
}

.teks-2::after {
	content: '';
	position: absolute;gi
	height: 16px;
	width: 100%;
	top: 50%;
	margin-top: -8px;
	right: 0;
	background: #F9F9F9;
	transform: translate3d(-100%,0,0);
	transition: transform 0.4s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.teks-2:hover::after {
	transform: translate3d(100%,0,0);
}

.teks-2::before {
	content: attr(data-letters);
	position: absolute;
	z-index: 2;
	overflow: hidden;
	color: #1592CC;
	white-space: nowrap;
	width: 0%;
	transition: width 0.4s 0.3s;
}

.teks-2:hover::before {
	width: 100%;
}

Setelah semua sintak HTML5 dan CSS3 sudah dibuat, simpan file terlebih dahulu kemudian silahkan buka pada browser masing-masing dan lihat hasilnya. Maka akan terlihat sebuah efek slide, ketika diarahkan kursor pada area teks maka akan menghasilkan efek seperti slide. Selesai

Baik, cukup sekian tutorial dan referensi mengenai bagaimana Membuat Efek Slide Teks dengan CSS3. semoga bermanfaat dan menginspirasi dalam mendesain tampilan website.

Untuk lebih jelas tutorial diatas kalian juga beisa melihat hasil nya pada demo dibawah ini.

DEMO