Category: анимация

14
Янв
2021

Как устранить ошибку при валидации js в интерактивном баннере html5?

Сделал интерактивный рекламный html5 баннер, но, при загрузке на рекламный ресурс гугла получаю ошибку
Ругается, на сложение в коде js, т.к. в отличие от браузера не умеет его интерпретировать
<canvas width="240" height="…

10
Янв
2021

Как сделать анимацию движения объекта по кривой (алгоритм Безье)

Смог написать программу для рисования кривой используя алгоритм Безье (anaconda), можете пожалуйста помочь, что нужно добавить, чтобы получилась анимация движения, например круга по этой кривой. Просят использовать ffmpeg, celluloid, matpl…

06
Янв
2021

Как в анимацию c canvas включить изображение?

Есть canvas с анимацией отскока от стены мячика.
Как сделать так, чтобы вместо мячика гулял по экрану дед мороз (img картинка), а при соударении об стенку сменялся на елку на голубом фоне и зациклено при новом столкновении со стенкой снова…

02
Янв
2021

Анимация заставки WINTER BASH

Заканчивается сезон WINTER BASH 2020
Хотелось бы, как-то отметить это событие.

На изображении цифрами отмечены, желаемые объекты для анимации
Сценарий анимации:

Генератор шляп.
Должен неравномерно перемещаться вверх-вниз
Знак вопроса до…

02
Янв
2021

Неполная отрисовка в процедурной анимации SVG

Пример двигает окружность SVG влево-вправо. При движении, окружность не всегда отрисовывается полностью. Проверка делалась в FireFox/Ubuntu. Дефект виден не всегда, но проявляется часто. В Chrome/Ubuntu дефект не заметен.
Я понимаю что кон…

26
Дек
2020

gsap скрытие блоков z-index или visiblity: hidden

Сделал анимацию с помощью gsap
Но когда блоки заканчивают анимацию, их можно выделить, пробовал в timeline прописать visibility: hidden, или Zindex: -10, но не работает почему-то.
Я хочу сделать так, чтобы с блоками нельзя было взаимодейст…

21
Дек
2020

Как сделать плавную анимацию фона при скролле?

Есть у меня сайт, на котором я собираюсь сделать анимацию, при которой позиция заднего фона зависит от прокрутки колёсиком. Нагляднее можете увидеть здесь.
Один мой товарищ при просмотре сказал, что она выходит дёрганная, хотя я пробовал с…

21
Дек
2020

React – анимация меню

У меня есть мобильный меню, https://ibb.co/DR1QCdt я хочу добавить плавное анимацию при открытии меню как можно это делать?
NavbarMobile.jsx
import React from ‘react’;

import avatar from "../../../backgrounds/tt_avatar_small.jpg&quot…

20
Дек
2020

Как создать видео "бегущего графика" и объединить его с другим видео?

Мне надо делать подобное видео . Левую часть у меня получается делать – я скачиваю спутниковые снимки и объединяю их в видео в формат mp4 с помощью ffmpeg. Каким образом с помощью каких технологий можно сделать "бегущий график" и…

17
Дек
2020

canvas smile/sad face

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

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

17
Дек
2020

Объект движется по кругу, меняя направление по клику

При нажатии "Запустить" квадрат должен начать двигаться по часовой стрелке, после нажатия левой/правой кнопки мыши меняется направление по часовой стрелке/против. При нажатии "стоп" квадрат должен остановиться, далее по…

15
Дек
2020

Движение по кругу

Квадрат должен перемещаться по кругу после нажатия "запустить" и остановиться на месте после нажатия "стоп".
Изначально он не двигается.
Подскажите, что не так, как исправить?

var t=0;
st=false //остановить …

13
Дек
2020

Реализация анимации After Effects в коде

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

03
Дек
2020

Наиболее правильная реализация сайта

Надо сделать сайт по макету (см. гифку) на React. Как правильнее будет реализовать переходы и разные окна что там фигурируют? Просто ли это будут кастомные элементы или лучше это сделать как-то по другому?

01
Дек
2020

requestAnimationFrame почему по разному вращает рисунок и примитив

