Skip to main content

Scroll Progress Bar JsPlugin | Rustcode

Scroll-Progress-Bar -JsPlugin-html-and-css-rustcode

In website development, we have lots of small elements and animations that make the website more fabulous and great such as tooltip animation, smooth scrolling, back-to-top animation and more. Similarly, we have scroll progress bar animation which helps to make websites more attractive.

In this video, we will discuss how to develop a scroll progress bar animation but this time we will use a JavaScript Plugin named "scrollpup". You can check our other video which will show you how to develop a scroll progress bar with pure javascript.


1. HTML STRUCTURE 

<!DOCTYPE html>
<html>
<head>
<title>Scroll Progress Bar JsPlugin | Rustcode</title>
<style>
</style>
</head>

<body>
 
  main content.

</body>
</html>


2. SCROLLPUP PLUGIN

The basic HTML structure is ready for us, now let's include JavaScript plugin in this HTML document. You can download this plugin from here. We are also including an image in the html body so that the window can be easily scrolled. You can download the image from here.

<!DOCTYPE html>
<html>
<head>
<title>Scroll Progress Bar JsPlugin | Rustcode</title>
<script src="scrollpup.js"></script>
<style type="text/css">
</style>
</head>

<body>

  main content.

</body>
</html>


3. CSS

<style type="text/css">
body{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
img{
  height: 1200px;
}
</style>


4. SCRIPT 

<script type="text/javascript">
  scrollpup({
    background: 'coral',
    height: '8px'
  });
</script>


5. YouTube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


6. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.


RELATED POST:

Comments

Post a Comment