Looking for a script to modify css as a user scrolls down. WordPress
- REFUNDED
Hi,
I am trying to mimic this site (https://corenyc.com/) scroll over effect.
There must be some sort of script that modifies the top: value from each div as the person scrolls.
<div class="outer">
<div class="inner" id="one"></div>
<div class="inner" id="two"></div>
<div class="inner" id="three"></div>
</div>
.outer{
width 500px;
height:900px;
background:black;
display:block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.inner {
width: 400px;
margin:auto;
height:300px;
border:solid 10px white;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#one{z-index:3;background:red;top:-800px}
#two{z-index:2;background:blue;}
#three{z-index:1;background:green;}
https://codepen.io/lammworks/pen/BrxRrP
In this example the page would have 900px height and as the user scroll the "top" value of each id would go to a negative value. That way as the user scrolls the div, moves upwards until it disappear out of sight.
The key thing here is that the script must be conditional. Once if one is out of the frame then the scroll should affect idtwo and so on.