Javascript 在Jquery中创建垂直滚动过渡效果

想要获得洞察力和帮助推进插件我开始建立

当然，为了构建与之相同的效果，我们使用translateY在页面上加载某些元素。但是，如果图元在浏览器窗口中的视图中。向下滚动时，其他元素具有相同的效果，向上过渡到位并从不透明度0显示为1

我试图完成的是让选定元素从不透明度0转换为1效果，仅当元素不在视图中时，才通过滚动向上平移。但是，如果由于页面加载的原因，元素已经在视图中，则效果将自动发生，直到您向下滚动以显示更多元素

目前，在我的JS代码中，我正在抓取元素上的数据选择器，并向每个元素应用一个转换延迟和一个CSS类，该类假定是创建效果的类。我有三个变量docHeight、offseter和scrolling，它们被认为可以帮助我创建滚动效果背后的逻辑，但我根本无法集中精力创建效果

这里是一个现场演示在我的小提琴

Hi链接只是为了测试如何切换我拥有的视图中的CSS类

谢谢你的帮助

Javascript

CSS

---

对不起，但你的确切问题是什么？我想你正在开发的类似插件已经存在了。看一看

  var loop = function ScrollTransition( ) {

        var core = function() {

                var i = 100,
                    dataTheme = $('[data-show*="on-scroll"]').not('in-view'),
                    docHeight = $( document ).height(),
                    offSetter = parseInt(dataTheme.offset().top, 10),
                    scrolling = dataTheme.scrollTop();


                    // console.log(h);


                dataTheme.each(function() {  
                    _this = $( this ),
                    _this.css("transition-delay", i + "ms", i += 100);
                });
            },

            initializer = function() {

                if ( el.hasClass('js') && el.hasClass('no-touch') && el.hasClass('csstransitions') ) {
                    core();

                }
            };

            return {
                init:initializer()
            }
    };

loop();




// For testing
var divElements = $('article');
var doc = $( '#hit' );

doc.on("click", function() {

    if( el.hasClass('js') &&  el.hasClass('no-touch') && el.hasClass('csstransitions') ) {
        divElements.toggleClass('in-view');
    }

});

.base {
    width: 300px;
    height:300px;
    background:blue;
    float:left;

}

article {
  margin-right:45px;
  margin-bottom: 40px;
}


/*  starting phase */
.js.no-touch.csstransitions [data-show="on-scroll"] {
    opacity:0;
    -webkit-transform:translate(0,90px);
    -ms-transform:translate(0,90px);
    transform:translate(0,90px);


    -webkit-transition:opacity .6s .1s, -webkit-transform .6s ease;
    transition:opacity .6s .1s, transform .6s ease
}



/*  finishing phase */
.js.no-touch.csstransitions .in-view {
    opacity:1;
    -webkit-transform:translate(0,0);
    -ms-transform:translate(0,0);
    transform:translate(0,0)
}