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 селектор