Параллакс на мобильном телефоне не регулируется - PullRequest
Новая
       21

Параллакс на мобильном телефоне не регулируется

0 голосов
/ 17 ноября 2018

Я установил простой набор параллакс-секций на своей домашней странице, и на моем рабочем столе он отлично работает, даже когда экран уменьшен до размера мобильного телефона.Однако при просмотре на устройстве ios изображение не масштабируется должным образом.На данный момент CSS встроены, а черновик можно найти здесь .Спасибо за любую помощь, которую вы можете предоставить.

CSS 

.parallax {
    height:350px;
}
section.module.parallax-1 {
  background-image: url("https://c0092.paas1.tx.modxcloud.com/assets/img/parallax/parallax_1.jpg");
  background-position: 50% 0;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  /* background-color: rgba(0,123,255,0.4); */
  background-blend-mode: screen;
  }
section.module.parallax-2 {
  background-image: url("https://c0092.paas1.tx.modxcloud.com/assets/img/parallax/parallax_2.jpg");
  background-position: 50% 0;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  /* background-color: rgba(0,123,255,0.4); */
  background-blend-mode: screen;
}
section.module.parallax-3 {
  background-image: url("https://c0092.paas1.tx.modxcloud.com/assets/img/parallax/parallax_3.jpg");
  background-position: 50% 0 !important;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  /* background-color: rgba(0,123,255,0.4); */
  background-blend-mode: screen;
}
  .parallax-container h2 span {
      font-size:100px!important;
      /* color:#f7971e; */
      color:#ffffff;
      position: absolute;
      margin-top:100px;
      text-shadow:1px 1px 10px #000, 1px 1px 10px #000;
  }

HTML 

<section class="module parallax parallax-1" data-type="background" data-speed="10">
                    <div class="parallax-container">
                        <h2 class="mx-auto d-flex justify-content-center"><span>Fitness</span></h2></span>
                    </div>
                </section>

JS 

//parallax js
$(document).ready(function(){
  var $window = $(window);
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object

        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        }); 
    });    
});
...