Как добавить анимацию на веб-страницу?

Question

Джереми

html , css

Как добавить анимацию на веб-страницу?

Как реализовать на своем сайте следующие эффекты при скролле: <br/> <br/> 1) Фиксация телефона, чтобы он двигался вместе с прокруткой страницы до конца блока. <br/> 2) Смена картинки телефона и цвета текста на каждом блоке скролла, сделав текущий блок активным и остальные неактивными. <br/> <br/> Пожалуйста, поделитесь какими-либо примерами или идеями, так как использование `position: sticky` оказалось неэффективным.

14 апреля 2024 г. 16:40

Ответы на вопрос 1

Похожие вопросы

Answer 1

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

```css
@keyframes example {
  0% { transform: translateY(0); }
  50% { transform: translateY(100px); }
  100% { transform: translateY(0); }
}

.element {
  animation: example 2s infinite;
}
```

Чтобы реализовать эффекты при скролле на вашем сайте, вам может понадобиться использовать JavaScript. Вот пример кода на JavaScript, который может помочь вам реализовать описанные вами эффекты:

```javascript
window.addEventListener('scroll', function() {
  var phone = document.querySelector('.phone');
  var blocks = document.querySelectorAll('.block');

  blocks.forEach(function(block) {
    var bounding = block.getBoundingClientRect();
    if (bounding.top < window.innerHeight / 2 && bounding.bottom > window.innerHeight / 2) {
      block.classList.add('active');
    } else {
      block.classList.remove('active');
    }
  });

  phone.style.top = window.scrollY + 'px';
});
```

```css
/* Пример стилей для блоков и телефона */
.block {
  height: 100vh;
}

.phone {
  position: absolute;
  top: 50px; /* начальное положение телефона */
  transition: top 0.5s;
}

.active img {
  /* стили для активного блока */
}

.active p {
  /* стили для текста активного блока */
}
```

Надеюсь, эти примеры помогут вам реализовать желаемые эффекты на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.