Membuat Text Animasi Boostrap

Membuat Text Animasi Boostrap. Apabila teman ingin mempercantik tampilan website dengan animasi text dengan hanya bermodal CSS. Maka satu style ini bisa dicoba diterapkan dalam blog ataupun website yang dimiliki.

Animasi ini hanya bermodalkan css jadi tanpa javascript tambahan. Kalian bisa mengganti atau mencustom warna, ukuran font, jenis font, dll.

Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web. Kerangka kerja ini berisi templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript.

Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.

Membuat Text Animasi Boostrap

Caranya cukup mudah silakan copy paste kode HTML dan CSS berikut ke website.

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

	<div class="textanimasi">
	<svg viewBox="0 0 800 150">
    <symbol id="s-text">
		<text text-anchor="middle" x="50%" y="80%">Visit Klaten </text>
	</symbol>

	<g class = "g-ants">
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
	</g>
</svg>
</div>

CSS

svg {
    display: block;
    font: 6.5em 'Montserrat';
    width: 800px;
    height: 150px;
    margin: 0 auto;
    max-width: 100%;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
    stroke: #4D163D;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke: #840037;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke: #BD0034;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke: #BD0034;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke: #FDB731;
	animation-delay: -5s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}

Dan hasilnya bisa dilihat dibawah ini

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.

Membuat Text Animasi Bootstrap, Cara Mudah Membuat Efek Animasi , Cara Menambahkan Efek Animasi Text , Cara Membuat Animasi Efek.