У меня есть страница с градиентом, применяемым к загрузке страницы через 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);
});
Я думаю, что мерцание - это нормально, потому что вы меняете весь градиент, я действительно не понимаю, чего вы хотите достичь, может, вам нужна какая-то анимация? попробуй подать в суд переход на фон.
Вы выбираете цвет в событии mousemove
, поэтому каждый раз, когда мышь перемещается, цвет меняется, а это очень много. Итак, вы хотите, чтобы цвет менялся реже - когда?
Я пробовал правило перехода, но думаю, что получаю тот же эффект мерцания. Да, было бы здорово, если бы я мог менять цвет только тогда, когда пользователь перемещает мышь в углы экрана.
Я думаю, вам нужно включить jQueryUI, а затем вы можете использовать animate()
для изменения цвета. Пожалуйста, проверьте здесь:
Итак, вы должны использовать что-то вроде этого:
$( "#selector" ).animate({
backgroundColor: bg
}, 10 );
Я просто пытался ему помочь :). не уверен на 100%, что это сработает.
CSS-переходы здесь отлично подойдут. Нет необходимости включать другую библиотеку.
Вы можете обернуть обработчик в _. дроссель и поиграть с миллисами, пока не получите приемлемый результат.
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. Ваше решение - это в основном то, что я искал.
Попробуйте установить правило css
transition
для вашегоbody
. Что-то вродеtransition: background-image 0.5s ease;
. Обновлено: это просто предложение, которое я не пробовал.