Cara Membuat Efek Slide Pada Teks Menggunakan Css, Html, Dan Javascript
Penerbit: ( Seo Techman )

Cara Membuat Efek Slide Pada Teks Menggunakan Css, Html, Dan Javascript


Pada kesempatan kali ini saya ingin membagikan sedikit efek slide pada teks yang lumayan bagus menurut saya sendiri. Karena ini didasarkan pada pola animasi yang terlihat dalam bidikan Dribbble shot Abstract. Idenya adalah untuk menunjukkan jejak teks ketika beralih di antara slide slide. Animasi ini sendiri dibuat menggunakan TweenMax.

Perhatian: Bahwa ini sangat eksperimental dan ini juga menggunakan properti CSS modern yang mungkin tidak didukung di browser lama.
Disini telah terbuat lima demo dengan tipografi dan efek berbeda untuk gambar, saat beralih dari satu slide ke slide lainnya. Tata letak jejak teks dibuat dengan menggunakan wadah flexbox yang akan membuat ketinggian masing-masing wadah teks menyusut sehingga semuanya masuk ke dalam viewport (tinggi). Beberapa teks akan terlihat dengan ketinggian penuh. Menggunakan mode campuran dan rotasi yang menciptakan tampilan menjadi menarik.
Cara Membuat Efek Animasi Pada Teks Menggunakan Css, Html, Dan Javascript
Bagaimana cara membuatnya?

Untuk pembuatanya mungkin terbilang mudah, menurut saya. Nah sebelum itu, kita disini memerlukan beberapa peralatannya, Seperti:

1.Css
2.Html
3.Javascript

Ok, mungkin kita langsung saja menuju tutorialnya. Pertama kita buat Css nya, seperti contoh dibawah ini:

Css Demo

Jika sudah, silahkan kalian save/simpan dan beri nama base.css atau terserah kalian. Setelah itu kita coba buat Html nya, lihat pada contoh ini:

Html Demo

Simpan dan berinama index.html.
Langkah berikutnya yaitu, siapkan sebuah javascriptnya seperti contoh dibawah ini:

Javascript Demo

Copy paste javascript diatas, lalu simpan. Jika semuanya sudah selesai, kalian hanya perlu menggabungkannya menjadi satu. Dan coba lihat hasilnya, apakah berjalan baik atau tidak.

Nah, untuk demo bisa kalian lihat di link berikut ini:

Live Demo

Apabila ingin mencobanya silahkan langsung download saja full scriptnya, menuju link yang sudah disediakan.

Download Now

Sekian tutorial untuk kali ini, Cara Membuat Efek Slide Pada Teks Menggunakan Css, Html, Dan Javascript. Semoga bermanfaat dan selamat mencobanya. Adapun jika kalian ingin mengubahnya atau memodifikasi, itu lebih baik.

Load comments

0 Response to "Cara Membuat Efek Slide Pada Teks Menggunakan Css, Html, Dan Javascript"

Post a Comment