I’ve been playing around with some frontdnd development recently using Svelte and SvelteKit. I’m struggling with an effect that I know I’ve seen before but I don’t know what it’s called so it’s hard to Google it (some specific type of parallax?). I have a hero image covering the first section of the page, as the user starts scrolling I want the image to fade out to reveal the content without the content scrolling away until the image is finally gone then the body can resume normal scroll behaviour.
I think I’m about half way there I’ve attached a gif if that helps to clarify the effect.
I’ve accomplished this by getting the window height, the scroll position then doing some math on those numbers to dynamically set the opacity and transform of the image. The div below stays in place because I have the style set to position: fixed; until the image is gone. This is where things break, once I set position: relative the div jumps back to the top of the page, how can I accomplish this?
For additional context I’m including my code:
// this is the function that runs when scroll is detected
const scroller = () => {
scroller_value = scrolly/height
opacity = (ONE) - scroller_value
if(scrolly > height - 30){
background_scroll = "position: relative"
} else {
background_scroll = "position: fixed"
}
}
</script>
# this is how svelte binds events and values to the above variables in the function
<svelte:window bind:scrollY={scrolly} bind:innerHeight={height} on:scroll={scroller}/>
<div class="intro-container">
<div class="intro">
<div class="image" style="opacity: {opacity}; transform: scale({1 * 1 + scroller_value})" />
</div>
</div>
<div class="bg-page" />
<div class="scroller" style={background_scroll}>
content
</div>
<style>
.intro-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
color: var(--main-heading);
}
.intro {
position: relative;
height: 200vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bg-page {
position: absolute;
height: 200vh;
width: 100vw;
left: 0;
top: 0;
bottom: 0;
}
</style>
PS. I’m sure if I was using React there would be a billion plugins to do this (again it would help if I knew what it was called) but in Svelte land things are a little more sparse for now.
