沒有配置的好看視差

我需要爲包含視差的客戶端建立一個模板部分。這意味着我不會總是知道該部分最終在頁面上的位置。這產生了一個問題，我的視差的y軸往往是關閉的，因爲我使用的當前視差技術要求我設置開始點和停止點。沒有配置的好看視差

我可以解決這個問題，如果我可以重複設置圖像並設置圖像之間的間距以防止它顯示在該窗口中，那就是說，background-repeat：space;似乎不可調節。

我目前使用的是http://www.franckmaurin.com/blog/the-parallax-effect-with-jquery/有沒有人知道一個解決方案，使視差圖像看起來很棒，當它留給客戶手中或另一種JavaScript技術，會爲我做這個？

謝謝。

$.fn.parallax = function(options){ 
    var $$ = $(this); 
    offset = $$.offset(); 
    var defaults = { 
     'start': 100, 
     'stop': offset.top + $$.height() + 800, 
     'coeff': 0.95 
    }; 
    var opts = $.extend(defaults, options); 
    console.log("Parallax Works!"); 
    return this.each(function(){ 
     $(window).bind('scroll', function() { 
     windowTop = $(window).scrollTop(); 
     if((windowTop >= opts.start) && (windowTop <= opts.stop)) { 
      newCoord = windowTop * opts.coeff; 
      $$.css({ 
      'background-position': '0 '+ newCoord + 'px' 
      }); 
     } 
     }); 
    }); 
    }; 
// //parllax bind 
if ($('.commit').length){ 
    $('.commit').parallax({ 'start': 51 , 'stop':offset.top + $$.height(), 'coeff':-0.65 }); 
}

就代碼而言並沒有太多的展示，這個腳本可能不足以完成這項工作。

來源

2017-05-09 Brendan Jackson

提供一個包含代碼的示例，最好是代碼片段，以便我們可以理解您的問題。 –

不用多說，在類似的情況下，我推薦使用開箱即用的解決方案，如Parallax.JS，它只需要添加一個圖像輸入並且可以廣泛配置。

但是，對於視差效果，不需要JavaScript，因爲它是CSS3的內置功能，使用background-attachment: fixed;。舉一個實際的例子檢查this w3 article。在這種情況下，真正推薦使用此版本僅僅是出於性能方面的原因，因爲CSS是由GPU增強的，而如果寫錯了，JavaScript則不是。在你提供的鏈接上，效果會感覺緩慢和阻塞，相信我，不是我的電腦是問題。

一般而言，總是使用CSS來表現動畫效果和視覺效果，而且在視差方面，您只需要使用這一個命令。

來源

2017-05-09 13:16:14

沒有配置的好看視差

回答

相關問題