Изменение градиента фона страницы при перемещении мыши

У меня есть страница с градиентом, применяемым к загрузке страницы через CSS, и я хотел бы анимировать страницу, чередуя цвета градиента и степень (linear-gradient - 4 разных цвета, все переходят в белый цвет) при перемещении мыши. Если я использую только 2 цвета, все работает нормально. Но я хочу получить случайный цвет из массива при перемещении мыши, но он мерцает. Любое решение для этого?

Вот мой Скрипка

var colorArr = ['#dfa7ca', '#f7c2b3', '#bae0f1', '#a6d6cb'];
var grFrom = colorArr[Math.floor(Math.random()*colorArr.length)];
var grTo = '#FFFFFF';

$("body").mousemove(function( e ) {
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  var grFrom = colorArr[Math.floor(Math.random()*colorArr.length)];//get a new random color
  var xy = (x + y) / 8;
  var w = $(this).width(),
  pct = 360*(+e.pageX)/w,
  bg = "linear-gradient(" + xy + "deg,"+grFrom+","+grTo+")";
  $("body").css("background-image", bg);
});

Попробуйте установить правило css transition для вашего body. Что-то вроде transition: background-image 0.5s ease;. Изменить: это просто предложение, которое я не пробовал.

VTodorov 11.04.2018 14:06

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

oma 11.04.2018 14:06

Вы выбираете цвет в событии mousemove, поэтому каждый раз, когда мышь перемещается, цвет меняется, а это очень много. Итак, вы хотите, чтобы цвет менялся реже - когда?

Ben West 11.04.2018 14:07

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

mjpramos 11.04.2018 14:18
4
4
679
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, вам нужно включить jQueryUI, а затем вы можете использовать animate() для изменения цвета. Пожалуйста, проверьте здесь:

https://jqueryui.com/animate/

Итак, вы должны использовать что-то вроде этого:

 $( "#selector" ).animate({
          backgroundColor: bg
        }, 10 );
stackoverflow.com/questions/10963059/…. Я не совсем уверен, Animate все сделает
Radonirina Maminiaina 11.04.2018 14:21

Я просто пытался ему помочь :). не уверен на 100%, что это сработает.

oma 11.04.2018 14:25

CSS-переходы здесь отлично подойдут. Нет необходимости включать другую библиотеку.

jhpratt 11.04.2018 15:36
Ответ принят как подходящий

Вы можете обернуть обработчик в _. дроссель и поиграть с миллисами, пока не получите приемлемый результат.

var colorArr = ['#dfa7ca', '#f7c2b3', '#bae0f1', '#a6d6cb'];
var grFrom = colorArr[Math.floor(Math.random()*colorArr.length)];
var grTo = '#FFFFFF';


var wrapped = _.throttle(function(e){
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  var grFrom = colorArr[Math.floor(Math.random()*colorArr.length)];
  var xy = (x + y) / 8;
  var w = $(this).width(),
  pct = 360*(+e.pageX)/w,
  bg = "linear-gradient(" + xy + "deg,"+grFrom+","+grTo+")";
  $("body").css("background-image", bg);
},50)//Try increasing/decreasing this value to see the differrence


$("body").mousemove(wrapped);

Видеть: https://jsfiddle.net/g137be71/24/

Обновлять: На самом деле я вставил неправильную ссылку. Это для throttle. https://jsfiddle.net/g137be71/82/

Спасибо @ marinos-an. Ваше решение - это в основном то, что я искал.

mjpramos 12.04.2018 15:51

Другие вопросы по теме