lab/website-components
1
Fork 0
Code Activity

Try out a blurhash behind the hero image

Browse source
This commit is contained in:
Jake Howard 2024-09-21 16:37:53 +01:00
parent 8416f5a452
commit e7f0431239
Signed by: jake
GPG key ID: 57AFB45680EDD477
5 changed files with 38 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
package-lock.json generated
View file

@ -8,6 +8,7 @@
"name": "website-components", "name": "website-components",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"blurhash": "^2.0.5",
"glob": "^10.4.1", "glob": "^10.4.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"sass": "^1.77.2", "sass": "^1.77.2",
@ -682,6 +683,12 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/blurhash": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.5.tgz",
"integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==",
"license": "MIT"
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",

1
package.json
View file

@ -11,6 +11,7 @@
"description": "", "description": "",
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"blurhash": "^2.0.5",
"glob": "^10.4.1", "glob": "^10.4.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"sass": "^1.77.2", "sass": "^1.77.2",

4
src/narrow-hero/index.html
View file

@ -3,7 +3,9 @@
<link rel="stylesheet" href="./index.scss" /> <link rel="stylesheet" href="./index.scss" />
</head> </head>
<body> <body>
<img src="https://placehold.co/1000x500" class="banner" /> <div id="banner-wrapper">
<img src="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="banner" />
</div>
<div class="details-wrapper" id="details"> <div class="details-wrapper" id="details">
<div class="details"> <div class="details">
<small>Breadcrumb</small> <small>Breadcrumb</small>

19
src/narrow-hero/index.js
View file

@ -1,5 +1,8 @@
import { decode } from "blurhash";
const SCROLL_INDICATOR = document.getElementById("scroll-indicator"); const SCROLL_INDICATOR = document.getElementById("scroll-indicator");
const CONTENT = document.querySelector(".content-wrapper"); const CONTENT = document.querySelector(".content-wrapper");
const HERO_WRAPPER = document.getElementById("banner-wrapper");
function getScrollPercentage() { function getScrollPercentage() {
const contentRect = CONTENT.getBoundingClientRect(); const contentRect = CONTENT.getBoundingClientRect();
@ -33,6 +36,20 @@ function clamp(n, min, max) {
return Math.min(Math.max(n, min), max); return Math.min(Math.max(n, min), max);
} }
function setHeroBackground() {
const pixels = decode("LIIyVQwg2nXmQ6j@x[Sv2pS1}kxH", 32, 32);
const canvas = document.createElement("canvas");
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(32, 32);
imageData.data.set(pixels);
ctx.putImageData(imageData, 0, 0);
HERO_WRAPPER.style.backgroundImage = `url(${canvas.toDataURL()})`;
}
window.addEventListener("load", function () { window.addEventListener("load", function () {
if (SCROLL_INDICATOR) { if (SCROLL_INDICATOR) {
window.addEventListener("resize", handleScrollIndicator); window.addEventListener("resize", handleScrollIndicator);
@ -41,4 +58,6 @@ window.addEventListener("load", function () {
// Initialize the indicator, matching timeout to transition time // Initialize the indicator, matching timeout to transition time
setTimeout(handleScrollIndicator, 200); setTimeout(handleScrollIndicator, 200);
} }
setHeroBackground();
}); });

8
src/narrow-hero/index.scss
View file

@ -13,6 +13,8 @@ $max-content-width: calc(100% - 2rem);
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
height: 45vh;
object-fit: cover;
} }
.details-wrapper { .details-wrapper {
@ -72,3 +74,9 @@ $max-content-width: calc(100% - 2rem);
transition: opacity 0.2s linear; transition: opacity 0.2s linear;
} }
} }
#banner-wrapper {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}