My desire is to change the position as I scroll down. To help visualize, here's what I have in mind:
https://i.sstatic.net/YYVmZ.gif
To view the code associated with this effect, click here
html :
<h1> MY TEXT. orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </h1>
<div class="one"> </div>
<div class="two"> </div>
css :
body {
text-align:center;
}
h1 {
left: 0;
line-height:2;
right:0;
width:600px;
margin-left: auto;
margin-right: auto;
position:fixed;
}
.one, .two {
width:600px;
position: absolute;
left: 0;
right:0;
margin-left: auto;
margin-right: auto;
}
.one {
top:100px;
height:300px;
background:grey;
}
.two {
height:800px;
background:pink;
margin-top:30px;
top:400px;
}