@IT-Programmer

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

Как сделать эффект как на этой картинке( Там где линия образуется )?
Или как называется такой эффект?
( Гифка со статьи на Хабре )
wevjlg0qmxqqrzkaw3cgr9ctsds.gif
  • Вопрос задан
  • 737 просмотров
Решения вопроса 1
@Cruper
web-падаван
Линия - это просто блок с размерами и черным фоном.
Чтобы добиться такого эффекта, достаточно воспользоваться свойствами
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';
  }
}

Используя это, достаточно просто будет усложнить анимацию так, как вам хочется.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Samuello
@Samuello
Учусь WEB программированию.
Не совсем то, но всё равно https://github.com/michalsnik/aos
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы