const oldScale = 50;
const bike = document.querySelector(".bike");
const bikeScheme = document.querySelector(".tire_scheme");

const scrollEvent = () => {
  const responsiveHeigth = Math.floor(
    document.documentElement.clientHeight / 2
  );
  if (myObject.globalHeightPercentage <= 10) {
    const bikeTires = document.querySelector(".bike_tires");
    bikeTires.style.opacity = "100%";
  }
  if (
    myObject.globalHeightPercentage >= 10 &&
    myObject.globalHeightPercentage <= 20
  ) {
    const bikeTires = document.querySelector(".bike_tires");

    const range = 20 - 10; //zakres wartości
    const scaledValue = (myObject.globalHeightPercentage - 10) / range;
    const invertedScaledValue = 1 - scaledValue;
    const nonInvertedScaledValue = scaledValue;
    const scale = invertedScaledValue * 100;
    const scaleNonInvert = nonInvertedScaledValue * 100;
    const angle = scaledValue * 720;

    bikeTires.style.opacity = `${scale}%`;
  }
  if (myObject.globalHeightPercentage >= 20) {
    const bikeTires = document.querySelector(".bike_tires");
    bikeTires.style.opacity = "0%";
  }
};

const raportOffSet = () => {
  console.log(`pozycja strony to :${myObject.globalHeightPercentage}%`);
};

const scrollPenrcentage = () => {
  const pscrollPosition = window.scrollY;
  const windowHeight =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  const percentage = (pscrollPosition / windowHeight) * 100;
  const heightPercentage = Math.floor(percentage);
  window.myObject = {};
  window.myObject.globalHeightPercentage = heightPercentage;
  //  console.log(document.documentElement.clientWidth)
  raportOffSet();
  scrollEvent();
};
scrollPenrcentage();

const pagePosition = myObject.globalHeightPercentage;

window.addEventListener("scroll", scrollPenrcentage);