kiskiskit
@kiskiskit
Жадно изучаю каждый пиксель

Как включить анимацию при появление блока?

Подскажите пожалуйста, как запустить анимацию во время появление блока?

сейчас анимация запускается во время загрузки страницы, а нужно чтобы запускалась, когда пользователь дойдёт до конца страницы.

https://codepen.io/kiskiskit/pen/PobQyWz
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
@SpardaPrime
Изменил немного стили
.from-me {
       position: relative;
       display: none; // добавил свойство
       padding: 10px 20px;
       color: white;
       background: #0b93f6;
       border-radius: 25px;
       float: right;
  }

 .loud {
       display: block; // добавил свойство
       animation-duration: 1.5s;
       animation-fill-mode: both;
       animation-timing-function: ease-in-out;
       transform-origin: center center;
       animation-name: loud;
  }
.content {
  width: 100%; // и тут у тебя ошибка widht
  height: 500px
}

javascrpt код по которому при прокрутке до конца страницы выскакивает блок
const sms = document.querySelector('.from-me');
    
const scrollHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
  );

  document.addEventListener('scroll',()=>{
    window.pageYOffset+document.documentElement.clientHeight===scrollHeight&&sms.classList.add('loud');
  })
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы