Take effect Parallax cell phone

Question

I have a Parallax effect on my website that appears on desktop. Only the same effect is appearing on mobile devices, but it’s not cool. Is there any way to make sure that Parallax doesn’t appear on mobile or at least only the still image doesn’t have the effect? Thank you if anyone can help me. Thank you!

My codes are these: index.html

<section class="module parallax parallax-1 mt-5" data-type="background" data-speed="10">
  <div class="parallax-container">
    <h4 class="text-center text-white">Conheça nossa loja!</h4>
  </div>
</section>

custom css.

.parallax-container {
    max-width: 160px;
    margin: 0 auto;
  }




  section.module:last-child {
    margin-bottom: 0;
  }
  section.module h2 {
    margin-bottom: 40px;
    font-family: "Roboto Slab", serif;
    font-size: 30px;
  }
  section.module p {
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: 300;
  }
  section.module p:last-child {
    margin-bottom: 0;
  }
  section.module.content {
    padding: 40px 0;
    background-color: rgba(207,216,220,0.5);
  }
  section.module.content:last-child {
    margin-bottom: 60px;
  }
  section.module.parallax {
    padding: 75px 0;
    background-position: 0 0;
  }


  section.module.parallax-1 {
    background-image: url('../img/parallax1.jpg');
    background-position: 50% 0;
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: rgba(0,123,255,0.1);
    background-blend-mode: screen;
  }


  section.module.parallax-3 {
    background-image: url('../img/parallax2.jpg');
    background-position: 50% 0;
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: rgba(0,123,255,0.1);
    background-blend-mode: screen;
  }


  @media all and (min-width: 600px) {
    section.module h2 {
      font-size: 42px;
    }
    section.module p {
      font-size: 20px;
    }
    section.module.parallax {
      padding: 90px 0;
    }
    section.module.parallax h1 {
      font-size: 96px;
    }
  }
  @media all and (min-width: 960px) {
    section.module.parallax h1 {
      font-size: 160px;
    }
  }

custom 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 });
        }); 
    });    
});

//menu transition js
$(document).ready(function(){
  $(window).scroll(function(){
    var scroll = $(window).scrollTop();
          if (scroll > 0) {
        $(".navbar").addClass("navbar-scroll");
        }
          else{
          $(".navbar").removeClass("navbar-scroll");    
      }
      if (scroll > 200) {
        $(".navbar").addClass("bg-primary");
      }

      else{
          $(".navbar").removeClass("bg-primary");   
      }
  })
})

Answer 1

You can use a media Rule to disable the fixed background (background-attachment: fixed) at resolutions up to 1024px. Put at the end of your CSS:

@media all and (max-width: 1024px) {
  section.module.parallax-1{
     background-attachment: scroll;
  }
}

I’m basing myself on in this table from mobile devices, where the largest viewport shown is the iPad Pro with 1024x1366 pixels (vertically). If you rotate the tablet, the horizontal viewport will flip 1366, which is a common resolution on desktops.

But you can take the resolution of iPhone XS Max, which has 414x896 (the largest in the table) and put 896px instead of 1024px:

@media all and (max-width: 896px) {
  section.module.parallax-1{
     background-attachment: scroll;
  }
}

It has the Samsung Galaxy Tab 10, with 800x1280, only 1280px can still be considered a desktop resolution (on small monitors, for example), so I wouldn’t consider 1280px as mobile.