Category: анимация

14
Янв
2022

TranslateAnimation анимация объекта в цикле и случайным местоположением

Всем привет! Подскажите пожалуйста как можно сделать повторяющийся цикл анимации объекта? В моем приложении есть готовая анимация созданная при помощи TranslateAnimation. Объект спускается вниз по экрану из случайного места по оси Х. Как р…

09
Янв
2022

Как сделать так, чтобы кнопка прокрутки наверх появлялась только тогда, когда выполняются определенные условия (описал условия ниже)

Условия появления ‘кнопки наверх’:

когда прокручена определенная часть контента – реализовал
когда юзер прокрутил страницу наверх относительно текущего положения позиции скроллa

1-е условие реализовано, осталось добавить второе.
Код:
va…

03
Янв
2022

Соскальзывающая маска фона на основе SVG

Нужен следующий анимационный эффект:
Загрузилась HTML-страничка с каким-то фоном, пусть темно-синим. Спустя 1с сверху-вниз соскальзывает SVG-изображение к центру экрана, которое только осветляет существующий фон (действует как маска).
Помо…

02
Янв
2022

3D анимация вращающегося круга с текстом?

Вот что я сделал https://jsfiddle.net/hgtkj0cv/1/, но это немного не так как мне нужно. В JavaScript я только учусь, поэтому прошу помощи как довести код до нормального? можно ли как-то сделать чтобы 1 слово было окрашено(Разработка), вто…

29
Дек
2021

Как при зажатии кнопки производить постоянное выполнение действие, пока кнопка зажата в PyQt5

Мне нужно, что бы при зажатии кнопки "Влево" или "Вправо" картинка двигалась без остановки пока пользователь не отпустит кнопку, мой код:
import sys
from PyQt5 import QtWidgets, QtGui, QtCore
from PyQt5.Qt import *

cl…

27
Дек
2021

Анимация кнопок работает неправильно

Пытаясь создать анимированные кнопки при наведении в активном окне, воспользовался подсказкой из этого вопроса.
Использовал конструкцию условия чтобы определить какая кнопка, какую анимацию должна проигрывать, но вместо ожидаемого, получ…

18
Дек
2021

Как правильно использовать <transition-group> для <tr> элементов в таблице?

Проблема в том, что когда удаляешь tr элемент из таблицы, окружающие его элементы резко перемещаются, вместо того чтобы плавно перелететь на новые места. Тут я использую transition-group.
В документации vue описывается решение этой проблем…

13
Дек
2021

Anime.js – элементы анимации с различной продолжительностью

Имеется html-элемент, который нужно бесконечно вращать, но передвинуть только 1 раз. Пытаюсь сделать с помощью вызова anime.js 2 раза.
В таком варианте не работает смещение, но работает вращение.

