Как сделать подобный эффект на сайте или как называется такой эффект?

Question

[Jun ior]

Как сделать эффект как на этой картинке( Там где линия образуется )?
Или как называется такой эффект?
( Гифка со статьи на Хабре )

Comments

[Jun ior]

maxNobil, Спасибо

Answer 1

[Артем]

Линия - это просто блок с размерами и черным фоном.
Чтобы добиться такого эффекта, достаточно воспользоваться свойствами
position: absolute; left: N; top: N; - чтобы убрать ее за пределы экрана
transform: rotate(45deg); - чтобы повернуть ее на нужный угол (в данном случае 45 градусов)
transition: 2s width; - чтобы анимировать изменение ширины
А после загрузки страницы запустить js скрипт, который задаст новую ширину линии, такую, чтобы она вылезла из-за границы экрана

window.onload = function () {
  var line = document.querySelector('#line');
  if (line) {
    line.style.width = '100px';
  }
}

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

Answer 2

[Samuello]

Не совсем то, но всё равно https://github.com/michalsnik/aos

Comments

[Jun ior]

Спасибо конечно но для этого я использую другую библиотеку, Я интересовался тем как лучше сделать появление линии ( на гифке слева )