Pada kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat presentasi yang lebih menarik menggunakan HTML& Jquery
<!DOCTYPE html>
<html lang="en">
<head>
<title>Presentation HTML & jQuery</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/full-page-
presentation/style.css" />
<script src="https://kit.fontawesome.com/e12504a0e7.js" crossorigin="anonymous">
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
</head>
<body>
<!-- Start Page 1-->
<section id="page_1" class="page">
<h1>Halaman Pertama</h1>
<p>
Lorem ipsum, atau ringkasnya lipsum, adalah teks standar yang ditempatkan
untuk mendemostrasikan elemen grafis atau presentasi visual seperti font,
tipografi, dan tata letak. Maksud penggunaan lipsum adalah agar pengamat
tidak terlalu berkonsentrasi kepada arti harfiah per kalimat, melainkan
lebih kepada elemen desain dari teks yang dipresentasi.
</p>
<a href="#page_2" class="btn">Next Page <i class="fas fa-arrow-circle-down">
</i></a>
</section>
<section id="page_2" class="page">
<h1>Halaman Kedua</h1>
<p>
Lorem ipsum, atau ringkasnya lipsum, adalah teks standar yang ditempatkan
untuk mendemostrasikan elemen grafis atau presentasi visual seperti font,
tipografi, dan tata letak. Maksud penggunaan lipsum adalah agar pengamat
tidak terlalu berkonsentrasi kepada arti harfiah per kalimat, melainkan
lebih kepada elemen desain dari teks yang dipresentasi.
</p>
<div>
<a href="#page_1" class="btn btn_dark">Prev Page <i class="fas fa-arrow-
circle-up"></i>
</a>
<a href="#page_3" class="btn">Next Page <i class="fas fa-arrow-circle-down">
</i></a>
</div>
</section>
<section id="page_3" class="page">
<h1>Halaman Ketiga</h1>
<p>
Lorem ipsum, atau ringkasnya lipsum, adalah teks standar yang ditempatkan
untuk mendemostrasikan elemen grafis atau presentasi visual seperti font,
tipografi, dan tata letak. Maksud penggunaan lipsum adalah agar pengamat
tidak terlalu berkonsentrasi kepada arti harfiah per kalimat, melainkan
lebih kepada elemen desain dari teks yang dipresentasi.
</p>
<div>
<a href="#page_2" class="btn btn_dark">Prev Page <i class="fas fa-arrow-
circle-up"> </i>
</a>
<a href="#page_4" class="btn">Next Page <i class="fas fa-arrow-circle-down">
</i></a>
</div>
</section>
<section id="page_4" class="page">
<h1>Halaman Keempat</h1>
<p>
Lorem ipsum, atau ringkasnya lipsum, adalah teks standar yang ditempatkan
untuk mendemostrasikan elemen grafis atau presentasi visual seperti font,
tipografi, dan tata letak. Maksud penggunaan lipsum adalah agar pengamat
tidak terlalu berkonsentrasi kepada arti harfiah per kalimat, melainkan
lebih kepada elemen desain dari teks yang dipresentasi.
</p>
<a href="#page_3" class="btn btn_dark">Prev Page <i class="fas fa-arrow-circle-
up"> </i></a>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
// Smooth Scrolling
$(".btn").on("click", function (event) {
if (this.hash !== "") {
event.preventDefault();
const hash = this.hash;
$("html, body").animate({
scrollTop: $(hash).offset().top
},
800
);
}
});
</script>
</body>
</html>
Selamat Mencoba ^_^
Jika berhasil maka tampilan nya akan seperti dibawah ini
Haturnuhun dan terimakasih ^_^
Comments