2015-05-28 2 views
-3

Вчера я изменил что-то в своем коде, и теперь изображение параллакса прокручивается в противоположном направлении. Я прошел через свои git-коммиты, но не могу понять, почему изображение движется в неправильном направлении. Я использую jquery.parallax-1.1.3.Как изменить направление прокрутки в параллаксе?

Jquery плагин:

/* 
Plugin: jQuery Parallax 
Version 1.1.3 
Author: Ian Lunn 
Twitter: @IanLunn 
Author URL: http://www.ianlunn.co.uk/ 
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/ 

Dual licensed under the MIT and GPL licenses: 
http://www.opensource.org/licenses/mit-license.php 
http://www.gnu.org/licenses/gpl.html 
*/ 

(function($){ 
    var $window = $(window); 
    var windowHeight = $window.height(); 

    $window.resize(function() { 
     windowHeight = $window.height(); 
    }); 

    $.fn.parallax = function(xpos, speedFactor, outerHeight) { 
     var $this = $(this); 
     var getHeight; 
     var firstTop; 
     var paddingTop = 0; 

     //get the starting position of each element to have parallax applied to it 
     $this.each(function(){ 
      firstTop = $this.offset().top; 
     }); 

     if (outerHeight) { 
      getHeight = function(jqo) { 
       return jqo.outerHeight(true); 
      }; 
     } else { 
      getHeight = function(jqo) { 
       return jqo.height(); 
      }; 
     } 

     // setup defaults if arguments aren't specified 
     if (arguments.length < 1 || xpos === null) xpos = "50%"; 
     if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1; 
     if (arguments.length < 3 || outerHeight === null) outerHeight = true; 

     // function to be called whenever the window is scrolled or resized 
     function update(){ 
      var pos = $window.scrollTop(); 

      $this.each(function(){ 
       var $element = $(this); 
       var top = $element.offset().top; 
       var height = getHeight($element); 

       // Check if totally above or totally below viewport 
       if (top + height < pos || top > pos + windowHeight) { 
        return; 
       } 

       $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px"); 
      }); 
     } 

     $window.bind('scroll', update).resize(update); 
     update(); 
    }; 
})(jQuery); 

Моя реализация:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    $('#home').css({'background-attachment': 'scroll'}); 
} else { 
    $('#home').parallax('50%', 0.1); 
} 
+0

И как мы можем понять это, если мы не сможем увидеть ваш код? – chRyNaN

+0

Хорошая точка. Поскольку плагин является открытым исходным кодом и широко популярен, я думал, что люди уже знакомы с ним. Я отредактировал его в своем ответе выше. – maahd

+0

Не код из библиотеки, ваш код, где вы его реализовали. – chRyNaN

ответ

0

Найдено решение. Проблема была в таблице стилей, как я подозревал. Добавлено на мою таблицу стилей:

#home { 
    background-color: #222; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
     background-size: cover; 
    padding: 0; 
} 
Смежные вопросы