模仿视差效果

Question

最近我一直在努力实现视差效果，并使其在移动版本中也有效。我的代码的结构所看到如下

<section class="parallax fullscreen-js"> 
    <div class="section-inner"> 
    <div class="section-background" id="background-four"></div> 
    <div class="section-content"> 
     <h1 class="head-title">Web & Mobile Solutions</h1> 
    </div> 
    </div> 
</section> 
<section class="parallax fullscreen-js"> 
    <div class="section-inner"> 
    <div class="section-background" id="background-five"></div> 
    <div class="section-content"> 
     <h1 class="head-title">Web & Mobile Solutions</h1> 
    </div> 
    </div> 
</section> 

它的其余部分是在这个小提琴：https://jsfiddle.net/ksna2hae/1/

同时，我碰到一个网站谁整齐地实现了它和它的作品在移动真的很好，以及。该网站的链接是： http://www.elespacio.net但是，由于我没有在jQuery或Javascript中拥有先进的知识，并且无法确定如何构建所需的接口，因此一直在进行着许多努力。以下是我与脚本的距离。

var windowHeight = $(document).height(); 
    var windowWidth = $(document).width(); 
    var didScroll; 
    var lastScrollTop = 0; 
    $(".page-index .fullscreen-js").css({ 
    'height': windowHeight, 
    'width': windowWidth 
    }); 
    $(".page-index > div").each(function(i) { 
    $(this).css({ 
     'z-index': (i + 1) 
    }); 
    }); 
    $(".parallax:nth-child(2) .section-inner").css({ 
    "transform": "translate3d(0, " + windowHeight + "px, 0)" 
    }) 


    var inner = $('section .section-inner'); 
    inner.not('section .section-inner:first, section:nth-child(2) .section-inner').css({ 
    'visibility': 'hidden', 
    "transform": "translate3d(0, 0, 0)" 
    }); 
    var didScroll; 
    var lastScrollTop = 0; 
    var delta = 5; 
    // var navbarHeight = $('header').outerHeight(); 

    $(window).scroll(function(event) { 
    didScroll = true; 
    }); 
    setInterval(function() { 
    if (didScroll) { 
     hasScrolled(); 
     didScroll = false; 
    } 
    }, 250); 

    function hasScrolled() { 
    var st = $(this).scrollTop(); 
    // Make sure they scroll more than delta 
    if (Math.abs(lastScrollTop - st) <= delta) 
     return; 
    if (st > lastScrollTop) { 
     // Scroll Down 
     $(".parallax:nth-child(2) .section-inner").css({ 
     "transform": "translate3d(0, " + -windowHeight + "px, 0)" 
     }) 
     console.log('Window has Scrolled Down'); 
    } else { 
     // Scroll Up 
     if (st + $(window).height() < $(document).height()) { 
     console.log('Window has Scrolled Up'); 
     } 
    } 
    lastScrollTop = st; 
    } 

我愿意做的是，当我滚动可见div.section-inner获取的由我们滚动量减少的transform3d Y值，并在同一时间值被添加到其兄弟div.section-inner

基本上，同时滚动我们逐渐隐藏屏幕上的div，并通过增加Y-value of transform3D的值来揭示下一个.section-inner。

我试过不同的视差插件，如视差js，恒星js和scrollorama但没有工作。不过，在开始分析上述链接的代码时，我意识到有一种方法可以欺骗移动设备上发生的故障，并且它可以模仿视差效果。在同一时间，它将解决许多未来在移动平台上进行视差滚动的问题。

在此先感谢！如果我想

Answer 1

我有点挣扎，了解你正在试图做的......你离开http://www.elespacio.net的链接似乎并没有带任何视差元件的...

一般做一些视差。 （使用JQuery）我将采用滚动顶端值，然后通过某个因素移动元素。

$(window).scroll(function() { 
    wScroll = $(this).scrollTop(); 

    $('.moveable').css({ 
     'transform' : 'translate(0px, '+ wScroll /50 +'%)' 
    }); 

    }); 

这里作为用户滚动，object.moveable将以该速度的50％垂直移动。 translate(x-axis, y-axis)。

正如我所说，我不是100％确定你想做什么！但这是一种简单的视差方式！但我确定这也可以在手机上使用。