Doing it raw, you'd just set the filter in css
filter: brightness(0.75) blur(var(--current-blur, 0px));
And the javascript would be
document.addEventListener("DOMContentLoaded", function() {
const heroSection = document.querySelector(".hero");
const heroHeight = heroSection.offsetHeight;
// We want the blur to go from 0px up to 35px
// once we've scrolled the full hero height.
const maxBlur = 35;
// Select the .bg container (our pseudo-element is inside it)
const bg = document.querySelector(".bg");
window.addEventListener("scroll", () => {
const scrollY = window.scrollY;
// 0..1 progress from top of page to bottom of hero
let progress = scrollY / heroHeight;
if (progress < 0) progress = 0;
if (progress > 1) progress = 1;
const currentBlur = maxBlur * progress;
// We'll store that in a CSS variable for the pseudo-element
bg.style.setProperty("--current-blur", `${currentBlur}px`);
});
});
Now, as you scroll, the background image would progressively get blurred. How to do this in webstudio?
When attempting to publish the website on a custom domain, the status should show an error with the following divs containing instructions. While I can try and access the using developer tools, it would be cool if the status message had the option to be folded down to a single row (or be expanded) as your documentation suggests it usually just says "Error" or something.
This is literally my entire screen height.
