Breaking News
Loading...
Jumat, 22 April 2016

Info Post
Tips Membuat Slider Fade dengan CSS - Cara ini merupakan cara termudah dalam membuat efek slider fade dengan menggunakan CSS. Fade merupakan efek animasi opacity, dimana gambar yang ingin kita tampilkan secara bergantian memiliki waktu tampil yang telah ditentukan. Pada prakteknya pembuatan slider fade ini tidak memerlukan jQuery. Kita hanya menggunakan animasi CSS dengan penerapan fungsi keyframe. Penasaran cara pembuatannya, ikuti tutorial berikut ini.

Membuat Slider Fade Pure CSS


Seperti biasa, silakan teman-teman buat file index.html. Buatlah struktur html dengan div slider yang didalamnya terdapat gambar yang ingin ditampilkan.

tips membuat fade slider css

Simpan file index.html. Kemuadian buatlah style CSS sebagai berikut :

css tips membuat fade slider css

Mudah sekali ya, dengan menerapkan code css diatas, kita telah membuat slider fade dengan mudah. Teman-teman bisa menggunakan code diatas untuk keperluan proyek website. Download scriptnya di bawah ini.


Download Source Code


Sumber : Panduan Belajar Website

5 komentar:

  1. Teman-teman bisa pelajari kodenya, jika ada pertanyaan silakan tanyakan disini.

    BalasHapus
  2. mas rully udah ane coba dan berhasil.. o ya untuk #slider img yang paling atas dihapus juga tidak masalah ya mas..

    BalasHapus
    Balasan
    1. yang dihapus opacity nya saja. untuk position absolute dan left:0 boleh dipindahkan ke #slider img paling bawah..

      Hapus
  3. yang dihapus opacity nya saja. untuk position absolute dan left:0 boleh dipindahkan ke #slider img paling bawah..

    BalasHapus

Komentar jangan mengandung SPAM dan SARA