Блог

Главная - Вопросы по программированию - анимация прокрутки javascript не работает

анимация прокрутки javascript не работает

#javascript #html

#javascript #HTML

Вопрос:

Я хочу добиться анимации прокрутки, но я не знаю, что не так
content.classList.add('active') это не работает для меня, но когда я использую alert('dd')
все работает нормально. Дайте мне знать, что я делаю не так.

  window.addEventListener('scroll', ()=>{
            let content = document.getElementById('content');
            let contentPosition = content.getBoundingClientRect().top;
            let screenPosition = window.innerHeight /2.5;
            if (contentPosition < screenPosition) {
                //content.classList.add('active')
                alert('dd')
            }else {
                content.classList.remove('active')
            }
        } ) 
         * {
            margin: 0;
        }
        header {
            height: 120vh;
            background: linear-gradient(45deg, #6A65FF, #555986);
        }
        .body p{
            line-height: 1.4;
        }
        #content {
            opacity: 0;
            transform: scale(.2);
            transition: all .5s ease-in-out;
        }
        .active {
            opacity: 1;
            transform: scale(1);
        }
        footer {
            height: 100vh;
            background: linear-gradient(90deg, rgba(50,101,255,1) 47%, rgba(0,212,255,0.9997821027825192) 100%);
        } 
     <header></header>
    <section class="body">
        <p id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae eveniet ipsam animi similique rem harum unde non minus nihil earum mollitia impedit eum, eos fuga nobis quod quasi quas explicabo cumque fugit delectus. Explicabo maiores velit quae neque consequatur deleniti vitae ducimus! Praesentium tenetur dignissimos, vitae ratione labore atque officiis doloribus numquam amet odio cupiditate temporibus debitis laboriosam asperiores sequi eveniet accusamus dolor architecto voluptate commodi repellat aperiam. Ipsa temporibus, ducimus praesentium voluptate iure autem impedit quaerat nobis, reiciendis dolores explicabo deserunt? Deleniti natus, saepe asperiores maxime animi illum officiis odit quia. A et, voluptatem libero tenetur ut consequuntur ex corporis architecto. Animi modi eos vitae recusandae esse ullam sit culpa sint! Quo, illo commodi maxime consequuntur harum eius reiciendis veritatis. Est, fugit in nihil explicabo necessitatibus quas rem magnam optio minus doloribus deleniti possimus similique dolor dignissimos qui maiores sit consequatur eum doloremque iusto omnis numquam. Cum maxime accusantium iusto quis, excepturi et laboriosam, obcaecati repudiandae asperiores quisquam minima laudantium reprehenderit iure totam. Rem neque doloribus deserunt, iure repellendus laudantium ducimus eius quia ut excepturi quos ex et quo corrupti, cupiditate, beatae doloremque in minima iste commodi fuga aliquid incidunt vero. Rem saepe ipsum, doloribus omnis molestiae, rerum cupiditate voluptatibus, ipsa consequuntur est ratione provident dolore veniam laboriosam suscipit perferendis quos sunt dolorem voluptatem ipsam eius laudantium. Corrupti officia cum ab fugit sequi corporis illo. Cupiditate deleniti exercitationem culpa harum, beatae non at molestias perspiciatis eaque, rem id illo excepturi consequatur placeat, corporis ipsum mollitia quas debitis quidem? Distinctio consequatur velit excepturi odio debitis quos saepe perferendis libero possimus delectus! Voluptatem animi praesentium optio iste velit debitis perspiciatis odit excepturi, nostrum voluptate magnam nam! Labore molestiae tenetur obcaecati harum perferendis. Adipisci, vel aliquam in dolores eligendi voluptates nobis voluptatum quaerat quas, repellendus veritatis aliquid sequi neque a suscipit tempore! Id sint sequi vero voluptatem sed neque itaque, doloribus recusandae fuga animi reiciendis ratione corrupti vel quasi eum reprehenderit ipsum adipisci dolorum cumque nobis tempora, dolorem et eligendi fugiat. Alias laborum dolor est expedita distinctio fugit, sequi eligendi nihil nobis, esse quo. Nam eius, veniam eos asperiores vel, ullam mollitia, accusantium officiis sapiente natus tempore? Sunt perferendis corporis molestias, reprehenderit unde veniam atque esse modi soluta exercitationem vel a dignissimos. Ipsa, qui. Voluptate provident fugit animi natus maxime quae repellat accusamus voluptates porro iste ipsa incidunt velit, pariatur laudantium illum nam labore, iusto ad facere delectus quo sit similique sint. Quaerat quisquam eveniet, voluptatibus consequuntur aut minima magnam magni dolore sed voluptatum adipisci dignissimos non ea quae vel, deleniti dolores quos recusandae esse nam aliquam! Minus illo distinctio aperiam architecto unde adipisci totam. Expedita molestias pariatur voluptatum cupiditate fugiat natus exercitationem, quasi accusamus voluptates reprehenderit aliquid minima quidem! Animi, numquam ea velit laudantium nulla quae nam odio quasi enim, cupiditate molestias aliquid optio harum quod modi minima. Hic eos fugit cupiditate esse velit corrupti beatae voluptate nam, in veritatis quam voluptates incidunt officiis minima nihil. Minus id quisquam modi pariatur nostrum! Repellendus quos magni quod exercitationem suscipit molestias tempore. Temporibus!</p>
    </section>
    <footer></footer>

Комментарии:

1. Let — область действия блока. Замените его ключевым словом var для переменной содержимого.

2. нет, это не работает.

3. @Aleksandar вы правы в том, что существует разница между let и var, однако в этом случае содержимое находится в области видимости.

Ответ №1:

