Как создать анимацию при прокрутке страницы?

Question

У меня есть элемент div:

.ticker {
  overflow: hidden;
  white-space: nowrap;
  font-family:arial black;
  background:linear-gradient(to  top,#232323,#000);
  color:#fff;
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  font-size:16px;
}
.ticker__track {
  display: inline-block;
  will-change: transform;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-10%); }
}

<div class="ticker">
  <div class="ticker__track">
    <span>На нашем сайте ты найдешь мою авторскую музыку и звуковые эффекты! -  Здесь собрано всё, что нужно для твоего проекта! - </span>
    <span>На нашем сайте ты найдешь мою авторскую музыку и звуковые эффекты! -  Здесь собрано всё, что нужно для твоего проекта! - </span>
    <span>На нашем сайте ты найдешь мою авторскую музыку и звуковые эффекты! -  Здесь собрано всё, что нужно для твоего проекта! - </span>
    <span>На нашем сайте ты найдешь мою авторскую музыку и звуковые эффекты! -  Здесь собрано всё, что нужно для твоего проекта! - </span>
  </div>
</div>

Как сделать так, чтобы при прокрутке страницы элемент становился полупрозрачным?

Answer 1

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

const body = document.body;

window.addEventListener("scroll", () => {
  const scrollY = window.scrollY;

  if (scrollY > 500) {
    body.setAttribute("data-scrolled", "deep");
  } else if (scrollY > 100) {
    body.setAttribute("data-scrolled", "medium");
  } else {
    body.removeAttribute("data-scrolled");
  }
});

/* Цвет по умолчанию */
body {
  color: blue;
}

/* Если body имеет атрибут data-scrolled со значением "medium" */
body[data-scrolled="medium"] {
  color: orange;
}

/* Если body имеет атрибут data-scrolled со значением "deep" */
body[data-scrolled="deep"] {
  color: red;
}

Есть ещё один интересный способ тоже с JS, это через CSS Variables. Через него можно мутить всякие там паралаксы и прочее, но он сложнее. Нужно курить документацию что-бы понять как это работает.

// Получаем элемент body
const body = document.body;

// При событии скролла устанавливаем CSS-переменную
window.addEventListener("scroll", () => {
  body.style.setProperty("--scroll-y", window.scrollY);
});

body {
  /* Устанавливаем цвет текста.
     Здесь мы используем переменную --scroll-y в качестве компонента HSL (Например, для Hue). 
     Мы делим значение на 10 и прибавляем 150, чтобы получить диапазон оттенков.
     Максимальное значение для Hue - 360.
     Saturation и Lightness (S и L) остаются фиксированными. */
  color: hsl(calc(var(--scroll-y) / 10 + 150), 70%, 50%);
  transition: color 0.5s; /* Для плавного изменения */
}

/* Пример: цвет текста станет темнее после 500px скролла */
h1 {
  background-color: rgb(0 0 0 / calc(var(--scroll-y) / 500));
}

БЛОГ НА HUSL

Как создать анимацию при прокрутке страницы?

Ответы (1 шт):