javascript - JQuery滚动动画导致对象加载不可见不可见无不透明度

Question

我使用以下代码使对象在滚动时淡入淡出。它工作得很好，只是当页面加载时，对象不可见。您必须滚动一点才能使它们可见。然后，滚动会按预期减少不透明度。知道为什么吗？我使用了 bootstrap、jquery，您可以运行下面的代码片段来测试该问题。

谢谢， 会

var target = $('.fade');
    var targetHeight = 400;

    $(document).scroll(function(e){
        var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
        if(scrollPercent >= 0){
            target.css('opacity', scrollPercent);
        }
    });

/*!
Theme Name: Frozen Land
Author: Will Caulfield
Author URI: http://caulfield.co/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: frozenland.co
*/
body {
  font-family: 'Lato', sans-serif;
}

h1 {
  color: white;
  text-transform: uppercase;
  font-weight: 800;
  font-size: calc(70px + 0.3vw);
  margin: 10px 0px 25px 0px;
}

main {
  background: -webkit-gradient(linear, left top, left bottom, from(#f9c4cc), to(#f27aaa));
  background: linear-gradient(#f9c4cc, #f27aaa);
}

section {
  height: 100vh;
}

@-webkit-keyframes floatIce {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-15px);
            transform: translatey(-15px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

@keyframes floatIce {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-15px);
            transform: translatey(-15px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

@-webkit-keyframes floatText {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-10px);
            transform: translatey(-10px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

@keyframes floatText {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-10px);
            transform: translatey(-10px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

@-webkit-keyframes floatLand {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-5px);
            transform: translatey(-5px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

@keyframes floatLand {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-5px);
            transform: translatey(-5px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

.hero {
  position: relative;
  top: -50px;
}

.hero-ice {
  width: 200px;
  -webkit-transform: translatey(0px);
          transform: translatey(0px);
  -webkit-animation: floatIce 6s ease-in-out infinite;
          animation: floatIce 6s ease-in-out infinite;
}

.hero-text {
  -webkit-transform: translatey(0px);
          transform: translatey(0px);
  -webkit-animation: floatText 6s ease-in-out infinite;
          animation: floatText 6s ease-in-out infinite;
}

.hero-land {
  width: 250px;
  -webkit-transform: translatey(0px);
          transform: translatey(0px);
  -webkit-animation: floatText 6s ease-in-out infinite;
          animation: floatText 6s ease-in-out infinite;
}

@-webkit-keyframes caret-float {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(7px);
            transform: translatey(7px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

@keyframes caret-float {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(7px);
            transform: translatey(7px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

.hero-scroll {
  color: white;
  font-size: 40px;
  position: absolute;
  bottom: 20px;
  -webkit-transform: translatey(0px);
          transform: translatey(0px);
  -webkit-animation: caret-float 1.5s ease-in-out infinite;
          animation: caret-float 1.5s ease-in-out infinite;
}
/*# sourceMappingURL=style.css.map */

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Custom CSS -->

    <link rel="stylesheet" href="css/style.css">

    <!-- Googl Fonts -->

    <link href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap" rel="stylesheet">

    <!-- Font Awesome -->

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">

    <!-- Scripts -->

    <title>Hello, world!</title>
  </head>
  <body>
    <main>
        <section class="d-flex flex-column justify-content-center align-items-center">
            <div class="hero w-100 d-flex flex-column justify-content-center align-items-center fade">
                <img class="hero-ice" src="img/ice-cream.png" />
                <h1 class="hero-text">Frozen Land</h1>
                <img class="hero-land" src="img/land.png" />
            </div>
            <i class="hero-scroll far fa-caret-square-down fade"></i>
        </section>
        <section>
            <div>
                z
            </div>
        </section>
        <section>
            <div>
                z
            </div>
        </section>
    </main>
    <footer>

    </footer>
   

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <!-- Custom Scripts -->

    <script src="/js/custom.js"></script>

    <script>
        

    </script>
  </body>
</html>

Answer 1

类fade应用opacity: 0;，替换为HTML和jQuery选择器中的其他类名