0

Tenho um efeito parallax no meu site que aparece em desktop. Só que o mesmo efeito está aparecendo em dispositivos mobile, mas não está legal. Tem como fazer para não aparecer o parallax no mobile ou pelo menos aparecer somente a imagem parada sem o efeito? Agradeço se alguém puder me ajudar. Obrigada!

Meus códigos são esses: 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");   
      }
  })
})

1 Resposta 1

0

Você pode usar uma media rule para desabilitar o fundo fixo (background-attachment: fixed) em resoluções de até 1024px. Coloque no fim do seu CSS:

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

Estou me baseando nesta tabela de dispositivos móveis, onde o maior viewport mostrado é do iPad Pro com 1024x1366 pixels (na vertical). Se você girar o tablet, o viewport horizontal vai virar 1366, o que é uma resolução comum em desktops.

Mas você pode pegar a resolução do iPhone XS Max, que possui 414x896 (o maior da tabela) e colocar 896px em vez de 1024px:

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

Tem o Samsung Galaxy Tab 10, com 800x1280, só que 1280px ainda pode ser considerado uma resolução de desktop (em monitores pequenos, por exemplo), então eu não consideraria 1280px como mobile.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .