Category: анимация
14
Апр
2021

Перемещение элемента по кривой Безье по клику в обе стороны

Имеются две точки (A и B) и кривая Безье от одной к другой. При клике на точку A мы запускаем с помощью animateMotion анимацию перемещения элемента вдоль пути движения из точки A к точке B.

<svg id=”svg” width=”500″ height=”300″ vie…
03
Апр
2021

Заполнить строку circle с выводом процентов, относительно другого circle

Хочу повернуть круг .progressbar__thumb, чтобы линия на круге двигалась из другого места. Но что-то идёт не так. Подскажите, как правильно повернуть?

const progressbarThumb = document.querySelector(‘.progressbar__thumb’);
const progres…
03
Апр
2021

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

В анимации круг заполняется полностью обводкой и меняются проценты. На определенных процентах нужно сменять запись"Анализ индекса массы тела"
Чем удобнее всего такое реализовать? Может плагин какой?

…
28
Мар
2021

Проблема с правильным вращением трехмерного куба по краям с помощью функции rotate и translate

Пожалуйста посмотрите мой jsfiddle
Для начала анимации кликнете по кубу

var xAngle = 0;
var yAngle = 0;
var xPos = 0;
var yPos = 0;

$(‘body’).keydown(function(evt) {
if(evt.keyCode == 37)
{
//left
yAngle -= …
27
Мар
2021

Анимация конфетти(canvas) с snap.js

Учу с нуля. Но ответа на данный вопрос не нашел
Нашел единственно подходящую анимацию конфетти. Вставил ее в конец HTML, и теперь есть анимация при открытии страницы поверх моего snap.js:
<script type="module">
import c…
24
Мар
2021

Не срабатывает параметр transition | JS

Написал диву стиль transition: width 1s ease-in-out;
Когда через панель инструментов меняю ширину с 280px на 0, то все работает плавно. НО, если я делаю то же самое через js:
element.style.width = 0, то див мгновенно схлопывается. Что дела…
17
Мар
2021

Как исправить анимацию rotate3D?

Всем привет!
Делаю анимацию rotate3D, но картинки ведут себя странно. Должны они поворачиваться в сторону курсора при наведении на них, примерно так как здесь: https://codepen.io/Bilgili/pen/EbZepr
Но где-то у меня проблемы с рассчетом коо…
17
Мар
2021

Как исправить анимацию rotate3D?

Всем привет!
Делаю анимацию rotate3D, но картинки ведут себя странно. Должны они поворачиваться в сторону курсора при наведении на них, примерно так как здесь: https://codepen.io/Bilgili/pen/EbZepr
Но где-то у меня проблемы с рассчетом коо…
16
Мар
2021

Странное поведение анимации transform: rotate3d в React

Есть картинки, на которые применяется эффект при наведении, который должен крутить их при помощи rotate3d в сторону, куда направлен курсор, но на деле получается какая-то просто каша-мала, буду раз любой помощи, спасибо.
import React, { us…
15
Мар
2021

Функция работает, но картинка еле крутится

Есть картинки, которые при наведении должны крутиться по осям x и y, функция вроде как рабочая, но картинки еле крутятся и сразу останавливаются, может быть я чего-то не замечаю?
import React, { useEffect, useState, useRef, useCallback } f…
11
Мар
2021

Анимация JS в качестве фона для блока

Никак не соображу, как поставить анимацию фоном для блока div. При этом, поверх должны располагаться различные объекты (текст, картинка, кнопка). Пробовал z-index-ом, но безуспешно. Ко всему прочему, в идеале, хорошо бы вместо цветового то…
11
Мар
2021

Сумма товара при включенных опциях Opencart

Здраствуйте! Написал скрипты для анимации пересчета суммы на странице товара, при изменении количества. Но если я выбираю опцию и пытаюсь изменить количество товара, то сумма перестает изменятся. В видео я меняю кол-во товара, но при перек…
10
Мар
2021

Не получается корректно анимировать navbar при скролле (position: fixed)

Идея в том, чтобы при прокрутке страницы НИЖЕ высоты окна браузера, nav-меню плавно выезжало сверху и фиксировалось. И наоборот, при прокрутке ВЫШЕ высоты окна браузера, nav-меню плавно уезжало вверх.
Выезжает вниз-то оно нормально, а вот …
10
Мар
2021

Перевод jQuery в ванилла JS

Имеется jQuery анимация, которая в связи с переходом на React перестала работать, подскажите, пожалуйста, как этот код будет выглядеть на чистом JS
$(function () {
var card = $(".anim_pic");

card.on("mousemove", fu…
06
Мар
2021

Как сделать, чтобы текст при использовании textPath был всегда сверху?

Изучаю команду SVG: textPath, которая позволяет разместить текст вдоль криволинейной траектории.
Вот пример из теоретического источника: MDN

<svg viewBox=”0 0 100 100″ xmlns=”http://www.w3.org/2000/svg”>

<!– to hide the pa…
05
Мар
2021

Проблема с анимацией JQuery

картинка почему-то не хочет вращаться при наведении на нижнюю ее часть, соотвественно не опускается вниз, в остальные стороны – все прекрасно, прикладываю ссылку на codepen, спасибо большое за помощь заранее!
https://codepen.io/kgryzlov/pe…
01
Мар
2021

SVG анимация пчелы с SVG.js

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

Изменение текста в HTML через JS

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

Как сделать подобную анимацию кнопки на JS/CSS без использования JQuery [закрыт]

Может быть у кого-то есть опыт создания подобных анимаций, или ссылки на что-то похожее с кодом.
Нужна анимация как здесь

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