Анимация бордера при скролле страницы

Question

Хочу сделать одну анимацию на странице, но даже в голове нет идей, как это реализовать. Что-то загуглить тоже не получилось. У меня есть много блоков на странице и у некоторых блоков есть border, который должен анимироваться при скролле. На момент создания, у border width 0, но когда мы докручиваем border до этого блока, и скроллить вниз, мы увеличиваем его ширину плавно, если вверх скроллим, обратно уменьшаем ширину border. Если есть, может как-то этот эффект называется, можно почитать где-то. Пример есть на сайте http://andrikanich.guru/freelance/2017/hranipex/

Вроде бы 6 блок, там где анимация с рулеткой, точно такая же должна быть с border

Answer 1

const borderAnimated = document.querySelector('.border-animated');

const getScrollProgress = () => Math.floor(window.pageYOffset);

const setBorderSize = (target, size) => {
  target.style.borderWidth = `${size}px`;
};

document.addEventListener('scroll', () => {
  const scrollProgress = getScrollProgress();
  setBorderSize(borderAnimated, scrollProgress / 50);
});

body {
  font-family: sans-serif;
  color: aliceblue;
  font-weight: 600;
  font-size: 32px;
  height: 400vh;
}

.border-animated {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  background-color: darkgrey;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0px solid royalblue;
  // для дополнительной плавности можно добавить
  // transition: border 0.25s;
}

<div class="border-animated">
  <p>Scroll me</p>
</div>

Answer 2

Попробуйте готовые варианты плагинов. Самый scrollmagic.io

Такая анимация построена на системе сцен и управления ими при скролле.

БЛОГ НА HUSL

Анимация бордера при скролле страницы

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