Tagged: css-animation

20
Июл
2021

Как оптимизировать или исправить анимацию волны?

Делаю примитивную анимацию волны. Но столкнулся с проблемой. Первая кривая Безье не согласуется с последующими, из-за этого пришлось спрятать этот участок за холстом.
Как можно упростить анимацию, ведь сейчас каждый раз создается новый пут…

19
Июн
2021

Как position: fixed влияет на CSS свойство transform: rotateY() на устройствах iphone?

На сайте есть карточки с услугами (в них видео проигрывается коротенькое). Если нажать на него то карточка переворачивается и на обратной стороне текст с описанием услуги (переворот осуществляется с помощью transform: rotateY(-180deg) ).
В…

25
Май
2021

Как сделать анимацию передвижения картинки (чтобы было плавно)?

Пытаюсь написать простую игру "монополия", где есть как минимум один игрок и общее игровое поле. На поле есть клетки, расположенные по кругу. Игрок нажимает на кнопку "бросить кубик" и передвигается по клеткам после (в …

16
Май
2021

Круговой слайдер под 5 элементов

Подскажите, как реализовать анимацию кругового слайдера на 5 элементов. Похожего на тот что на изображении

Не понимаю на сколько градусов правильно повернуть item (тут ведь не правильный пятиугольник нужен ), а изображения должны ити перп…

08
Апр
2021

CSS 3D анимированное колесо смещено от центра

У меня есть 3D-анимация колеса / цилиндра css, которая вращается по оси x. Моя проблема в том, что анимация движется вверх и вниз за пределами контейнера. Пример GIF ниже …

Код для вышеперечисленного можно найти здесь: https://jsfiddle….

08
Апр
2021

Как закрашивать текст в элементах перемещающимся цветным блоком?

Есть табы.

По умолчанию цвет текста – серый.
При переключении нужно чтобы красный цвет плавно заменял серый со смещением.
Вот так

Под табом должна быть черточка.
Думается что все красное должно быть одним блоком.
Можно как то сделать так…

08
Апр
2021

Как закрашивать текст в элементах перемещающимся цветным блоком?

Есть табы.

По умолчанию цвет текста – серый.
При переключении нужно чтобы красный цвет плавно заменял серый со смещением.
Вот так

Под табом должна быть черточка.
Думается что все красное должно быть одним блоком.
Можно как то сделать так…

05
Апр
2021

Математический маятник, анимация демонстрирующая этот эффект

Математический маятник — осциллятор, представляющий собой механическую систему, состоящую из материальной точки на конце невесомой нерастяжимой нити или лёгкого стержня и находящуюся в однородном поле сил тяготения. Другой конец нити (стер…

14
Фев
2021

Управление keyframes через JS

У меня есть анимация, прописанная в CSS:
@keyframes slideIn {
from { width: 0px; }
to { width: 40px; }
}

После того, как я увожу курсор с элемента, должна производиться другая анимация:
@keyframes slideOut {
from { width: 40px; }

28
Янв
2021

Как принудительно активировать стиль для элемента через JS?

Не получается активировать стиль из JS для элемента. Если смотреть в браузере через код элемента, то стиль нормально определяется, но он не активирован т.е. не стоит галочка в стилях
Что за беда? !important не помогает
JS – код

windo…

19
Янв
2021

Как можно реализовать подобную анимацию, как в этом макете Figma?

Пока что вообще не имею представления, как это можно реализовать с помощью JS и CSS. Можете дать какие-то наводки или предположения. Вот макет в Figma, где показан пример с функционалом (можно кликать на заголовки)

22
Дек
2020

Смена иконки внутри кнопки svg

Имеется кнопка. Необходимо чтобы по нажатию иконка-1 менялась на иконку-2. Если снова нажать на кнопку, то иконка-2 меняется на иконку-1. Не могу понять как это сделать с помощью JS. Возможно это просто, но я только постигаю эти "джун…

17
Дек
2020

canvas smile/sad face

помогите с определением координат x,y для анимации улыбки и грусти с помощью canvas и requestAnimationFrame
нужно анимировать рот чтобы он из улыбки превращался в грусть

window.onload = () => {
const c = document.getElementById(‘c…

07
Дек
2020

Не работает анимация svg в safari на бою,а на локалке все отлично.в чем может быть проблема?Спасите помогите

Не работает анимация svg в safari на бою,а на локалке все отлично.в чем может быть проблема?Спасите помогите.
Сначала стили были отдельно прописаны,после этого решил записать стили внутрь svg,но к сожалению эффект тот же,на локалке работае…

05
Дек
2020

Выпадающий список открываеться в верх а должен в низ

можете подсказать как сделать чтобы выпадающий список открывался вниз (так как на 2 сайте с видео), он открывается здесь в верх. Сделано ето через js, сначалала при загрузке страницы смотрю какая высота того блока затем скрываю его и при к…

26
Ноя
2020

определенный скролл, анимация при скролле

нужен примерно такой скроллинг как показанно здесь, http://luminouspil.com/#, я использовал инструмент snap-scroll, но не получил то что ожидал, на сайте, который указал выше, при любом размере прокрутки страница скроливается на определенн…

26
Ноя
2020

определенный скролл, анимация при скролле

нужен примерно такой скроллинг как показанно здесь, http://luminouspil.com/#, я использовал инструмент snap-scroll, но не получил то что ожидал, на сайте, который указал выше, при любом размере прокрутки страница скроливается на определенн…

26
Ноя
2020

zoom-in эффект при прокрутке, эффект нужен для div

Ищу zoom-in эффект при прокрутке, аналог
Эффект в секции з заголовком "REFORM CO".
Может кто-нибудь пояснить как это делается?
Планирую использовать рисунок (SVG маска), чтобы был выден нижний div.
Как сделать такой же эффект как…

26
Ноя
2020

zoom-in эффект при прокрутке, эффект нужен для div

Ищу zoom-in эффект при прокрутке, аналог
Эффект в секции з заголовком "REFORM CO".
Может кто-нибудь пояснить как это делается?
Планирую использовать рисунок (SVG маска), чтобы был выден нижний div.
Как сделать такой же эффект как…

19
Ноя
2020

Как добиться корректной работы кнопки пуск эквалайзера?

Я разработал приложение имитирующее работу эквалайзера в части показа изменения аудио частот

Проблемы с анимацией возникают при повторном нажатии на кнопку "Start"
Результаты анимации сбрасывается и анимация начинается с самого…