gaz12
@gaz12
Делаю сайты

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

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

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

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

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

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

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

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

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

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