K80 K80 - 7 months ago 17
HTML Question

Change gradient color on refresh but keep cursor position element active?

I have the cursor position and gradient working but can't seem to figure out how to make the gradient color change while the cursor position element is still working.

I'm trying to have the gradient color change on each refresh, selecting from an array. Here's what it is now:

http://jsfiddle.net/trktqqh6/3/



$(".gradient").mousemove(function( event ) {
var w = $(this).width(),
pct = 360*(+event.pageX)/w,
bg = "linear-gradient(" + pct + "deg,#4ac1ff,#795bb0)";
$(".gradient").css("background-image", bg);
});

html {
height: 100%;
}
body {
background-color: #292c2f;
font-family: monospace;
overflow: hidden;
}
.gradient {
height: calc(100% - 70px);
background-image: -webkit-linear-gradient(270deg, #4ac1ff, #795bb0);
background-image: -moz-linear-gradient(270deg, #4ac1ff, #795bb0);
background-image: -o-linear-gradient(270deg, #4ac1ff, #795bb0);
background-image: -ms-linear-gradient(270deg, #4ac1ff, #795bb0);
background-image: linear-gradient(180deg, #4ac1ff, #795bb0);
position: absolute;
width: 100%;
}
header {
background: #252525;
height: 70px;
line-height: 70px;
}
#currentVal {
color: #424242;
font-size: 14px;
font-weight: 800;
padding-left: 240px;
}
#currentVal span {
color: #ccc;
}
#range {
width: 180px;
border: 0;
height: 4px;
background: #424242;
outline: none;
position: absolute;
left: 30px;
top: 32px;
}
#range .ui-slider-handle {
position: absolute;
margin: 0px 0 0 -7px;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #fff;
border: 0;
height: 14px;
width: 14px;
outline: none;
cursor: pointer;
}
#range .ui-slider-handle:hover,
#range .ui-slider-handle:focus {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
#range .ui-slider-range {
background: #4ac1ff;
}

<div class="gradient"></div>




Answer

This is rather simple to create. Just have an array of colors, use a random number generation method, pick the colors corresponding to the random number from the array, set it to the gradient and assign it to the element.

$(document).ready(function() {
  var colors = [
    ["red", "yellow"],
    ["blue", "aqua"],
    ["chocolate", "brown"],
    ["steelblue", "lavender"]
  ];
  var num = Math.round(Math.random() * 3);
  bg = "linear-gradient(180deg," + colors[num][0] + "," + colors[num][1] + ")";
  $(".gradient").css("background-image", bg);

  $(".gradient").mousemove(function(event) {
    var w = $(this).width(),
      pct = 360 * (+event.pageX) / w,
      bg = "linear-gradient(" + pct + "deg," + colors[num][0] + "," + colors[num][1] + ")";
    $(".gradient").css("background-image", bg);
  });
});
html {
  height: 100%;
}
body {
  background-color: #292c2f;
  font-family: monospace;
  overflow: hidden;
}
.gradient {
  height: calc(100% - 70px);
  background-image: -webkit-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -moz-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -o-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -ms-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: linear-gradient(180deg, #4ac1ff, #795bb0);
  position: absolute;
  width: 100%;
}
header {
  background: #252525;
  height: 70px;
  line-height: 70px;
}
#currentVal {
  color: #424242;
  font-size: 14px;
  font-weight: 800;
  padding-left: 240px;
}
#currentVal span {
  color: #ccc;
}
#range {
  width: 180px;
  border: 0;
  height: 4px;
  background: #424242;
  outline: none;
  position: absolute;
  left: 30px;
  top: 32px;
}
#range .ui-slider-handle {
  position: absolute;
  margin: 0px 0 0 -7px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #fff;
  border: 0;
  height: 14px;
  width: 14px;
  outline: none;
  cursor: pointer;
}
#range .ui-slider-handle:hover,
#range .ui-slider-handle:focus {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#range .ui-slider-range {
  background: #4ac1ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient"></div>

Comments