user355286 любезно помог решить задачу плавного вращения окружности с секторами.
Добавил еще один canvas1 c рисунком…ничего больше не изменял…вращает на разные углы, хотел на Math.PI/3: окружность это делает, рисунок как заведенный на …

01
Дек
2020

Уход блоков за пределы экрана при увеличении соседних блоков на чистом CSS и JS

Есть 3 блока с изображениями, задача состоит в том, чтобы при клике на блоки они увеличивались из центра на всю ширину экрана. Вопрос: Как сделать так, чтобы при увеличении блока соседние блоки пропорционально сдвигались в стороны, при это…

30
Ноя
2020

Зум (scale) блока при клике на весь экран на чистом js

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

26
Ноя
2020

AOS animate on scroll

мне надо анимация при скролле, подключил AOS. Чтобы проверить подключено или нет, на самом первом элементе ( который виден и без скролла ) ставил класс, анимация работала, думаю это значит что все подключено, ставил классы на других элемен…

25
Ноя
2020

Плавное увеличение части картинки на чистом JS

Есть картинка, на которой есть несколько объектов. При клике на объект должно происходить плавное увеличение, как эффект наезжания камеры, до того момента пока объект не будет на весь экран. Я сделал вариант с разделением картинки на неско…

17
Ноя
2020

Как заанимировать эквалайзер

Есть задача заанимировать такой эквалайзер https://prnt.sc/vki1ks.

Он должен просто попрыгать в течении некоторого времени и превратиться в линию (без музыки). Пробовал сделать в canvas с помощью библиотеки paper.js, но линии вышли нечётк…

16
Ноя
2020

Метод setInterval(), создающий странное перекрытие частей текста

При моей попытке построить простую текстовую карусель, я столкнулся с проблемой, которую трудно понять.
Макет простой. У меня есть оболочка и текст, который я хочу, чтобы карусель перебирала.
Однако проблема, с которой я столкнулся, наскол…

16
Ноя
2020

Установить анимацию на программный dismiss BottomSheetDialogFragment’а

Господа, вопрос скорее всего простой, но при гуглении кидает на "кастомные анимации".
Есть BottomSheetDialogFragment который открывается и скрывается программно из кода.
Открытие:
bottomFragment.show(getParentFragmentManager(),&…

12
Ноя
2020

Сделать анимацию стрелы при наведении и анимация ссылки (удлинение)

Всем привет. Помогите пожалуйста сделать анимацию стрелы при наведении как на Gif и анимацию ссылки. SVG и GIF прилагаются.

Первая Gif’ка
Вторая Gif’ка
Пробовал добавить под стрелку "палку" под стрелку чтобы просто смещать стре…

04
Ноя
2020

CSS/JS Анимация перетаскивание и последующее вращение

Пытаюсь заменить flash на JavaScript. Математика нач. школы. Например 2х2=/пустой div/
Ниже – варианты ответа /55, 47, 4, …/ Если перетащить div с правильным ответом на пустой div, то оставшиеся должны закрутиться. Без клика, просто по с…

02
Ноя
2020

Как создать "плавающие" блоки, которые можно "толкать" курсором? [закрыт]

У меня есть около 15 разных картинок небольшого размера, мне нужно, чтобы они не были привязаны к конкретной точке на странице, а могли "плавать" по всему блоку-ограничителю.
Чем-то похожий пример прикрепляю ниже. Но это пример с…

02
Ноя
2020

Как создать "плавающие" блоки, которые можно "толкать" курсором? [закрыт]

У меня есть около 15 разных картинок небольшого размера, мне нужно, чтобы они не были привязаны к конкретной точке на странице, а могли "плавать" по всему блоку-ограничителю.
Чем-то похожий пример прикрепляю ниже. Но это пример с…

21
Окт
2020

Python. Создание изобаржений на главном экране

Мне бы хотелось создать программу, которая бы рисовала некоторые изображения на главном экране.
То есть, я имею ввиду, чтобы картинки были отображены не в каком-либо отдельном окне, а именно на главном экране поверх всех окон, а также чтоб…