Stellar Parallax для запуска на рабочем столе, статичное изображение на мобильном устройстве

Question

Мой сайт использует Stellar.js для создания эффекта параллакса на ряде изображений, которые покрывают ширину экрана пользователя. Звездная прокрутка по изображению с половиной скорости, пользователь прокручивает страницу вниз, создавая хороший эффект. Я изначально использовал этот код:

MY CSS FILE
/* Separator About - Parallax Section */
.sep {
 background-attachment: fixed!important;
 background-position: 50% 0!important;
 background-repeat: no-repeat!important;
 width: 100%!important;
 height: 180px!important;
 position: relative!important;
 -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
.about {
background-image: url(../img/about-sep.jpg);

MY HTML FILE
<! -- ABOUT SEPARATOR -->
 
 
    <div class="sep about" data-stellar-background-ratio="0.5"></div>
 </div>
    </div>


 <script src="assets/js/jquery.stellar.min.js"></script>

<script>
   
  $(function(){
   $.stellar({
    horizontalScrolling: false,
    verticalOffset: 40
   });
  });
  </script>
</body>

Я обнаружил, что если я изменю фоновое вложение с фиксированного на прокрученное, эффект параллакса будет работать как на рабочем столе, так и на ios. Хотя это немного изменчиво на ios, и его сложно настроить, когда пользователь переключается между альбомным и портретным режимами. По этой причине - сделал звездный отзывчивый, что, похоже, поможет. Новый код:

//JAVASCRIPT

$(function(){
   $.stellar({
    horizontalScrolling: false,
    // Refreshes parallax content on window load and resize
  responsive: true,
     verticalOffset: 40
   });
  });

//CSS
.sep {
 background-attachment: scroll;
 background-position: 50% 0;
 background-repeat: no-repeat;
 height: 180px;
 position: relative;
 -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 
}
.about {
background-image: url(../img/about-sep.jpg);

//HTML

<div class="sep about" data-stellar-background-ratio="0.5"></div>
 </div>
    </div>

Если я решу, что это слишком изменчиво / непредсказуемо для мобильных устройств - я мог бы добавить этот код в свой JavaScript:

// Stellar Parallax Script
  var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
  
  
  if( !isMobile.any() )
$(function(){
   $.stellar({
    horizontalScrolling: false,
    // Refreshes parallax content on window load and resize
  responsive: true,
     verticalOffset: 40
   });
  });

Этот код успешно дает мне статическое изображение с такими же размерами на мобильном устройстве и дает эффект прокрутки параллакса на настольных компьютерах.

Answer 1

Прежде всего, большое спасибо за то, что поделились своим кодом! У меня были действительно плохие времена, когда я пытался это исправить, а ты мне помог. Я просто хотел поделиться тем, что я использовал, чтобы избежать отставания, используя "прокрутку" вместо "фиксированной"... это сработало для меня, идеальный параллакс на рабочем столе с использованием stellar.js и исправление img на мобильных устройствах и устройствах. Надежда может быть полезной!

<script>
var isMobile = {
                Android: function() {
                    return navigator.userAgent.match(/Android/i);
                },
                BlackBerry: function() {
                    return navigator.userAgent.match(/BlackBerry/i);
                },
                iOS: function() {
                    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
                },
                Opera: function() {
                    return navigator.userAgent.match(/Opera Mini/i);
                },
                Windows: function() {
                    return navigator.userAgent.match(/IEMobile/i);
                },
                any: function() {
                    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
                }
            };

            $(document).ready(function() {
                if (isMobile) {
                    $(".section1Paral").css("background-attachment", "scroll");
                };
            });

            if( !isMobile.any() )
                $(function(){
                        $.stellar({
                            horizontalScrolling: false,
                            // Refreshes parallax content on window load and resize
                            responsive: true,
                            verticalOffset: 40
                        });
            });
</script>