anime({
targets: ‘.element’,
transl…

08
Дек
2021

Постепенно закрасить все координаты плоскости с интервалом в 1 секунду

Необходимо закрасить все поле вот таким вот образом, как на изображении (квадрат должен увеличиваться на 3 клетки во все стороны каждую секунду). Проблема в том, что на середине программа начинает тормозить и с каждым новым вызовом функции…

27
Ноя
2021

Как запускать lottie анимацию только тогда, когда элемент находится в зоне видимости экрана?

Пытаюсь запустить lottie анимацию при достижений определенного элемента(или можно сказать когда элемент находится зоне видимости). Как это реализовать на js.

19
Ноя
2021

Canvas как сделать ,чтобы выбранный элемент в массиве прорисовывался последним и убрать анимацию мелькания

Разрабатываю паззл на js. Никак не могу понять, как сделать так, что элемент, который перетягивается перересовывался над другими ,и как сделать плавную анимацию. Исходник
`<!DOCTYPE html>
<html>

<head>
<meta charset=&…

19
Ноя
2021

Canvas как сделать ,чтобы выбранный элемент в массиве прорисовывался последним и убрать анимацию мелькания

Разрабатываю паззл на js. Никак не могу понять, как сделать так, что элемент, который перетягивается перересовывался над другими ,и как сделать плавную анимацию. Исходник
`<!DOCTYPE html>
<html>

<head>
<meta charset=&…

19
Ноя
2021

Canvas как сделать ,чтобы выбранный элемент в массиве прорисовывался последним и убрать анимацию мелькания

Разрабатываю паззл на js. Никак не могу понять, как сделать так, что элемент, который перетягивается перересовывался над другими ,и как сделать плавную анимацию. Исходник
`<!DOCTYPE html>
<html>

<head>
<meta charset=&…

19
Ноя
2021

Canvas как сделать ,чтобы выбранный элемент в массиве прорисовывался последним и убрать анимацию мелькания

Разрабатываю паззл на js. Никак не могу понять, как сделать так, что элемент, который перетягивается перересовывался над другими ,и как сделать плавную анимацию. Исходник
`<!DOCTYPE html>
<html>

<head>
<meta charset=&…

13
Ноя
2021

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

Нужно сделать что-то типо медиа запроса css, но только в jQuery. Пробовал много вариантов, но почему-то в один момент анимация просто не работает. Как сделать так, чтобы анимация срабатывала только тогда, когда ширина экрана больше 800px? …

08
Ноя
2021

Сделать прокрутка с эффектом страницы под страницей(листы)

Есть пример сайта – aic.ru, при скролле есть эффект будто следующий блоки находятся под предыдущим и предыдущий уходит наверх. Я представляю примерно как это сделать, подписаться на скролл и двигать transform’ом или "top", но про…

02
Ноя
2021

Реализация логики срабатывания двух условий в анимации

Вопрос инициирован вопросом и ответом на него, в котором реализована логика взаимодействия пешеходов с сигналами светофора:
Пешеходы:

стоят у зебры, когда: горит желтый или красный цвет
переходят дорогу только на зелёный цвет светофора

А…

27
Окт
2021

Страница перезагружается 2 раза при добавлении свойства pin в gsap

Я использую js библиотеку GSAP для анимирования открытия ноутбука на своей странице.
Была задача "не скролить экран пока анимация не закончится" – И я использовал свойство pin: true и моя страница при открытии начала перезагружат…

18
Окт
2021

Выполнить анимацию в обратном порядке

Есть страница с анимацией, по клику на бургер элементы меню появляются одним за другим, по клику на "крестик" элементы должны "пропадать" в обратном порядке, то есть анимация должна быть воспроизведена в обратном порядк…

09
Окт
2021

Jquery разное позиционирование элементов с одинаковым классом

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

$(document).ready(func…

05
Окт
2021

Инструкция для изучения анимаций

Всем привет! Хотел бы спросить, что нужно знать и где это можно посмотреть, чтобы сделать анимацию вот такого вида?

При скролле до этого блока, должен сначала появляться блок с текстом, потом кружочек и от него идти линия до следующего бл…

04
Окт
2021

Как мне замаскировать элемент с помощью анимированного overlay?

Я пытаюсь выполнить некоторые transitions между страницами для проекта, над которым я работаю.
У меня есть анимированный overlay, который появляется на экране, когда пользователь перемещается по сайту с помощью Barba, но у меня возникла пр…

04
Окт
2021

Как мне замаскировать элемент с помощью анимированного overlay?

Я пытаюсь выполнить некоторые transitions между страницами для проекта, над которым я работаю.
У меня есть анимированный overlay, который появляется на экране, когда пользователь перемещается по сайту с помощью Barba, но у меня возникла пр…

24
Сен
2021

CSS – Можно ли анимировать clip на изображении, чтобы открывать квадранты по часовой стрелке?

У меня есть два круглых изображения. Верхнее изображение располагается абсолютно поверх нижнего изображения. Я показываю верхнее изображение с интервалом 25% с помощью клипа, и мне интересно, можно ли его анимировать, чтобы квадрант постеп…