x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-25 02:06:40 +03:00 committed by GitHub
parent 40eb5567c1
commit 22b4df30ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
100_projects/32-increase-numbers-on-scrolling/index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="one">Section One</section>
<section class="two">Section Two</section>
<section class="three">
<div class="nums">
<div class="num" data-goal="100">0</div>
<div class="num" data-goal="500">0</div>
<div class="num" data-goal="300">0</div>
</div>
</section>
<section class="four">Section Four</section>
<script src="main.js"></script>
</body>
</html>

21
100_projects/32-increase-numbers-on-scrolling/main.js Normal file
View File

@ -0,0 +1,21 @@
let nums = document.querySelectorAll(".nums .num");
let section = document.querySelector(".three");
let started = false; // Function Started ? No
window.onscroll = function () {
if (window.scrollY >= section.offsetTop) {
if (!started) {
nums.forEach((num) => startCount(num));
}
started = true;
}
};
function startCount(el) {
let goal = el.dataset.goal;
let count = setInterval(() => {
el.textContent++;
if (el.textContent == goal) {
clearInterval(count);
}
}, 2000 / goal);
}

35
100_projects/32-increase-numbers-on-scrolling/style.css Normal file
View File

@ -0,0 +1,35 @@
* {
box-sizing: border-box;
}
body {
font-family: "Trebuchet MS", "Lucida Sans Unicode", sans-serif;
margin: 0;
}
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section:first-child {
background-color: #aaa;
}
section:nth-child(2) {
background-color: #bbb;
}
section:nth-child(3) {
background-color: #ccc;
}
section:last-of-type {
background-color: #eee;
}
.nums {
width: 400px;
display: flex;
}
.nums .num {
flex: 1;
text-align: center;
font-size: 40px;
padding: 20px;
}