JSFiddle - React, Tailwind, and code Playground

HTML

<div class='a'></div>

<div class="section1"></div>

CSS

div.a {
border-radius: 60px;
width: 50px;
height:50px;
background-color:white;
position:fixed;
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    
}

.section1 {
  height: 2000px;
  background-color: rgb(233, 226, 223)
}

body {
 background-image: url("https://www.culturepartnership.eu/upload/news/5595405438afd.jpg");
 background-color: #cccccc;
}

JavaScript

$(document).ready(function() {
  animateDiv();

});

function makeNewPosition() {

  // Get viewport dimensions (remove the dimension of the div)
  var h = $(window).height() - 50;
  var w = $(window).width() - 50;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];

}

function animateDiv() {
  var newq = makeNewPosition();
  var oldq = $('.a').offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);

  $('.a').animate({
    top: newq[0],
    left: newq[1]
  }, speed, function() {
    animateDiv();
  });

};

function calcSpeed(prev, next) {

  var x = Math.abs(prev[1] - next[1]);
  var y = Math.abs(prev[0] - next[0]);

  var greatest = x > y ? x : y;

  var speedModifier = 0.05;

  var speed = Math.ceil(greatest / speedModifier);

  return speed;

}

const [red, green, blue] = [233, 226, 223]
const section1 = document.querySelector('.section1')

window.addEventListener('scroll', () => {
  const y = 1.5 + (window.scrollY || window.pageYOffset) / 150
  const [r, g, b] = [red / y + 26, green / y + 29, blue / y + 20].map(Math.round)
  section1.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
})