Блог

Главная - Вопросы по программированию - Как изменить свойства css одного элемента, как только он появляется на экране

Как изменить свойства css одного элемента, как только он появляется на экране

#javascript #html #css #scroll #size

#javascript #HTML #css #прокрутка #размер

Вопрос:

один вопрос, я видел некоторые веб-сайты, на которых при прокрутке страницы вниз и отображении некоторых элементов эти элементы начинают изменять свои свойства, такие как размер и положение. И при повторной прокрутке вверх эти элементы возвращаются к своему первоначальному размеру и положению.

Есть ли какой-либо способ изменить свойства CSS, когда элемент отображается на экране?

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

1. Обычно они меняют класс элемента.

2. Element.classList.add('someClass')

Ответ №1:

Этот урок YouTube может вам помочь.

Этот проект предоставит вам необходимый код.

Ниже приведен пример. 

 .animation1 {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
.animation2 {
  width: 100px;
  height: 100px;
  background-color: red;
 }
.space{
height:150vh;
}
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}  
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<div class="animation1"></div>
<div class="space"></div>
<div class="animation2" data-aos="fade-up"
     data-aos-anchor-placement="center-bottom"
     data-aos-duration="2000">
</div>
<script>
  AOS.init();
</script>