repos/website
1
Fork 0
Code Issues 1 Pull Requests 31 Activity

Add a shadow to the hero when it scrolls

Browse Source 
Sadly done in JS, but it's much much easier this way
This commit is contained in:
Jake Howard 2022-07-20 22:39:35 +01:00
parent fafc0e8828
commit 38cc5182ca
Signed by: jake
GPG Key ID: 57AFB45680EDD477
4 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -15,6 +15,7 @@
"firacode": "^6.2.0", "firacode": "^6.2.0",
"lite-youtube-embed": "^0.2.0", "lite-youtube-embed": "^0.2.0",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
"shareon": "^2.0.0" "shareon": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
@ -1104,6 +1105,11 @@
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
}, },
"node_modules/lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
},
"node_modules/memorystream": { "node_modules/memorystream": {
"version": "0.3.1", "version": "0.3.1",
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@ -2323,6 +2329,11 @@
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
}, },
"lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
},
"memorystream": { "memorystream": {
"version": "0.3.1", "version": "0.3.1",
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",

1
package.json
View File

@ -27,6 +27,7 @@
"firacode": "^6.2.0", "firacode": "^6.2.0",
"lite-youtube-embed": "^0.2.0", "lite-youtube-embed": "^0.2.0",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
"shareon": "^2.0.0" "shareon": "^2.0.0"
} }
} }

11
static/src/js/base.js
View File

@ -1,5 +1,6 @@
const Elevator = require("elevator.js"); const Elevator = require("elevator.js");
const debounce = require("lodash.debounce"); const debounce = require("lodash.debounce");
const throttle = require("lodash.throttle");
const HERO = document.querySelector("section.hero"); const HERO = document.querySelector("section.hero");
const ROOT = document.querySelector(":root"); const ROOT = document.querySelector(":root");
@ -12,6 +13,14 @@ function setHeroHeight() {
ROOT.style.setProperty("--hero-height", `${getHeroHeight()}px`); ROOT.style.setProperty("--hero-height", `${getHeroHeight()}px`);
} }
function handleHeroStuck() {
if (HERO.getBoundingClientRect().top === 0) {
HERO.classList.add("stuck");
} else {
HERO.classList.remove("stuck");
}
}
window.addEventListener("load", () => { window.addEventListener("load", () => {
const navbarBurger = document.getElementById("navbar-burger"); const navbarBurger = document.getElementById("navbar-burger");
const navbar = document.getElementById("navbar"); const navbar = document.getElementById("navbar");
@ -49,3 +58,5 @@ window.addEventListener("load", () => {
window.addEventListener("resize", debounce(setHeroHeight, 2000)); window.addEventListener("resize", debounce(setHeroHeight, 2000));
window.addEventListener("load", setHeroHeight); window.addEventListener("load", setHeroHeight);
window.addEventListener("scroll", throttle(handleHeroStuck, 100));

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

@ -14,6 +14,10 @@ section.hero {
background-color: $white; background-color: $white;
display: block; display: block;
&.stuck {
box-shadow: $shadow;
}
.hero-body { .hero-body {
padding: 0; padding: 0;
} }