2

Мучает вопрос с анимацией(примеры ниже), никак не могу найти в интернете, может неправильно ищу. Мне никак не понятно каким образом всё это работает, я и js код посмотрел, кое что еле еле понял, не всё понятно было. Может есть руководство, ну, типо алгоритм создания таких анимаций.

  1. Анимация при скролле. Такое ощущение что сайт не скролится, но на самом деле всё происходит при скроле страницы. 1 сайт - второй блок, так же блок "ШИРОКИЕ ВОЗМОЖНОСТИ"

  2. И ещё интересует вот такая линия SVG, как примерно такое получают? 2 сайт - третий блок

4
  • 1
    Все достаточно тривиально, положение элементов вычисляется на основании window.scrollY, второй вопрос - не понятно о каком блоке идет речь Commented 7 окт. 2019 в 14:19
  • 1
    первый сайт просто космос! хахаха. Этот квадратик сделал мой день. (извиняюсь что не по теме коммент) Commented 7 окт. 2019 в 14:21
  • @StrangerintheQ второй сайт - блок где SVG линия заполняется дргуим цветом. Я примерно понял вроде - это должно быть dasharray, dashoffset скорее всего. Осталось понять как правильно расположить всё это и всё) Commented 7 окт. 2019 в 14:37
  • 1
    @SamvelHarutyunyan да, это svg и stroke-dashoffset/stroke-dasharray для линий Commented 7 окт. 2019 в 14:41

1 ответ 1

11

Вот пример подобной анимации, меняется одна css переменная, от которой все отталкивается

let elements = document.querySelectorAll('.animated-by-scroll');

addEventListener('scroll', () => {
  document.body.style.setProperty('--scroll', window.scrollY);
})
body {
  height: 4000px;
  --scroll: 0;
  overflow-x:hidden;
}

.rect {
  position: absolute;
  width: 50px;
  height: 50px;
}

.rect1 {
  background-color: hsl(calc(var(--scroll) * 0.1), 55%, 55%);
  transform: translate(calc(50vw - 50%), calc(80vh - 50%)) 
              rotate(calc(var(--scroll) * 0.5deg))
              scale(calc(calc(var(--scroll) * 0.01) + 1));
}

.rect2 {
  background-color: hsl(calc(var(--scroll) * 0.4), 55%, 55%);
  transform: translate(calc(0.1vw * var(--scroll)), calc(80vh - 50%));
}

.rect3 {
 background-color: hsl(calc(var(--scroll)), 55%, 55%);
  transform: translate(calc(90vw - calc(0.1vw * var(--scroll))), calc(100vh - 50%));
}
<div class="rect rect1"></div>
<div class="rect rect2"></div>
<div class="rect rect3"></div>

1
  • 1
    Спасибо большое за ответ и за предоставленный пример. Commented 7 окт. 2019 в 14:40

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.