模仿視差效果

最近我一直在努力實現視差效果，並使其在移動版本中也有效。我的代碼的結構所看到如下模仿視差效果

<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但沒有工作。不過，在開始分析上述鏈接的代碼時，我意識到有一種方法可以欺騙移動設備上發生的故障，並且它可以模仿視差效果。在同一時間，它將解決許多未來在移動平臺上進行視差滾動的問題。

在此先感謝！如果我想

來源

2015-09-04 Arbias Gjoshi

我有點掙扎，瞭解你正在試圖做的......你離開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％確定你想做什麼！但這是一種簡單的視差方式！但我確定這也可以在手機上使用。

來源

2016-05-08 18:05:26

模仿視差效果

回答

相關問題