Javascript 水平滚动时屏幕上的淡入元素

我一直试图让元素在水平滚动网站上滚动时淡入。我已经找到了很多使用.scrollTop和计算元素位置的示例，但是当切换到水平滚动时，我无法实现这一点

如何使用水平滚动位置计算元素在屏幕上的时间，然后在其可见时设置动画

我尝试过的代码：

$(document).ready(function() {
    var winW = parseInt($( window ).width());
    var winH = parseInt($( window ).height());
   
    $( window ).scroll(function() {
        var scrollX = parseInt($(window).scrollLeft());
        var scrollY = parseInt($(window).scrollTop());
        
        $( ".box" ).each(function(){
            var boxOffset = $(this).offset();
            var boxX = parseInt(boxOffset.left);
            var boxY = parseInt(boxOffset.top);
            
            // vertically calculated
            var new_opacity = 1-((boxY-scrollY)/winH);
            
            // horizontally calculated
             //var new_opacity = 1-((boxX-scrollX)/winW);
            
            new_opacity = (new_opacity<0)? 0: new_opacity;
            new_opacity = (new_opacity>1)? 1: new_opacity;
            $(this).css({'opacity': new_opacity});
            // $(this).text(new_opacity);
        });
    });
});

$（文档）.ready（函数（）{
var winW=parseInt（$（window.width（））；
var winH=parseInt（$（window.height（））；
$（窗口）。滚动（函数（）{
var scrollX=parseInt（$（窗口）.scrollLeft（））；
var scrollY=parseInt（$（window.scrollTop（））；
$（“.box”）。每个（函数（）{
var-boxOffset=$（this.offset（）；
var boxX=parseInt（boxOffset.left）；
var-boxY=parseInt（boxOffset.top）；
//垂直计算
var new_opacity=1-（（方形卷轴）/winH）；
//水平计算
//var new_opacity=1-（（boxX scrollX）/winW）；
新不透明度=（新不透明度1）？1：新不透明度；
$（this.css（{'opacity'：new_opacity}）；
//$（此）.text（新的不透明度）；
});
});
});

JS小提琴：

我试图产生的效果是，当您在标题中滚动每个角色时，该网站上每张卡片的标题都会消失：

谢谢

请尝试下面的片段：

更新：

在代码中添加了一些解释

（函数（）{
"严格使用",；
$（函数（）{
//此函数用于检查元素是否正确
//窗口视图屏幕中的右键
功能可见（el）{
变量$el=$（el），
上方=$el.offset（）.left-$（窗口）.scrollLeft（）+$el.outerWidth（）<0，
Lower=$el.offset（）.left>$（窗口）.outerWidth（）+$（窗口）.scrollLeft（）；
返回！在上面&！在下面；
}
//此函数通过以下方式加载元素：
//检查他们的课程
//（在本例中，显示为.）
//
//注:
//可以在中指定动画
//.正在显示css类
函数loadCards（）{
$（'.customCard:not（.is showing'）。每个（函数（i）{
var卡=$（此）；
if（isVisible（card）和&！card.hasClass（'is-showing'））{
//超时中使用的数字为
//对于带有少量
//互相拖延
setTimeout（函数（）{
card.addClass（'is-showing'）；
}，150*（i+1））；
}
});
}
//此功能用于收听
//窗口的滚动事件和调用
//每次执行loadCards（）函数
//检查可见元素和
//给他们看
$（窗口）.on（'scroll'，function（）{
加载卡（）；
});
//你应该调用这个函数
//页面加载后
加载卡（）；
});
})（jQuery）
正文{
宽度：3000px；
}
.海关卡{
宽度：100px；
高度：100px；
背景色：#eee；
右边距：20px；
不透明度：0；
显示：内联块；
}
.正在放映{
不透明度：1；
-webkit过渡：全部轻松0.6s；
-moz转换：所有的易用0.6s；
-ms转换：均为0.6s；
-o型过渡：均为0.6s；
过渡：均为0.6s；
}

使用
.scrollLeft
而不是
.scrollTop
。谢谢！这很有效，现在对我来说更有意义。