11-Apr-2023
.
Admin
Hi Dev,
In this article, I will show you full page presentation with jquery and css animation. We will learn jquery presentation plugins example. I’ll show you how to create scroll-based animations jquery presentation plugins. jquery presentation plugin is a popular jQuery plugin for building full-screen pages.
Here i will give you full example for full page presentation with jquery and css animations So let's see the bellow exmple.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Full Page Presentation With jQuery And CSS Animations Example</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>Welcome To My Presentation</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit expedita
ducimus vitae dignissimos saepe odio, eum atque nesciunt aperiam
voluptates, necessitatibus officiis et qui, nobis id praesentium neque.
Autem, maiores! Quisquam, ipsam impedit rerum est velit cum corrupti
possimus odio?
</p>
<a href="#page_2" class="btn">Next Page <i class="fas fa-arrow-circle-down"> </i></a>
</section>
<!-- End Page 1-->
<!-- Start Page 2-->
<section id="page_2" class="page">
<h1>Welcome To Page-2</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit expedita
ducimus vitae dignissimos saepe odio, eum atque nesciunt aperiam
voluptates, necessitatibus officiis et qui, nobis id praesentium neque.
Autem, maiores! Quisquam, ipsam impedit rerum est velit cum corrupti
possimus odio?
</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>
<!-- End Page 2-->
<!-- Start Page 3-->
<section id="page_3" class="page">
<h1>Welcome To Page-3</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit expedita
ducimus vitae dignissimos saepe odio, eum atque nesciunt aperiam
voluptates, necessitatibus officiis et qui, nobis id praesentium neque.
Autem, maiores! Quisquam, ipsam impedit rerum est velit cum corrupti
possimus odio?
</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>
<!-- End Page 3-->
<!-- Start Page 4-->
<section id="page_4" class="page">
<h1>Welcome To Page-4</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit expedita
ducimus vitae dignissimos saepe odio, eum atque nesciunt aperiam
voluptates, necessitatibus officiis et qui, nobis id praesentium neque.
Autem, maiores! Quisquam, ipsam impedit rerum est velit cum corrupti
possimus odio?
</p>
<a href="#page_3" class="btn btn_dark">Prev Page <i class="fas fa-arrow-circle-up"> </i></a>
</section>
<!-- End Page 4-->
<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>
It will help you...
#Jquery
