Answer the question
In order to leave comments, you need to log in
Parallax problem. How to remove the effect on the mob. devices (make touch scrolling)?
Found a nice clean way to parallax at https://www.okgrow.com/posts/css-only-parallax
But on mob. devices by itself disappears (inert and smooth) scroll. Can be solved with the -webkit-overflow-scrolling: touch property. But the positioning of the image behaves strangely, when scrolling up, other parts of the (hidden for some reason) image appear, the content from the bottom disappears.
You can just remove all the values back in media. There will be no parallax, everything is fine. But how to do it only on the mob. devices, not screen resolution?
//Parallax Sass syntax
.MainContainer
perspective: 1px
transform-style: preserve-3d
height: 100vh
overflow-x: hidden
overflow-y: scroll
.ParallaxContainer
display: block
position: relative
height: 100vh
width: 100vw
transform: translateZ(-1px) scale(2)
z-index: -1
background-image: url(overwatch.jpg)
background-size: cover
background-position: center
background-repeat: no-repeat
.ContentContainer
display: block
position: relative
background-color: white
z-index: 1
padding: 10%
<div class="MainContainer">
<div class="ParallaxContainer"></div>
<div class="ContentContainer">
<div class="Content">
lorem80
</div>
</div>
</div>
Answer the question
In order to leave comments, you need to log in
If you are not satisfied with media requests, then you can
1. use javascript(jquery) to check which device (OS or browser type), if it is a mobile device, then add a class to the body and bind to it already.
2. If parallax is added using js, then just check which device and initialize your parallax plugin.
one:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('body').addClass('mobile');
}
body.mobile {
Стили что бы убрать паралакс
}
//Если это не мобильное устройство то инициализируем parallax
if(! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('.parallax').initFunction();
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question