@
@
@Predaytor2018-07-15 13:00:46
css
@Predaytor, 2018-07-15 13:00:46

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

1 answer(s)
A
Alexander Sharomet, 2018-07-16
@sharomet

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 {
Стили что бы убрать паралакс
}

2:
//Если это не мобильное устройство то инициализируем 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 question

Ask a Question

731 491 924 answers to any question