Di era sekarang ini tulisan berjalan pada suatu halaman HTML sudah tidak asing lagi bahkan lumrah atau wajib digunakan untuk tampilan sebuah website atau sistem informasi. Kali ini saya akan membagikan tutorial mengenai cara membuat tulisan berjalan dengan menggunakan javascrpt.
Sebelumnya tag tulisan berjalan ini dikenal dan populer adalah marquee. Yaitu teks diapit dengan tag marquee. Kali ini saya akan berbagi beberapa source code yang dapat anda gunakan baik dengan HTML maupun javascript. Semoga Bermanfaat untuk anda
Berikut adalah beberapa source code nya :
1. Membuat Tulisan Berjalan Biasa dengan Marquee
Tipe Tipe Marquee
Kanan Ke Kiri :
Kiri Ke Kanan :
Bawah Ke Atas :
Atas Ke bawah :
Kanan Ke Kiri : <marquee>SistemIT.com</marquee>
Kiri Ke Kanan : <marquee direction="right">SistemIT.com</marquee>
Bawah Ke Atas : <marquee direction="up">SistemIT.com</marquee>
Atas Ke bawah : <marquee direction="down">SistemIT.com</marquee>
2. Membuat Tulisan Berjalan Dengan CSS
Berikut adalah contoh source code untuk membuat tulisan berjalan seperti biasa. Ini menggunakan html dan css untuk menampilkan nya :
<html>
<head>
<title>Membuat Tulisan Berjalan Dengan CSS</title>
</head>
<style>body {
margin: 0;
font-family: "UniversLTPro-Ex";
font-size: 30px;
}
a {
text-decoration: none;
color: #000;
}
.marquee {
height: 35px;
width: 100%;
overflow: hidden;
position: relative;
background-color: #e9e5fb;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 8px 0 4px 0;
}
.marquee div {
display: inline-block;
width: 300%;
height: 40px;
position: absolute;
overflow: hidden;
animation: marquee 12s linear infinite;
}
.marquee span {
float: left;
width: 25%;
}
@keyframes marquee {
0% { left: 0; }
100% { left: -150%; }
}
</style>
</head>
<body>
<div class="marquee">
<div>
<span><a href="#">twitter</a></span>
<span><a href="#">instagram</a></span>
<span><a href="#">pinterest</a></span>
<span><a href="#">spotify</a></span>
<span><a href="#">magazine</a></span>
</div>
</div>
</body>
</html>
Demo :
3. Membuat Tulisan Berjalan (Animasi) Javascript
<html>
<head>
<title>Membuat Tulisan Berjalan Animasi Javascript</title>
<style>
.ml1 .line {
opacity: 0;
position: absolute;
left: 0;
height: 3px;
width: 100%;
background-color: #fff;
transform-origin: 0 0;
}
.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
</head>
<body>
<h1 class="ml1">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">Selamat Datang Di SistemIT.com</span>
<span class="line line2"></span>
</span>
</h1>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml1 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({
loop: true
})
.add({
targets: '.ml1 .letter',
scale: [0.3, 1],
opacity: [0, 1],
translateZ: 0,
easing: "easeOutExpo",
duration: 600,
delay: (el, i) => 70 * (i + 1)
}).add({
targets: '.ml1 .line',
scaleX: [0, 1],
opacity: [0.5, 1],
easing: "easeOutExpo",
duration: 700,
offset: '-=875',
delay: (el, i, l) => 80 * (l - i)
}).add({
targets: '.ml1',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
</body>
</html>
Demo :
