I implemented the tool as per the instructions at https://pixelcog.github.io/parallax.js/ (also watched a YouTube tutorial on it before that). It works perfectly on desktop sites (and shows graceful degradation on iOS devices as expected). However, it does not display the parallax effect on Android devices even after I add the attribute and value data-android-fix="false" to the relevant div element. What could be the reason? (See the table on the page linked above for explanation of how this flag works).
I have tested this on a Nokia 2.2 Android device. Some online emulators of other Android devices also seem to show the same problem. Sharing a code snippet below, please scroll to see the effect. Look forward to your responses!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<style>
.parallax-window {
min-height: 150px;
background: transparent;
display: flex;
flex-direction: column;
justify-content: center;
color: yellow;
border: red 2px solid;
text-align: center;
}
.overlay-text {
z-index: 2;
position: relative;
background: black;
width: 80vh;
margin: auto;
}
</style>
</head>
<body>
<section id="mySection" class="bg-light">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellat cum incidunt unde assumenda libero accusantium eveniet adipisci quod cupiditate ea eum delectus earum sunt vitae voluptate quae fugiat, velit voluptas laborum! Maiores libero commodi
tenetur, cum quidem placeat nisi modi iste amet molestias consequuntur hic earum, beatae dolores distinctio qui dignissimos. Obcaecati et temporibus repellat undeplaceat blanditiis! Quasi obcaecati ab ipsum omnis porro, assumenda fuga aperiam molestias
recusandae quis sequi earum quam excepturi minima consequatur quaerat optio rem. Veritatis sapiente, modi dolore quas quam libero consequatur! Natus explicabo qui alias animi eum! Hic sunt nemo eius veniam debitis illo saepe natus dolorem odit amet
omnis inventore similique necessitatibus maiores et iure obcaecati, ut perspiciatis quia! Eveniet iusto fuga eius temporibus, impedit molestias iure pariatur at laborum error, voluptates omnis ad rerum dicta expedita. Culpa facilis, nam aperiam
optio neque possimus in aliquam eveniet id odio, modi ab magni sequi velit dicta nisi sint corporis cum, quae similique natus quod sunt. Et labore necessitatibus praesentium accusamus, voluptatibus aliquam
</p>
<div class="parallax-window" data-parallax="scroll" data-image-src="https://upload.wikimedia.org/wikipedia/commons/7/76/Mapamundi_en_blanco.png" data-z-index="1" data-speed="0.5" data-android-fix="false">
<h1 class="overlay-text">
Text over the parallax image
</h1>
</div>
<p>
voluptatum. Exercitationem dignissimos ratione assumenda nemo quaerat, non dolore doloribus esse et numquam ut nihil aliquid id similique inventore tenetur corporis amet. Expedita ipsam quas sed officiis libero maiores possimus corporis illo doloribus
dolores nihil quasi minima dolorem quia eveniet similique iste, iusto, non aliquid tempore ipsa ratione? Iusto sapiente voluptate, aut, dignissimos enim optio exercitationem ipsum minima earum assumenda consectetur, in minus hic deserunt? Commodi
officiis vero eligendi similique veniam? Dolorem illo veniam eius dolore vero doloremque, debitis excepturi earum, perferendis, aspernatur inventore. Aliquam, voluptates fugit tenetur facilis voluptatibus facere vero quidem perferendis voluptate,
temporibus nesciunt, sunt debitis fuga? Dolor libero commodi in deserunt pariatur veniam ad fugiat temporibus architecto corrupti hic maiores totam repellat repudiandae dolore cumque explicabo voluptatibus vitae quis, consectetur blanditiis quae
adipisci. Maxime, nobis voluptate quaerat similique culpa obcaecati laborum accusantium illum! Ullam molestias doloribus quasi repudiandae eveniet beatae totam maiores maxime accusamus laborum nobis, dolore debitis ea dolorem fugiat, iusto delectus
quia odio minima, voluptates sapiente! Praesentium unde saepe facere consectetur corrupti veritatis autem. Ipsa voluptas debitis dicta esse unde ipsum aut explicabo tempora recusandae quas quod delectus exercitationem dolores odit itaque deserunt,
beatae perferendis aspernatur animi excepturi consectetur. Nihil, voluptas vitae fugit blanditiis voluptatum non iste porro obcaecati accusamus explicabo beatae! Facilis maxime vero ducimus doloremque officia dolor, ad unde quae aliquam? Quos rem
rerum debitis cumque error. Maiores, cum quas consectetur culpa debitis error facere, ipsa quo rerum pariatur ab libero magni sint autem totam hic velit magnam odit atque? Quos optio porro, nulla assumenda quisquam repellat maiores. Quisquam sequi
modi, iure totam nam eligendi in corrupti officia quibusdam cumque ducimus assumenda illo sint rem fugiat quae harum quod odit at minus similique iusto iste vitae. Animi dolorem ab ipsum sint id vero tempore, earum culpa itaque officia. Vero voluptatem
expedita, quae illum iure autem architecto impedit in distinctio nulla possimus nesciunt molestiae ad amet assumenda rerum, consequuntur vel ullam deserunt aut velit distinctio tempore repellat commodi eius harum quas est reiciendis blanditiis quidem
molestias fugiat natus totam nulla itaque sed illo at. Consequatur illo, ipsam accusamus at porro eius tenetur repellendus! Nostrum facere saepe repellat, animi quibusdam voluptates laudantium corporis officiis temporibus ipsam corrupti numquam
modi atque eos, delectus tenetur necessitatibus vitae unde magnam possimus quos harum voluptatum! Excepturi nesciunt voluptatum impedit rem distinctio nobis sit modi pariatur quos illum quis, reiciendis iure obcaecati explicabo! Eum consequuntur,
assumenda aspernatur corrupti error quod modi. Debitis rem officia corporis beatae necessitatibus voluptatibus quas optio harum quibusdam accusantium commodi dolorem ad, velit, recusandae quia incidunt ab libero minus totam aperiam? Quas repellat
eveniet dolores culpa ipsa, doloremque voluptate ad velit, quam, excepturi laboriosam? Assumenda facilis, veniam laudantium voluptatibus vitae explicabo dolorem hic nostrum officiis, exercitationem nulla recusandae soluta maxime commodi perferendis
ipsam placeat accusantium! Doloremque consequuntur facere porro eum officiis? Cum repellendus qui iusto ducimus reiciendis ipsam! Porro, voluptates numquam temporibus perferendis ex explicabo, esse ab maiores illo molestias accusamus unde itaque
voluptate laborum beatae. Aperiam quia, provident error repudiandae impedit, explicabo minus, corrupti neque odit vel maxime officia ducimus commodi voluptates quo facere dolores. Pariatur, fuga soluta illo laborum modi consequatur reiciendis aperiam
explicabo recusandae illum itaque nobis corrupti magnam ea voluptatibus, ratione nesciunt ipsa voluptate minus labore nemo, ipsam officia. Quasi, ipsam iusto. Pariatur omnis eius non doloremque error praesentium architecto dolorem ex id nam quia
tenetur beatae nemo eos numquam officiis, modi magni aut. Tempore libero porro accusamus quas ipsa repellat, eligendi dolor possimus sunt id odit excepturi minus quae, animi placeat. Quasi, iste? Quos fugiat et sapiente, voluptates debitis quaerat!
Omnis magnam assumenda quam laborum dolorem deserunt qui sequi quis error adipisci voluptate reprehenderit voluptas, aut animi harum! Facilis harum laudantium praesentium repellat ducimus esse molestias cupiditate blanditiis enim aliquam, fugit
expedita velit maxime at cum sequi
</p>
</section>
</body>
</html>Advertisement
Answer
I was able to find a fix that works at this link: https://github.com/pixelcog/parallax.js/issues/184#issuecomment-451162802
Basically, in your parallax.js (or parallax.min.js) file (assuming you have it in your project file system and are not linking to it from a cdn), search for instances of navigator.userAgent.match, and then replace the Android next to it with something like Android123 to break the code which disables the parallax functionality. Refer to the link above for more.