*{
margin: 0;
padding: 0;
}
body{
font-family: helvetica , sans-serif;
background-color: #1E1E20;
}
.parallax-container {
/* The image used */
background-image: url("https://i.sstatic.net/BlF.jpg");
animation-name: pixels;
animation-duration: 800ms;
animation-timing-function: steps(8,end);
animation-delay: initial;
animation-iteration-count: infinite;
animation-play-state: initial;
position: relative;
/* Set a specific height */
min-height: 800px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@keyframes pixels {
100% {
background-position: 100% 0;
}
}
.parallax img{
z-index: 2;
position: fixed;
top: 0px;
padding: auto;
}
.header_nav_container a, h3, h4{
font-family: Helvetica,sans-serif;
font-size: 40px;
font-weight: bold;
color:white;
}
.header_nav_container h1{
font-family: Helvetica, sans-serif;
font-size: 80px;
text-align: center;
color: white;
top: 250px;
z-index: 4;
position: relative;
}
.header_nav_container a{
top: 50px;
left: 50px;
text-decoration: none;
position: relative;
}
.header_nav_container h3{
top: 50px;
right: 50px;
position: absolute;
}
.header_nav_container h4{
top:90px;
right: 50px;
position: absolute;
font-size: 30px;
color: yellow;
}
.header_nav_container span{
text-shadow: 8px 8px black;
}
.projects_container h1{
font-size: 50px;
text-align: center;
color: white;
font-family: helvetica, sans-serif;
margin-top: 20px;
}
.front p{
padding: 10px;
text-align: center;
font-family: helvetica, sans-serif;
font-size: 30px;
color:white;
}
.underscore{
color: yellow;
}
.flip3D{ width:240px; height:200px; margin:150px 60px; float:left; }
.flip3D > .front{
position:absolute;
transform: perspective( 600px ) rotateY( 0deg );
background:#1E1E20; width:300px; height:300px; border-radius: 10px;
backface-visibility: hidden;
transition: transform .5s linear 0s;
}
.flip3D > .back{
position:absolute;
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:300px; height:300px; border-radius: 10px;
backface-visibility: hidden;
transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
transform: perspective( 600px ) rotateY( 0deg );
}
.pic1{
border-radius: 7px;
}
.front{
border: 2px solid yellow;
}
.projects{
background-attachment: scroll;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}There seems to be an issue with the overlapping PROJECTS div. It continues scrolling down even after reaching its end, causing the background to become visible.
Here is the background image (grey.jpg)
And here is the image placed on top of the background (shadow.png)
I would like the scrolling effect to stop once it reaches the desired point.