CSS и HTML-эффекты при прокрутке ⇐ CSS

[Anonymous]

So I am trying to make a scroll effect where the user scroll's down, and for three panels (will see in the code), the background will stay, and it will make an effect. I then want to make it so that after all three panels, it moves to another section, where the user will scroll down and it will move sideways. However, when I reach the end of the panelCause, the last bg-img stays and won't go away, meaning it blocks the next section. Is there anyway to stop this?

If you have any questions ask them...

Code: HTML:

[*] Prevention

• Home
• Statistics - Numbers
• Statistics - Location
• Prevention
• My Mission

Prevention Now that you know how much and where gun violence happens, its time to take action. We need to figure out how to prevent it from happening. But before we are able to find out how to stop it, we need to find the main causes of it. There are a plethora of different causes, but below, I have divided them into three main categories. From there, we will dive in to the prevention step, and find ways to prevent the violence from happening.

replace img

replace img

replace img

CSS:

@import url('https://fonts.googleapis.com/css2?famil ... splay=swap'); * { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; height: 100%; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; background-color: black; overflow-x: hidden; height: auto; overflow-y: visible; } /* Home */ .home { background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(../images/first_bg.jpg); background-repeat: no-repeat; background-size: cover; height: 100vh; overflow-y: hidden; width: 100vw; text-align: center; align-items: center; padding: 50px; padding-top: 20em; } .home h1 { font-size: 3em; } .home p { font-size: 1.8em; } /* Causes panels */ .panelCause { height: 100vh; max-height: 300vh; width: 100vw; position: sticky; top: 0; padding: 20px; align-items: center; } .firstCause { background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(../images/age_bg.jpg); background-size: cover; background-position: center; display: flex; flex-direction: row-reverse; } .secondCause { background-image: linear-gradient( rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5) ), url(../images/race_bg.jpg); background-size: cover; background-position: center; display: flex; flex-direction: row-reverse; } .thirdCause { background-image: linear-gradient( rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5) ), url(../images/lff.jpg); background-size: cover; background-position: center; display: flex; flex-direction: row-reverse; } /* Prevention Starts */ .container { width: 400%; height: 100vh; display: flex; flex-wrap: nowrap; } .panel { width: 100vw; } .preventionContainer { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background-image: url(../images/cbp.jpg); } [*] Prevention

• Home
• Statistics - Numbers
• Statistics - Location
• Prevention
• My Mission

Prevention Now that you know how much and where gun violence happens, its time to take action. We need to figure out how to prevent it from happening. But before we are able to find out how to stop it, we need to find the main causes of it. There are a plethora of different causes, but below, I have divided them into three main categories. From there, we will dive in to the prevention step, and find ways to prevent the violence from happening.

replace img

replace img

replace img


Источник: https://stackoverflow.com/questions/780 ... -on-scroll