@Lvan226

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

https://adv.ru/#CoreVerticals Есть сайт на нем в блоке отрасли при клике на элемент списка происходит анимация картинки. Как такое можно реализовать? Есть ли какие-то требования к svg при подобной анимации? Еще интересует как реализуется скролл на этом сайте.
  • Вопрос задан
  • 197 просмотров
Пригласить эксперта
Ответы на вопрос 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- там просто все.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
PeoplePass Москва
от 100 000 до 200 000 руб.
NetLab Москва
от 35 000 до 50 000 руб.
09 дек. 2019, в 12:29
150000 руб./за проект
09 дек. 2019, в 12:20
3000 руб./за проект