Question

想要获得洞察力并帮助推进我开始构建的插件！

想要构建AKQA.com所具有的相同效果，在页面加载时某些元素转换到位（当然使用translateY）。但是，如果元素在浏览器窗口中可见。向下滚动时，其他元素具有相同的效果，可以向上转换到不透明度0到1。

我想要实现的目标是选择元素从不透明度0转换为1效果仅通过scroll向上转换但是当元素不在视图中时。但是，如果元素已经在视图中（由于页面加载在元素所在的位置），效果将自动发生，直到向下滚动以显示更多元素。

目前在我的JS代码中，我抓住了元素上的数据选择器，并将每个元素应用于转换延迟和CSS类，它们被认为是创建效果的类。我有三个变量docHeight，offSetter和scrolling，它们可以帮助我创建滚动效果背后的逻辑，但我根本无法绕过创建效果。

这是我的小提琴http://jsfiddle.net/coder101/hYS48/1/

中的现场演示

Hi链接仅用于测试切换我拥有的in-view CSS类

感谢您的帮助！

的Javascript

  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');
    }

});

CSS

.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)
}

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

0 个答案: