@Lvan226

Как сделать такую svg анимацию?

https://adv.ru/#CoreVerticals Есть сайт на нем в блоке отрасли при клике на элемент списка происходит анимация картинки. Как такое можно реализовать? Есть ли какие-то требования к svg при подобной анимации? Еще интересует как реализуется скролл на этом сайте.
  • Вопрос задан
  • 190 просмотров
Пригласить эксперта
Ответы на вопрос 1
@lagudal
ключевые слова "stroke-dasharray, stoke-dashoffset" - смотрите реализацию в гугле примеров тьма.
Требования к svg - fill none, stroke-width по вашему вкусу.
И у них не по клику а по ховеру элементу с классами core__card js-core-card добавляется класс core__card_active
и вот к нему эта анимация и применяется.
Например, первый элемент, div data-id="insurance" class="core__card js-core-card
внутри него svg id="insuranceSvg", stroke-dashoffset=32.
Как только к диву добавился класс core__card_active, значение stroke-dashoffset анимируется до 0. Убирается активный класс, значение stroke-dashoffset снова в дефолтное. Ну там еще опасити для активного класса, но это уже не svg- там просто все.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
06 дек. 2019, в 09:02
30000 руб./за проект
06 дек. 2019, в 08:55
5000 руб./за проект
06 дек. 2019, в 01:32
10000 руб./за проект