Изменение цвета текста во время прокрутки - PullRequest
Новая
       7

Изменение цвета текста во время прокрутки

0 голосов
/ 04 декабря 2018

У меня есть заголовок.Изначально все слова в нем черные, но при прокрутке цвет должен измениться, как я могу это сделать?Есть ли готовые решения?Существует такой код из шаблона, но он отображается плохо, потому что он находится на начальной загрузке. 

    .header_area {
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 99;
      top: 0;
      padding: 0 4%;
    }

    .menu_area .navbar-brand {
      font-size: 72px;
      font-weight: 700;
      color: #fff;
      margin: 0;
      line-height: 1;
      padding: 0;
    }

    .menu_area .navbar-brand:hover,
    .menu_area .navbar-brand:focus {
      color: #fff;
    }

    .menu_area {
      position: relative;
      z-index: 2;
    }

    .menu_area #nav .nav-link {
      color: #fff;
      display: block;
      font-size: 16px;
      font-weight: 500;
      border-radius: 30px;
      -webkit-transition-duration: 500ms;
      -o-transition-duration: 500ms;
      transition-duration: 500ms;
      padding: 35px 15px;
    }

    .menu_area nav ul li>a:hover {
      color: #fb397d;
    }

    .header_area.sticky {
      background: rgb(0, 122, 223);
      background: -webkit-linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%);
      background: -o-linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%);
      background: -ms-linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%);
      background: linear-gradient(77deg, rgb(0, 122, 223) 0%, rgb(0, 236, 188) 100%);
      height: 70px;
      position: fixed;
      top: 0;
      z-index: 99;
    }

    .header_area.sticky .menu_area .navbar-brand {
      font-size: 50px;
    }

    .header_area.sticky .menu_area #nav .nav-link {
      padding: 23px 15px;
    }

    .header_area.sticky .navbar {
      padding: 0;
    }

<!-- language: lang-html -->

    <header class="header_area animated">
      <div class="container-fluid">
        <div class="row align-items-center">
          <div class="col-12 col-lg-10">
            <div class="menu_area">
              <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">
                  <img src="img/image.png" style="margin-top: -15px;width: 48px; height: 38px;">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ca-navbar" aria-controls="ca-navbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="ca-navbar">
                  <ul class="navbar-nav ml-auto" id="nav" style="margin-right: -220px;">
                    <li class="nav-item active"><a class="nav-link" href="#home" style="color: #000;">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#about" style="color: #000;">About</a></li>
                    <li class="nav-item">
                      <a class="nav-link" href="#features" style="color: #000;"></a>Text</li>
                    <li class="nav-item"><a class="nav-link" href="#application" style="color: #000;">Application</a></li>
                    <li class="nav-item"><a class="nav-link" href="#support" style="color: #000;">Support</a></li>
                    <li class="nav-item"><a class="nav-link" href="#contact" style="color: #000;">Contact</a></li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </header>

, так, например, вы можете посмотреть на этом веб-сайте colorlib.com/preview/#massive, гдеТекст в заголовке белый, но когда я прокручиваю, мне нужно увидеть другое изображение и черный текст.Как я могу это сделать?

...