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

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

0 голосов
/ 30 мая 2018

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

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

$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+'%)');

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

$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+'%)');

Есть ли у кого-то представление о том, как это сделатьэто?

Спасибо!

1 Ответ

0 голосов
/ 30 мая 2018

Попробуйте преобразовать px в% и использовать scaleY ($ {процент / 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

...