Membuat Efek Slide Up - Slide Down dengan jQuery

15/03/2018    Risman Hakim    965     Website

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 :)

jQuery, Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More