repos/website
1
Fork 0
Code Issues 1 Pull requests 27 Activity

Improve scroll indicator implementation

Browse source 
Now I know why it works!
This commit is contained in:
Jake Howard 2023-10-16 21:30:36 +01:00
parent fc3704a97a
commit e0561a45e5
Signed by: jake
GPG key ID: 57AFB45680EDD477
5 changed files with 40 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
package-lock.json generated
View file

@ -17,6 +17,7 @@
"glightbox": "3.2.0",
"htmx.org": "1.9.2",
"lite-youtube-embed": "0.3.0",
"lodash.clamp": "4.0.3",
"lodash.debounce": "4.0.8",
"lodash.throttle": "4.1.1",
"npm-run-all": "4.1.5",
@ -2248,6 +2249,11 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"node_modules/lodash.clamp": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz",
"integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg=="
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@ -5398,6 +5404,11 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"lodash.clamp": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz",
"integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg=="
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",

1
package.json
View file

@ -36,6 +36,7 @@
"glightbox": "3.2.0",
"htmx.org": "1.9.2",
"lite-youtube-embed": "0.3.0",
"lodash.clamp": "4.0.3",
"lodash.debounce": "4.0.8",
"lodash.throttle": "4.1.1",
"npm-run-all": "4.1.5",

1
static/src/js/base.js
View file

@ -89,6 +89,7 @@ window.addEventListener("load", () => {
window.addEventListener("DOMContentLoaded", () => {
setHeroHeight();
handleHeroStuck();
if (window.location.hash <= 1) {
return;

34
static/src/js/content.js
View file

@ -1,17 +1,33 @@
require("lite-youtube-embed");
const GLightbox = require("glightbox");
const clamp = require("lodash.clamp");
const SCROLL_INDICATOR = document.getElementById("scroll-indicator");
const CONTENT = document.querySelector(".container.content");
window.addEventListener("load", () => {
GLightbox({});
});
function handleScrollIndicator() {
// How far down the page does the content start?
const initialScroll = CONTENT.getBoundingClientRect().top + window.scrollY;
window.addEventListener("scroll", () => {
const winScroll =
document.body.scrollTop || document.documentElement.scrollTop;
const height = CONTENT.getBoundingClientRect().height;
const scrolled = Math.min((winScroll / height) * 100, 100);
SCROLL_INDICATOR.style.width = `${scrolled}%`;
const contentHeight = CONTENT.getBoundingClientRect().height;
// How far down the page do we consider the content "read"?
const scrollTarget = window.innerHeight * 0.75;
const scrolled =
(window.scrollY - initialScroll + scrollTarget) / contentHeight;
const scrolledPercentage = clamp(scrolled * 100, 0, 100);
SCROLL_INDICATOR.style.width = `${scrolledPercentage.toFixed(2)}%`;
}
window.addEventListener("load", () => {
window.addEventListener("resize", handleScrollIndicator);
window.addEventListener("scroll", handleScrollIndicator);
GLightbox({});
// Initialize the indicator
handleScrollIndicator();
});

4
static/src/scss/_hero.scss
View file

@ -130,10 +130,10 @@ section.hero {
height: 5px;
#scroll-indicator {
transition-duration: 0.5s;
transition-duration: 0.3s;
transition-property: background-color;
height: 100%;
width: 50%;
width: 0%;
}
}