Изменить цвет фона по нажатию и перетащите - PullRequest
Новая
       5

Изменить цвет фона по нажатию и перетащите

1 голос
/ 17 января 2020

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

В этом коде желаемый эффект достигается прослушивателем событий mousemove: 

document.addEventListener('mousemove', function(event) {
  var width = window.innerWidth / 255
  var height = window.innerHeight / 255
  var xValue = event.clientX / width;
  var yValue = event.clientY / height;
  document.getElementById("bg").style.backgroundColor = 'rgb(' + yValue + ',' + yValue + ',' + xValue + ')';
});
* {
  padding: 0;
  margin: 0;
}

body {
  background-color: white;
  height: 100vh;
  width: 100%;
}
<body id="bg">
  <div></div>
</body>

Ответы [ 2 ]

1 голос
/ 17 января 2020

Добавьте css transition, если хотите плавного изменения цвета: 

document.addEventListener('click', function(event) {
  var xValue = Math.floor(Math.random() * 256);
  var yValue = Math.floor(Math.random() * 256);
  document.getElementById("bg").style.backgroundColor = 'rgb(' + yValue + ',' + yValue + ',' + xValue + ')';
});
* {
  padding: 0;
  margin: 0;
}

body {
  background-color: white;
  transition: 500ms background;
  height: 100vh;
  width: 100%;
}
<body id="bg">
  <div></div>
</body>
1 голос
/ 17 января 2020

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

.gradient {
  position: relative;
  background-image: linear-gradient(
    to right,
    hsl(211, 100%, 50%),
    hsl(179, 100%, 30%)
  );
  z-index: 1;
  height: 100px;
}

.gradient::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(
    to bottom,
    hsl(344, 100%, 50%),
    hsl(31, 100%, 40%)
  );
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
}

.gradient:hover::before {
  opacity: 1;
}
<div class="gradient"><a href="#">test to verify content remains visible & on top</a></div>
Hover over the element above to fade the background gradient.

<!-- Full write-up at http://keithjgrant.com/posts/2017/07/transitioning-gradients/ --
...