Вам удалось установить активный класс в порядке. Что было необходимо, так это немного больше таргетинга, чтобы получить элемент, выбранный CSS. Замена

  .active {
            opacity: 1;
            transform: scale(1);
        }

с

 #content.active {
            opacity: 1;
            transform: scale(1);
        }

работает.

Ответ №2:

Краткое изложение того, что я изменил:

  • Я изменил .active на #content.active
  • Вместо того, чтобы использовать #content ограничивающую рамку в качестве маркера для анимации прокрутки, я взял высоту заголовка: когда вы применяете к #content transform of scale(.2) , вы уменьшаете его, в результате чего анимация прокрутки запускается позже, чем ожидалось.
  • Вместо того чтобы брать у окна innerHeight , я беру у него scrollY .
 window.addEventListener('scroll', () => {
  let content = document.getElementById('content');
  let contentPosition = document.querySelector('header').clientHeight;
  let screenPosition = window.scrollY;
  if (contentPosition < screenPosition) {
    content.classList.add('active');
  } else {
    content.classList.remove('active');
  }
}) 
 * {
  margin: 0;
}

header {
  height: 120vh;
  background: linear-gradient(45deg, #6A65FF, #555986);
}

.body p {
  line-height: 1.4;
}

#content {
  opacity: 0;
  transform: scale(.2);
  transition: .5s ease;
}

#content.active {
  opacity: 1;
  transform: scale(1);
}

footer {
  height: 100vh;
  background: linear-gradient(90deg, rgba(50, 101, 255, 1) 47%, rgba(0, 212, 255, 0.9997821027825192) 100%);
} 
 <header></header>
<section class="body">
  <p id="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae eveniet ipsam animi similique rem harum unde non minus nihil earum mollitia impedit eum, eos fuga nobis quod quasi quas explicabo cumque fugit delectus. Explicabo maiores velit quae
    neque consequatur deleniti vitae ducimus! Praesentium tenetur dignissimos, vitae ratione labore atque officiis doloribus numquam amet odio cupiditate temporibus debitis laboriosam asperiores sequi eveniet accusamus dolor architecto voluptate commodi
    repellat aperiam. Ipsa temporibus, ducimus praesentium voluptate iure autem impedit quaerat nobis, reiciendis dolores explicabo deserunt? Deleniti natus, saepe asperiores maxime animi illum officiis odit quia. A et, voluptatem libero tenetur ut consequuntur
    ex corporis architecto. Animi modi eos vitae recusandae esse ullam sit culpa sint! Quo, illo commodi maxime consequuntur harum eius reiciendis veritatis. Est, fugit in nihil explicabo necessitatibus quas rem magnam optio minus doloribus deleniti possimus
    similique dolor dignissimos qui maiores sit consequatur eum doloremque iusto omnis numquam. Cum maxime accusantium iusto quis, excepturi et laboriosam, obcaecati repudiandae asperiores quisquam minima laudantium reprehenderit iure totam. Rem neque
    doloribus deserunt, iure repellendus laudantium ducimus eius quia ut excepturi quos ex et quo corrupti, cupiditate, beatae doloremque in minima iste commodi fuga aliquid incidunt vero. Rem saepe ipsum, doloribus omnis molestiae, rerum cupiditate voluptatibus,
    ipsa consequuntur est ratione provident dolore veniam laboriosam suscipit perferendis quos sunt dolorem voluptatem ipsam eius laudantium. Corrupti officia cum ab fugit sequi corporis illo. Cupiditate deleniti exercitationem culpa harum, beatae non
    at molestias perspiciatis eaque, rem id illo excepturi consequatur placeat, corporis ipsum mollitia quas debitis quidem? Distinctio consequatur velit excepturi odio debitis quos saepe perferendis libero possimus delectus! Voluptatem animi praesentium
    optio iste velit debitis perspiciatis odit excepturi, nostrum voluptate magnam nam! Labore molestiae tenetur obcaecati harum perferendis. Adipisci, vel aliquam in dolores eligendi voluptates nobis voluptatum quaerat quas, repellendus veritatis aliquid
    sequi neque a suscipit tempore! Id sint sequi vero voluptatem sed neque itaque, doloribus recusandae fuga animi reiciendis ratione corrupti vel quasi eum reprehenderit ipsum adipisci dolorum cumque nobis tempora, dolorem et eligendi fugiat. Alias
    laborum dolor est expedita distinctio fugit, sequi eligendi nihil nobis, esse quo. Nam eius, veniam eos asperiores vel, ullam mollitia, accusantium officiis sapiente natus tempore? Sunt perferendis corporis molestias, reprehenderit unde veniam atque
    esse modi soluta exercitationem vel a dignissimos. Ipsa, qui. Voluptate provident fugit animi natus maxime quae repellat accusamus voluptates porro iste ipsa incidunt velit, pariatur laudantium illum nam labore, iusto ad facere delectus quo sit similique
    sint. Quaerat quisquam eveniet, voluptatibus consequuntur aut minima magnam magni dolore sed voluptatum adipisci dignissimos non ea quae vel, deleniti dolores quos recusandae esse nam aliquam! Minus illo distinctio aperiam architecto unde adipisci
    totam. Expedita molestias pariatur voluptatum cupiditate fugiat natus exercitationem, quasi accusamus voluptates reprehenderit aliquid minima quidem! Animi, numquam ea velit laudantium nulla quae nam odio quasi enim, cupiditate molestias aliquid optio
    harum quod modi minima. Hic eos fugit cupiditate esse velit corrupti beatae voluptate nam, in veritatis quam voluptates incidunt officiis minima nihil. Minus id quisquam modi pariatur nostrum! Repellendus quos magni quod exercitationem suscipit molestias
    tempore. Temporibus!</p>
</section>
<footer></footer>
Метки: