Untitled

<!-- footer car animation html code -->
    <style>
      :root {
        --π: 3.14159;
      }
      .progresscar {
        --car-width-px: calc(var(--car-width) * 0.05px);
        position: fixed;
        bottom: 0;
        left: -2px;
        width: var(--car-width-px);
        height: calc(var(--car-width-px) * 2.06);
        background: url("//ms.purplepatch.online/2023/demo/footer-scroller/coke/cap.png") no-repeat center center;
        background-size: 100%;
        --road-length: calc(81vw - var(--car-width-px));
        transform: translateX(
          calc(22.8vw + (var(--scroll-y-1) * var(--road-length)))
        );
      }

      .banner {
        background-image: url("//ms.purplepatch.online/2023/demo/footer-scroller/coke/banner.png?v=1.1");
        background-size: 100% 100%;
        width: 100vw;
        --size: 100vw;
        position: fixed;
        bottom: 0;
        left: 0;
        --car-width-px: calc(var(--car-width) * 0.6px);
        --height: calc(var(--car-width-px) / 3);
        height: var(--height);
        --banner-length: calc(100vw - var(--car-width-px));
        --road-length: calc(100vw - var(--car-width-px));
        clip-path: polygon(
          calc((var(--scroll-y-1) * var(--road-length) + 20vw)) 0,
          /*Top Right */ calc((var(--scroll-y-1) * var(--road-length) + 22.8vw))
            49%,
          /* Top Right Middle */
            calc((var(--scroll-y-1) * var(--road-length) + 22.8vw)) 100%,
          /*Bottom Right */ 0 var(--height),
          /* Bottom Left */ 0 0 /*Top Left*/
        );
      }

      @media (min-width: 670px) {
        .istation_container {
          width: 640px;
          margin: 0 auto;
          padding: 5em 0;
        }
      }
      @media (max-width: 669px) {
        .progresscar {
          --car-width-px: calc(var(--car-width) * 0.11px);
          background: url("cap-mobile.png") no-repeat center center;
          height: calc(var(--car-width-px) / 0.8);
          --road-length: calc(66vw - var(--car-width-px));
          transform: translateX(
            calc(47vw + (var(--scroll-y-1) * var(--road-length)))
          );
        }
        .banner {
          background-image: url("//ms.purplepatch.online/2023/demo/footer-scroller/coke/banner-mobile.png");
          --car-width-px: calc(var(--car-width) * 1px);
          --height: calc(var(--car-width-px) / 2.75);
          height: var(--height);
          --banner-length: calc(100vw - var(--car-width-px));
          --road-length: calc(100vw - var(--car-width-px));
          clip-path: polygon(
            calc((var(--scroll-y-1) * var(--road-length) + 45vw)) 0,
            /*Top Right */ calc((var(--scroll-y-1) * var(--road-length) + 47vw))
              49%,
            /* Top Right Middle */
              calc((var(--scroll-y-1) * var(--road-length) + 47vw)) 100%,
            /*Bottom Right */ 0 var(--height),
            /* Bottom Left */ 0 0 /*Top Left*/
          );
        }
      }
    </style>
    <div class="istation_container">
      <div class="banner"></div>
      <div class="progresscar"></div>
    </div>
    <!-- car animation -->
    <!-- <script src="animation.js"></script> -->
    <script>
      const setCSSProperty = (e, r, o = window.document.documentElement) => {
          o.style.setProperty(e, r);
        },
        reportResponsiveVariable = (e, r, o) => {
          window.addEventListener("resize", () => setCSSProperty(e, r(), o)),
            window.addEventListener("orientationchange", () =>
              setCSSProperty(e, r(), o)
            ),
            setCSSProperty(e, r(), o);
        },
        reportPageScroll =
          ({ direction: e, interpolations: r }) =>
          () => {
            const { scrollTop: o, scrollLeft: t } = document.documentElement;
            setCSSProperty("--scroll-x", t), setCSSProperty("--scroll-y", o);
            const { scrollWidth: n, scrollHeight: i } =
                document.documentElement,
              { innerWidth: l, innerHeight: s } = window;
            setCSSProperty("--scroll-x-1", t / (n - l)),
              setCSSProperty("--scroll-y-1", o / (i - s)),
              r &&
                r.forEach((r, n) => {
                  const {
                    interpolationName: i,
                    interpolated: l,
                    scope: s,
                  } = performInterpolation({
                    interpolation: r,
                    id: n,
                    value: "horizontal" === e ? t : o,
                  });
                  setCSSProperty(i, l, s);
                });
          },
        reportVariable = (...e) => {
          let r, o, t;
          if ("string" == typeof e[0]) {
            if (((r = e[0]), "function" == typeof e[1]))
              return reportResponsiveVariable(r, e[1]);
            if ("object" == typeof e[1]) {
              if (
                ((t = e[1].scope),
                (o = e[1].value),
                "function" == typeof e[1].value)
              )
                return reportResponsiveVariable(r, e[1].value, t);
            } else o = e[1];
            setCSSProperty(r, o, t);
          } else if ("object" == typeof e[0]) {
            if (
              ((r = e[0].name),
              (o = e[0].value),
              (t = e[0].scope),
              "function" == typeof o)
            )
              return reportResponsiveVariable(r, o, t);
            setCSSProperty(r, o, t);
          }
        },
        reportIndex = (
          e,
          {
            indexVariableName: r = "--index",
            rowIndexVariableName: o = "--row-index",
            rowIndexBy: t,
          } = {
            indexVariableName: "--index",
            rowIndexVariableName: "--row-index",
          }
        ) => {
          Array.from(document.querySelectorAll(e)).forEach((e, n) => {
            if ((setCSSProperty(r, n, e), "number" == typeof t)) {
              const r = Math.floor(n / t);
              setCSSProperty(o, r, e);
            }
          });
        },
        reportGlobals = (
          { scroll: e, cursor: r } = { scroll: !0, cursor: !0 }
        ) => {
          if (e) {
            let r = e.interpolations,
              o = e.direction;
            window.addEventListener(
              "scroll",
              reportPageScroll({ direction: o, interpolations: r })
            ),
              window.addEventListener("resize", (e) => {
                reportPageScroll({ direction: o, interpolations: r })(e);
              }),
              reportPageScroll({ direction: o, interpolations: r })();
          }
        };
      reportGlobals({ scroll: true });
      const { min } = Math;
      const innerWidth = () => window.innerWidth;
      reportVariable("--car-width", () => min(innerWidth() / 3, 600));
      reportVariable("--vw", innerWidth);
      // document.querySelector(".progresscar").style.transform="translateX(calc( var(--road-length)/4.32))";
    </script>