Hallo, balik lagi ditutorial pemrograman Dumet School kali ini saya akan menjelaskan tentang Bagaimana Cara Membuat Text Slide Up Dan Slide Down Menggunakan jQuery. teman temanm pernah dengar kata istilah dari slide up dan slide down pada jQuer, jika teman teman yang suka dengan aktifitas dari desain pastinya sudah tidak asing lagi yah dengan kata kata ini, karena kata kata ini sering kali di gunakan untuk membuat sebuah website agar lebih menarik bukan untuk jQuery saja, css pun masih mengenal dengan istilah ini
slide up dan slide down ialah sebuah effect pada website yang gerakannya bisa ke atas bahkan bisa kebawah, sebelumnya mungkin teman teman biasa menggunakan plugin untuk membuatnya, atau biasa mengoding sendiri tanpa bantuan plugin, mungkin ada tapi hanya beberapa orang saja yang melakukannya, saya sendiri pun sering menggunakan plugin karena sangat mudah dan dokumentasinya sudah sangat lengkap, baiklah daripada kita berpanjang cerita, alangkah baiknya kita akan membuatnya langsung, pastikan teman teman sudah didepan computer ataupun laptop dan sebagainya, dan terkoneksi dengan internet yah, hal yang pertama ialah kita akan mengopy link untuk menarik data dari si jQuerynya di link berikut :
https://code.jquery.com/jquery-3.3.1.min.js sisipkan didalam sintaq script pada halaman yang nanti kita buat, oke buatkan file baru beri nama tersebut index.html dan coba teman teman tambahkan scriptnya sebagai berikut :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html> <head> <meta charset="UTF-8"> <title> Latihan Slide Up </title> </head> <body> <h1 id="judul">Lorem ipsum dolor sit amet, consectetur </h1> <div> <p class="up">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae beatae, enim maiores repellendus qui a rem accusantium veritatis corporis optio accusamus nemo, numquam amet perspiciatis tenetur excepturi pariatur, quos praesentium?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet aut officiis voluptatum odio suscipit adipisci ut id nulla quos perferendis, voluptatem asperiores eligendi nisi ipsum, inventore veritatis quidem officia quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero cum, non, alias atque ad quidem veniam sint provident magni, asperiores, rem laudantium culpa perspiciatis nemo. Molestias quasi, error cupiditate pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus ullam dignissimos voluptates tempora, quo aut natus mollitia quam veniam excepturi illo tenetur enim earum nobis eos quisquam voluptate adipisci illum.</p> <p class="up">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae beatae, enim maiores repellendus qui a rem accusantium veritatis corporis optio accusamus nemo, numquam amet perspiciatis tenetur excepturi pariatur, quos praesentium?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet aut officiis voluptatum odio suscipit adipisci ut id nulla quos perferendis, voluptatem asperiores eligendi nisi ipsum, inventore veritatis quidem officia quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero cum, non, alias atque ad quidem veniam sint provident magni, asperiores, rem laudantium culpa perspiciatis nemo. Molestias quasi, error cupiditate pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus ullam dignissimos voluptates tempora, quo aut natus mollitia quam veniam excepturi illo tenetur enim earum nobis eos quisquam voluptate adipisci illum.</p> <p class="up">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae beatae, enim maiores repellendus qui a rem accusantium veritatis corporis optio accusamus nemo, numquam amet perspiciatis tenetur excepturi pariatur, quos praesentium?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet aut officiis voluptatum odio suscipit adipisci ut id nulla quos perferendis, voluptatem asperiores eligendi nisi ipsum, inventore veritatis quidem officia quibusdam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero cum, non, alias atque ad quidem veniam sint provident magni, asperiores, rem laudantium culpa perspiciatis nemo. Molestias quasi, error cupiditate pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus ullam dignissimos voluptates tempora, quo aut natus mollitia quam veniam excepturi illo tenetur enim earum nobis eos quisquam voluptate adipisci illum.</p> </div> <hr> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").click(function(){ $("p.up").slideUp(); }); $("#judul").click(function(){ $("p.up").slideDown(); }); }); </script> </body> </html> |
Jika sudah disave dan jalankan dibrowsernya, maka hasilnya ketika kita mengklik sebuah konten yang ada didalamnya maka slide up akan berfungsi atau effect menarik pada konten ke atas, lalu ketika sudah tertup kita klik judul pada halaman makan akan menampilkan kembali halaman kontentnya, cukup mudah bukan?, sekian tutorial tentang Bagaimana Cara Membuat Text Slide Up Dan Slide Down Menggunakan jQuery. sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA