正如标题中提到的，我正试图改变滚动的背景图像，并轻松地添加一个漂亮的过渡。
背景图像应该是固定的，并保持在适当的位置。内容是移动的。
有什么想法吗？
我设法改变了图像，但过渡不起作用。

<script>
document.addEventListener('DOMContentLoaded', function () {
    var backgroundContainer = document.querySelector('.background-container');

    // Add more images if you like.
    var backgroundImages = ['image1.jpg', 'image2.jpg'];

    var currentImageIndex = 0;

    // Set first background image
    backgroundContainer.classList.add('background-image-1');

    window.addEventListener('scroll', function () {
        // Check if you have scrolled to the top.
        var scrolledToTop = window.scrollY === 0;

        // Change backgroundclass
        if (scrolledToTop) {
            currentImageIndex = 0;
            backgroundContainer.classList.remove('background-image-2');
            backgroundContainer.classList.add('background-image-1');
        } else {
            currentImageIndex = 1;
            backgroundContainer.classList.remove('background-image-1');
            backgroundContainer.classList.add('background-image-2');
        }
      
    backgroundContainer.style.transition = 'background-image 1.5s ease';      
    });
});

</script>

字符串