Как сделать эффекты как на сайте примере?

Question

[Денис Клепко]

Приветствую!
Для повышения квалификации хочу повторить вот такой сайт https://www.roninamsterdam.com/
Интересуют эффекты.
1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется. Подскажите подобные примеры.
2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).
Остальные эффекты тоже интересуют. Понятно что css3, js, canvas. Интресуют именно готовые примеры, на codepen например, чтобы понять с чего начинать.

Answer 1

[Ivan Bogachev]

Что ж вас всех так тянет к этому канвасу? (риторический вопрос)

1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

Если вы про большие "прозрачные" буквы, через которые видны фотографии, то никакой канвас там не нужен. Это делается на svg-масках - просто и производительно. Соответственно при перемещении мышки добавляется transform:translate для маски. Задача тривиальная, но оставлю пример для ознакомления. Переход между слайдами делается аналогично.

2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

На нажатие мышки вешаете обработчик, показывающий эти элементы (думаю не стоит говорить о том, как поменять им opacity). Далее точно так же - на событие "перетаскивания" добавляете transform:translate для всех этих линий и transform:scale для кружков. При переходе между слайдами добавляете еще больше трансформаций по вкусу.

Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

Для рисования линий можно опять взять svg и..... Это вообще мощный прием, много куда его можно приткнуть. Появление надписей можно сделать на CSS-анимациях. Вариантов много, можно начать с вот этого примера (только делать все в обратную сторону) или поиграть с размерами псевдоэлементов, положенных поверх текстов. Еще там есть постраничный скролл, но это легко загуглить.

Comments

[Денис Клепко]

Большое спасибо!

[alex-1917]

их тянет на канвас до первого заказчика, который опустит их на землю штрафом за то, что ейные клиенты не смогут зайти на сайт с айпада!!))

[lightalex]

canvas = высокая производительность
Ибо нет dom'а который все сжирает

[Ivan Bogachev]

lightalex, одна маска или анимированный path не смогут что-то серьезно затормозить, а простота создания таких эффектов с помощью svg в разы проще, чем на canvas.

[lightalex]

Ivan Bogachev, конечно не сможет
Но обычно когда делают крутые эффекты на canvas, там получается фигова туча элементов
И dom уже такое не вытягивает :(

Answer 2

[Иван Колесников]

Есть такой канал Юрий Артюх, он проводит стримы как раз на тему анимации.
Думаю у него вы найдете много чего полезного для выполнения этой задачи

Comments

[boga-net]

Спасибо ) давно ищу таких ютуберов. А есть кто-нибудь ещё на примете, кто серьёзно занимается анимацией ?

[Иван Колесников]

boga-net, Больше не знаю) Таких мало к сожалению, где можно посмотреть все от начала до конца и повторить. В основном только все примитивное делают

[boga-net]

Иван Колесников, Всё равно спасибо ) До сих пор смотрю его видео, с момента, как прочитал ваш комментарий. Не думал, что кто-то когда-то будет повторять сайт www.taotajima.jp . Захожу к нему на канал, а там предпоследнее видео - как раз разбор эффектов )

[alex-1917]

стримы наше все.. ахахха.