The scroll depth lets you measure how far visitors are scrolling to see the contents. The read time shows the average reading time of the visitor, that is approximately how long the visitor takes to read the content of the entire page.
In this program (Scroll Percentage and Read Time using HTML, CSS & JavaScript), on the webpage, there are four cards with a heading and a paragraph. The visitor can see a red-colored horizontal scroll bar at the top of the page, which implies the scroll depth measure. When the visitor scrolls the page, the horizontal bar increases and decreases respectively based on the scroll depth that the visitor is moving in the webpage to see the content. At the top of the page, there is a read time that shows the average reading time of the visitor. That is, it shows the approximate time of how long the visitor takes to read the entire page.
The measure of scrolling depth and the read time is calculated by using JavaScript code.
The source code of this Scroll Percentage and Read Time is given below, if you want the source code of this program, you can copy it. You can use this Scroll Percentage and Read Time code on your projects.
Scroll Percentage and Read Time using HTML, CSS & JavaScript [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body{
margin:0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family:helvetica;
font-size:14px;
line-height:1.3em;
padding: 0 20px;
background: #11998e;
background: -webkit-linear-gradient(to right, #38ef7d, #11998e);
background: linear-gradient(to right, #38ef7d, #11998e);
}
h2{
margin-top:0;
margin-bottom:10px;
font-size:18px;
color: #72E283;
}
p{
margin:0;
}
.readTime{
margin-bottom:20px;
font-style:italic;
font-size:15px;
border-bottom: 2px solid #72E283;
display: inline-block;
}
.paragraph{
padding:30px;
background: #12192c;
color: #fff;
border-radius:20px;
}
.paragraph+.paragraph{
margin-top:30px;
}
.documentHeight{
max-width:800px;
margin:0 auto;
padding:30px;
border-radius:10px;
}
#percent{
background-color: #f00;
height:5px;
position: fixed;
top: 0;
left:0;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
}
.credit a{
text-decoration: none;
color: #12192c;
font-weight: 800;
}
.credit {
margin-top: 10px;
text-align: center;
}
const percent = document.querySelector("#percent");
window.addEventListener("scroll", () => {
let scrollTop = window.scrollY;
let dHeight = document.body.offsetHeight;
let wHeight = window.innerHeight;
let scrollPer = scrollTop / (dHeight - wHeight);
let scrollPerRound = Math.round(scrollPer * 100);
percent.style.width = scrollPerRound+'%';
});
const text = document.querySelector("#article").innerText;
const wpm = 225;
const words = text.trim().split(/\s+/).length;
const time = Math.ceil(words / wpm);
document.querySelector("#time").innerText = time + ' minute';
Thank you for reading our blog. If you face any problem in creating this Scroll Percentage and Read Time using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team