<div class="section-amb">
  <img src="https://www.koneksi.co/img/background-new.webp" class="img-amb amb-left">
</div>
<div class="section-amb">
  <img src="https://www.koneksi.co/img/background-new.webp" class="img-amb amb-right">
</div>
<div class="section-amb">
  <img src="https://www.koneksi.co/img/background-new.webp" class="img-amb amb-left">
</div>

*{padding:0;margin:0}
.section-amb{background-color:#000;height:100vh;border-bottom:1px solid #fff}

.img-amb{
  width:40vw;
  position:absolute;
  &.amb-right{right:0}
}

// JavaScript to scale, rotate, and translate .img-amb based on scroll position within its parent section

// Function to calculate the scaling factor based on scroll position
function calculateScale(section, scrollY) {
    const rect = section.getBoundingClientRect();
    const sectionHeight = rect.height;
    const sectionTop = scrollY + rect.top;

    const progress = Math.min(
        Math.max((scrollY - sectionTop) / sectionHeight, 0),
        1
    );

    return 1 - (0.8 * progress); // Scale from 1 to 0.2
}

// Function to calculate the rotation angle based on scroll position
function calculateRotate(section, scrollY) {
    const rect = section.getBoundingClientRect();
    const sectionHeight = rect.height;
    const sectionTop = scrollY + rect.top;

    const progress = Math.min(
        Math.max((scrollY - sectionTop) / sectionHeight, 0),
        1
    );

    return 90 * progress; // Rotate from 0deg to 30deg
}

// Function to calculate the translation value based on scroll position
function calculateTranslateY(section, scrollY) {
    const rect = section.getBoundingClientRect();
    const sectionHeight = rect.height;
    const sectionTop = scrollY + rect.top;

    const progress = Math.min(
        Math.max((scrollY - sectionTop) / sectionHeight, 0),
        1
    );

    return 60 * progress; // TranslateY from 0% to 50%
}

// Select all .section-amb elements
const sections = document.querySelectorAll('.section-amb');

// Listen to scroll events
window.addEventListener('scroll', () => {
    const scrollY = window.scrollY || window.pageYOffset;

    sections.forEach(section => {
        const img = section.querySelector('.img-amb');

        // Calculate the transform properties based on the scroll position
        const scale = calculateScale(section, scrollY);
        const rotate = calculateRotate(section, scrollY);
        const translateY = calculateTranslateY(section, scrollY);

        // Apply the scaling, rotation, and translation transforms
        img.style.transform = `scale(${scale}) rotate(${rotate}deg) translateY(${translateY}%)`;
        img.style.transition = 'transform 0.1s linear';
    });
});