Page background gradient change on mouse move

Question

I have a page with a gradient applied on page load via CSS and would like to animate the page alternating the gradient colors and degree (linear-gradient - 4 different colors all degrade to white) on mouse move. If I use only 2 colors it works fine. But I want to get a random color from an array on mouse move but it flickers. Any solution for that?

Here's my Fiddle

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);
});

Try setting a `transition` css rule for your `body`. Something like `transition: background-image 0.5s ease;`. Edit: This is just a suggestion I didnt try it. — VTodorov, Apr 11 '18 at 12:06
I think its normal to flicker, because you change the whole gradiant, I don't really get what you want to achieve, maybe you want some kind of animation? try to sue transition on background. — oma, Apr 11 '18 at 12:06
You're selecting the color in the `mousemove` event, so every time the mouse moves, the color changes, which is a lot. So you want the color to change less often - when? — Ben West, Apr 11 '18 at 12:07
I've tried the transition rule but I think I get the same flickering effect. Yes, if I could change the color only when user moves mouse to corners of the screen would be great. — mjpramos, Apr 11 '18 at 12:18

oma · Answer 1 · 2018-04-11T13:22:55.320

0

I think you need to inlcude jQueryUI and then you can use animate() to change the color. Please check here:

https://jqueryui.com/animate/

So you should use something like this:

 $( "#selector" ).animate({
          backgroundColor: bg
        }, 10 );

edited Apr 11 '18 at 13:22

answered Apr 11 '18 at 12:16

oma

1,804
12
13

https://stackoverflow.com/questions/10963059/jquery-animate-div-background-color-gradient. I'm not pretty sure, animate will do the stuff – Radonirina Maminiaina Apr 11 '18 at 12:21
I just tried to help him:) . not sure 100% that will work. – oma Apr 11 '18 at 12:25
CSS transitions would work just fine here. There's no need to include another library. – jhpratt Apr 11 '18 at 13:36

Marinos An · Accepted Answer · 2018-04-12T13:54:36.363

You can wrap your handler in _.throttle, and play with the millis, until you have an acceptable result.

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);

See: https://jsfiddle.net/g137be71/24/

Update: Actually I had pasted a wrong link. This is for throttle. https://jsfiddle.net/g137be71/82/

Thanks @marinos-an. Your solution is mostly what I was looking for. — mjpramos, Apr 12 '18 at 13:51

Page background gradient change on mouse move

2 Answers2