Анимация одного градиента CSS в другой с помощью JavaScript

Я хочу анимировать градиент к другому градиенту. Вот мой Codepen: https://codepen.io/EYT/pen/YvPEVQ. Я использовал расстояние мыши в качестве переменной для анимации градиента вверх.

Этот градиент должен быть отправной точкой, и он не должен опускаться ниже этого (что происходит в тот момент, когда указатель мыши находится на расстоянии больше 300 пикселей):

$element.css('background', 'linear-gradient(0deg, rgba(255, 66, 42, 1) '+(300-distance)/2+'%, rgba(217, 60, 40, 1) '+(305.24-distance)/2+'%, rgba(174, 54, 39, 1) '+(312.1-distance)/2+'%, rgba(136, 48, 37, 1) '+(319.52-distance)/2+'%, rgba(104, 44, 36, 1) '+(327.42-distance)/2+'%, rgba(78, 40, 35, 1) '+(335.92-distance)/2+'%, rgba(58, 37, 34, 1) '+(345.26-distance)/2+'%, rgba(44, 35, 33, 1) '+(355.86-distance)/2+'%, rgba(35, 33, 33, 1) '+(368.84-distance)/2+'%, rgba(33, 33, 33, 1) '+(390.96-distance)/2+'%)');

и по пути к элементу на расстоянии 100 пикселей он должен быть анимирован для этого градиента:

$element.css('background', 'linear-gradient(0deg, rgba(255, 66, 42, 1) '+(300-distance)/2+'%, rgba(217, 60, 40, 1) '+(325.24-distance)/2+'%, rgba(174, 54, 39, 1) '+(352.1-distance)/2+'%, rgba(136, 48, 37, 1) '+(379.52-distance)/2+'%, rgba(104, 44, 36, 1) '+(407.42-distance)/2+'%, rgba(78, 40, 35, 1) '+(435.92-distance)/2+'%, rgba(58, 37, 34, 1) '+(465.26-distance)/2+'%, rgba(44, 35, 33, 1) '+(495.86-distance)/2+'%, rgba(35, 33, 33, 1) '+(528.84-distance)/2+'%, rgba(33, 33, 33, 1) '+(570.96-distance)/2+'%)');

Есть у кого-нибудь идеи, как это сделать?

Спасибо!

javascript css animation gradient

30.05.2018 20:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Попробуйте преобразовать пиксели в% и используйте scaleY ($ {percent / 100)})

Это пример, но вам придется адаптировать его под свои нужды:

(function() {
    var element = document.getElementById("element");
    var onMouseMove = function(evt) {
      const percent = ((evt.clientY / document.documentElement.scrollHeight) * 100);
      element.style.transform = `scaleY(${(percent / 100)}`;

    }
    document.addEventListener('mousemove', onMouseMove);
})();

https://codepen.io/anon/pen/rKadWB?editors=1111

Спасибо за демонстрацию и за вашу помощь, но у меня это не так тихо. Думаю, мне нужно найти другой способ добиться этого эффекта.

— 30.05.2018 22:47

30.05.2018 20:43