Добавлю ещё, что часто надо менять цвет не только СВГ но и всей ссылки, в которой она находится. Поэтому в CSS прописываем так (пример):
a:hover .icon {
filter: invert(60%) sepia(99%) saturate(406%) hue-rotate(87deg) brightness(96%) contrast(82%);
transition: all 0.7s ease;
}
где .icon - класс самой СВГ.
Данные для filter выдаст генератор, ссылка на который в пред. коменте.
transition - плавность смены цвета.
Ну и для самой ссылки должен быть прописан hover отдельно.
Sagrana, хорошо, спасибо.
Но не могли бы вы ещё подсказать как именно этот дополн. код (касательно функции elementInViewport и отслеживания скролла) применить у себя? Я имею ввиду, что не понятно мне как привязать его к моему диву с анимацией. Наверное по id но как его прописать тут в коде правильно?
П.С. Мне до совершенства в js ещё далеко поэтому и задаю такие вопросы (наверное очевидные для профи).
П.С.П.С. С анимацией я уже разобрался (вроде) и набросал инструкцию по пунктам, которую тут тоже выложу как до конца разберусь).
Супер! Начал внедрять и все понятно до последних двух строк кода - что присваивается переменной anim?
Можно детальнее, пожалуйста.
И как именно применить эти 2 метода для анимации anim.play(); и anim.stop(); ?
В доке до lottie нет примеров применения. Можно тоже детальнее? Как для Трейни-).
Спс.
Мне желательно максимально упрощ. вариант нужен).
Например, из практики фронт-эндщика.
По-любому кто-то уже прикручивал анимации к сайтам - вот и я хочу для себя этот момент отработать и пометить как инструкцию).
Если версия Саблайм не портативная то куда копировать содержимое из указанного пути?
Просто установить голый Саблайм и по этому же пути скопировать папки из предыдущей, настроенной версии? И потом он сам подтянет плагины?
Дмитрий Беляев, я только начал использовать VS Code. Вот и пытаюсь настроить сразу под себя. Многие говорят, что эти префиксы им расставляют препроцессоры. Но мне их использовать рановато). Вот и ищу норм. способ их ставить автоматически. Если postCSS для этого подходит - значит установлю его.
Добавлю ещё, что часто надо менять цвет не только СВГ но и всей ссылки, в которой она находится. Поэтому в CSS прописываем так (пример):
a:hover .icon {
filter: invert(60%) sepia(99%) saturate(406%) hue-rotate(87deg) brightness(96%) contrast(82%);
transition: all 0.7s ease;
}
где .icon - класс самой СВГ.
Данные для filter выдаст генератор, ссылка на который в пред. коменте.
transition - плавность смены цвета.
Ну и для самой ссылки должен быть прописан hover отдельно.