Question

*{
  margin: 0;
  padding: 0;
}

body{
  font-family: helvetica , sans-serif;
  background-color: #1E1E20;
}

.parallax-container {
  /* The image used */
  background-image: url("https://i.stack.imgur.com/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;
}

重叠的 PROJECTS div存在问题。即使结束显示后部背景，它仍在向下滚动。

This is the picture in the background. (grey.jpg)

This is the picture on the top of the background. (shadow.png)

我希望滚动效果像这样结束。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax

Answer 1

*{
  margin: 0;
  padding: 0;
}

body{
  font-family: helvetica , sans-serif;
  background-color: #1E1E20;
}

.parallax-container {
  /* The image used */
  background-image: url("https://i.stack.imgur.com/BlFbi.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;
  left: 0;
  right: 0;
  margin: 0 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 h1{
  position: relative;
  z-index: 5;
  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:relative;
  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;
}
.projects_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    background-color:#1E1E20;
    position: relative; 
    top: 0px; 
    z-index: 3;
    margin-top: -80px;
}

<header>
  <div class="parallax-container">
    <nav class="header_nav_container">
      <h3>Karan Agnani</h3>
      <br>
      <h4>Portfolio</h4>
      <a href="www.thekaranagnani.com/about">About</a>
      <h1>Hi,I'm <span>Karan</span> </h1>
    </nav>
    <div class="parallax"><img src="https://i.stack.imgur.com/8pYB9.png" width="500px" 
      height="800px"></div>
  </div>
</header>
<section class="projects">
  <h1>PROJECTS<span class="underscore">_</span></h1>
  <div class="projects_container">
    <div class="flip3D">
      <div class="back">Box 1 - Back</div>
      <div class="front"></div>
    </div>
    <div class="flip3D">
      <div class="back">Box 2 - Back</div>
      <div class="front">Box 2 - Front</div>
    </div>
    <div class="flip3D">
      <div class="back">Box 3 - Back</div>
      <div class="front">Box 3 - Front</div>
    </div>
    <div class="flip3D">
      <div class="back">Box 4 - Back</div>
      <div class="front">Box 4 - Front</div>
    </div>
  </div>
</section>

https://jsfiddle.net/Sampath_Madhuranga/xpvt214o/616850/

尝试一下。效果很好。让我知道是否有任何问题。谢谢。

叠加项目div甚至在到达页面末尾时仍在滚动

1 个答案: