Membuat Efek Slide Up - Slide Down dengan jQuery

Membuat Efek Slide Up - Slide Down dengan jQuery - Saat ini hampir semua desain website terlihat lebih hidup dan juga lebih interaktif dengan adanya penambahan animasi - animasi dan efek, tentu itu semua dibangun dengan teknologi yang saat ini cukup berkembang. Kita bisa dengan mudah membuat animasi - animasi ataupun efek dengan banyak program, misalnya saja CSS, Javascript, dan jQuery adalah bahasa yang bisa kita gunakan untuk menunjang kebutuhan dalam membuat animasi ataupun efek. Nah, berikut ini akan saya bagikan tutorial mengenai efek yakni bagaimana Membuat Efek Slide Up - Slide Down dengan jQuery. Tentu kita semua tahu efek ini sering kita jumpai dihalaman - halaman website. Berikut akan saya praktekan bagaimana cara membuatnya.

Langkah 1: Membuat Efek Slide Up - Slide Down dengan jQuery

Kita mulai dengan langkah pertama, yakni kita akan menyusun struktur HTML sederhana untuk membuatkan objek yang akan dijadikan efek slide, dalam kasus ini objeknya adalah konten paragraf. Seilahkan kalian bisa ketikan struktur HTML berikut ini.

<body>
    <div id="chose">
        <button type="button" class="slideUp">Slide Up</button>
        <button type="button" class="slideDown">Slide Down</button>
        <button type="button" class="slideToggle">Slide Toggle</button>
    </div>
    <div id="wrapper">
        <div class="content">
            <p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun.</p>
        </div>
    </div>
</body>

Langkah 2: Membuat Efek Slide Up - Slide Down dengan jQuery

Setelah membuatkan struktur seperti diatas, tentu untuk membuat objeknya terlihat menarik lagi desainnya, kita akan set desain nya dengan CSS berikut ini.

#wrapper, #chose{
    width: 500px;
    margin: auto;
    padding: 10px;
    background: #FBF6CE;
    border: 1px solid #A1C436;
}
button {
    border-radius: 0;
    border: 1px solid #46A5E5;
    padding: 5px;
    background: #46A5E5;
    color: #000000;
    font-weight: bold;
}

Langkah 3: Membuat Efek Slide Up - Slide Down dengan jQuery

Setelah semua kita set desainnya, selanjutnya tentu kita akan buatkan fungsi dari masing - masing tombol yang telah kita set diatas yakni slide up, slide down, dan slide toggle dengan sintak jQuery berikut ini.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".slideUp").click(function(){
            $("#wrapper").slideUp();
        });
        $(".slideDown").click(function(){
            $("#wrapper").slideDown();
        });
        $(".slideToggle").click(function(){
            $("#wrapper").slideToggle();
        });
    });
</script>

Setelah sintak telah diketikan semua, simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya, maka akan tampil desain seperti berikut.

Membuat Efek Slide Up - Slide Down dengan jQuery

Jika kalian klik tombol maka akan terjadi efek slide sesuai dengan fungsi dari masing - masing tombol.
Dengan adanya penamgahan efek seperti diatas akan membuat tampilan web semakin interaktif, baik cukup sekian tutorial Membuat Efek Slide Up - Slide Down dengan jQuery, semoga bermanfaat dan selamat mencoba :)

15 Maret 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat