水平滚动时淡入屏幕元素

Question

我一直在尝试让元素在水平滚动网站上滚动时淡入。我找到了很多使用 .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);
        });
    });
});

JS 小提琴： http://jsfiddle.net/0mks8eut/1/

我试图产生的效果是本网站上每张卡片的标题之一，当您滚动标题时，每个字符都会淡入： https://at-home.club/

谢谢

Answer 1

试试下面的 sn-p：

更新：

在代码中添加了一些解释

(function () {
  'use strict';
  $(function () {
  
    // this function check if an element is
    // right in window view screen
    function isVisible(el) {
      var $el = $(el),
        above = $el.offset().left - $(window).scrollLeft() + $el.outerWidth() < 0,
        below = $el.offset().left > $(window).outerWidth() + $(window).scrollLeft();
      return !above && !below;
    }

    // this function load your elements by
    // checking the class they have
    // (in this example it is .is-showing) 
    //
    // Note: 
    //   you can specify an animation in
    //   .is-showing css class
    function loadCards() {
      $('.customCard:not(.is-showing)').each(function(i) {
        var card = $(this);

        if (isVisible(card) && !card.hasClass('is-showing')) {
          // the number used in timeout is
          // for load elements with a little
          // delay after each other
          setTimeout(function() {
            card.addClass('is-showing');
          }, 150 * (i + 1));
        }
      });
    }

    // this function is for listening to
    // window's scroll event and call
    // loadCards() function each time
    // to check visible elements and 
    // show them
    $(window).on('scroll', function() {
      loadCards();
    });

    // you should call this function 
    // after page load
    loadCards();
  });
})(jQuery);

body {
  width: 3000px;
}

.customCard {
  width: 100px;
  height: 100px;
  background-color: #eee;
  margin-right: 20px;
  opacity: 0;
  display: inline-block;
}

.is-showing {
  opacity: 1;
  -webkit-transition: all ease 0.6s;
  -moz-transition: all ease 0.6s;
  -ms-transition: all ease 0.6s;
  -o-transition: all ease 0.6s;
  transition: all ease 0.6s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>
<div class="customCard"></div>