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