Text Slider merupakan salah satu elemen desain yang bisa ditambahkan pada halaman website. Dengan gayanya yang interaktif, Text Slider dapat membantu menarik perhatian pengunjung untuk lebih fokus terhadap paragraf konten atau baris tulisan tertentu.
Untuk membuat Text Slider tidak cukup dengan kode HTML statis saja. Diperlukan beberapa modifikasi CSS dan kalau perlu dengan menggunakan Javascript libraries seperti JQuery untuk menciptakan fungsi Text Slider yang lebih powerful.
Bagi Agan yang memerlukan Text Slider sederhana dan otomatis pada halaman situs pribadi, melalui artikel ini SyamSalabim akan berbagi kode CSS Animation dan JQuery yang dapat digunakan untuk membuat Text Slider khusus arah vertikal (dari bawah ke atas).
TIPS TRIK
Text Slider Dengan CSS Animation
Yang pertama dengan menggunakan CSS Animation. Cara ini murni hanya menggunakan kode CSS untuk membuat fungsi Text Slider. Langsung saja berikut kode-kodenya dan bisa pula Agan unduh jika tak mau ribet mengatur strutktur HTML-nya.
| CSS |
|---|
/* [SLIDER] */
#slider, #slider .slide{
width: 500px;
height: 250px;
}
#slider {
overflow: hidden;
margin: 0 auto;
font-size: 1.2em;
background: #ffd7d1;
}
#slider .container {
position: relative;
bottom: 0;
right: 0;
animation: slide-animation 20s infinite;
}
#slider .slide {
position: relative;
box-sizing: border-box;
padding: 10px 20px;
}
/* [ANIMATION] */
@keyframes slide-animation {
0% {
opacity: 0;
bottom: 0;
}
11% {
opacity: 1;
bottom: 0;
}
22% { bottom: 100%; }
33% { bottom: 100%; }
44% { bottom: 200%; }
55% { bottom: 200%; }
66% { bottom: 300%; }
77% { bottom: 300%; }
88% {
opacity: 1;
bottom: 400%;
}
100% {
opacity: 0;
bottom: 400%;
}
}
|
| HTML |
|---|
<div id="slider">
<div class="container">
<div class="slide">
<h3>Slide 1</h3>
<p>
The episode orbits? The panic overwhelms a fuse. The major lurks below the shower! The tactic founds the nut. Why can't a pardon toss the sexist exercise?
</p>
</div>
<div class="slide">
<h3>Slide 2</h3>
<p>
The lasting astronomer balances the counter reminder. The trap hires the paradox. The employer watches the laser next to the exhausted historian. The water oils a breakfast.
</p>
</div>
<div class="slide">
<h3>Slide 3</h3>
<p>
Her birthday calculates past a juice! The envy succeeds across an evident jelly. An afternoon shifts opposite a bust. The tired clash divides a widest sneak. The satire springs onto a misfortune after the inclined car.
</p>
</div>
<div class="slide">
<h3>Slide 4</h3>
<p>
A distributed actor pilots the null pencil. The wild wolfs a damp cage inside the breach. The blank toes the line underneath the arc. The sheep migrates within the transcript.
</p>
</div>
<div class="slide">
<h3>Slide 5</h3>
<p>
The suspected book hums opposite the unacceptable urge. The warning goodbye searches the substitute. This damp loses before the president. The slave elects the north inside an exciting salt.
</p>
</div>
</div>
</div>
|
| TEXT SLIDER |
|---|
|
|
Text Slider Dengan JQuery
Cara kedua menggunakan script JQuery. Cara ini lebih gampang untuk diaplikasikan pada halaman blog utamanya jika teks yang ingin dijadikan slide hanya beberapa baris saja. Syams sendiri memakai trik ini untuk versi mobile blog karena lebih mudah diatur desain dan penempatannya.
| JQuery |
|---|
<script src="http://richhollis.github.com/vticker/js/jquery-1.7.2.min.js"></script> <script src="http://richhollis.github.com/vticker/downloads/jquery.vticker.js?v=1.21"></script> |
| Javascript |
|---|
$(function() {
$('#text-slider').vTicker();
});
|
| HTML |
|---|
<div id="text-slider">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
</ul>
</div>
|
| TEXT SLIDER |
|---|
|
Demikian kode CSS dan JQuery untuk membuat Text Slider otamatis dengan arah vertikal yang boleh Agan terapkan pada situs web masing-masing. Syams pribadi lebih merekomendasikan trik menggunakan JQuery karena lebih simpel dan tak perlu kesusahan memahami struktur kodenya. Tapi kembali kepada kebutuhan Agan sebagai pemilik website.
Tips dari Syams jika mengalami kendala ketika mengatur struktur kode di atas ke dalam mode HTML, misalnya slider pada teksnya tidak berfungsi atau diam di tempat, maka sebaiknya Agan unduh saja kodenya terlebih dulu melalui link yang sudah disediakan karena di dalamnya sudah lengkap file HTML dan CSS yang dibutuhkan dan dijamin bekerja.
0 Comments