如何通过水平滚动来淡化div元素的背景图像？

Question

下面是我使用的HTML和CSS代码。

    <div class = "container">
        <div class = "driver">
            <img class = "image" src = "al.jpg" alt = "pp">
            <img class = "image" src = "al.jpg" alt = "pp">
            <img class = "image" src = "al.jpg" alt = "pp">
            <img class = "image" src = "al.jpg" alt = "pp">
            <img class = "image" src = "al.jpg" alt = "pp">
            <img class = "image" src = "al.jpg" alt = "pp">
            <img class = "image" src = "al.jpg" alt = "pp">
            <img class = "image" src = "al.jpg" alt = "pp">
            <img class = "image" src = "al.jpg" alt = "pp">
        </div>
    </div>

.container{
                height:300px;
                width:500px;
                overflow-x:scroll;
                overflow-y:hidden;
                background-image: url("pp.jpg");
                background-attachment:fixed;
                background-repeat: no-repeat;
                background-position:250px 50px;
                background-size:600px 400px;;
            }
            .driver{
                border: 1px solid black;
                margin-left:100px;
                height:200px;
                width:1000px;
                margin-top:50px;
            }
            .image{
                width:100px;
                height:150px;
            }

我正在使用下面的jQuery代码。

$(function(){
                var documentel = $(document),
                    fadelem = $('.container');
                documentel.on('scroll',function(){
                    var currscrollpos = documentel.scrollLeft();
                    fadelem.each(function(){
                        var $this = $(this),
                            elemoffsetleft = $this.offset().left;
                        if(currscrollpos>elemoffsetleft)
                            $this.css('opacity',1-(currscrollpos - elemoffsetleft)/400);
                    });
                });
            });

我希望在将驱动程序div向左右滚动时，.container类中的背景图像应该淡出。我尝试了上面的代码，但不知怎的，它没有做我想要的。任何帮助都会受到赞赏，因为我是jQuery的新手。

Answer 1

使用scrollLeft和offset().left可以在滚动时计算每个div的距离，从而触发动画。

＆＃13;

＆＃13;

var scrollLeft = $('.container').scrollLeft(),
    offsetLeft,
    distance,
    screenW = $(window).width();

//onload
$('img').each(function(){
      offsetLeft = $(this).offset().left
      distance = offsetLeft - scrollLeft;
      if ( distance < screenW / 2 ) {
        $(this).addClass('show');
      }
 })

//onscroll
$('.container').on('scroll',function(){
  scrollLeft = $(window).scrollLeft();
  $('img').each(function(){
      offsetLeft = $(this).offset().left
      distance = offsetLeft -scrollLeft;
      console.log(distance)
      if ( distance < screenW / 2 ) {
        $(this).addClass('show');
      } else {
        $(this).removeClass('show');
      }
  })
})

＆＃13;

.container{
  width: 100%
  height: 100vh;
  overflow: auto;
}
.driver{
  white-space: nowrap;
}
img{
  height: 100%;
  display: inline-block;
  opacity:0;
}

img.show{
  transition: 2s;
  -webkit-transition: 2s;
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
    <div class = "driver">
        <img class = "image" src = "https://cdn.stocksnap.io/img-thumbs/960w/8FTCR0NNQY.jpg" alt = "pp">
        <img class = "image" src = "https://cdn.stocksnap.io/img-thumbs/960w/8FTCR0NNQY.jpg" alt = "pp">
        <img class = "image" src = "https://cdn.stocksnap.io/img-thumbs/960w/8FTCR0NNQY.jpg" alt = "pp">
        <img class = "image" src = "https://cdn.stocksnap.io/img-thumbs/960w/8FTCR0NNQY.jpg" alt = "pp">
        <img class = "image" src = "https://cdn.stocksnap.io/img-thumbs/960w/8FTCR0NNQY.jpg" alt = "pp">
        <img class = "image" src = "https://cdn.stocksnap.io/img-thumbs/960w/8FTCR0NNQY.jpg" alt = "pp">
        <img class = "image" src = "https://cdn.stocksnap.io/img-thumbs/960w/8FTCR0NNQY.jpg" alt = "pp">
        <img class = "image" src = "https://cdn.stocksnap.io/img-thumbs/960w/8FTCR0NNQY.jpg" alt = "pp">
        <img class = "image" src = "https://cdn.stocksnap.io/img-thumbs/960w/8FTCR0NNQY.jpg" alt = "pp">
    </div>
 </div>

＆＃13;

＆＃13;

＆＃13;