Как я могу заставить этот эффект параллакса работать в мобильных браузерах? ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект параллакса на основе этого кода: https://codepen.io/chaobu/pen/qsyhf

Однако на мобильных устройствах это не работает. Как я могу заставить эффект параллакса работать в мобильных браузерах?

Похоже, что Javascript здесь не влияет на эффект параллакса. Сначала я думал изменить событие клика javascript на touch..., однако это не сработало. Я также попытался создать медиа-запрос для фоновых изображений и позиции: липкий; их, и это тоже не сработало.

HTML:

Код: Выделить всё

[url=#]
FULL PROJECT LIST
[/url]



[url=#]
CONTENT LINK
[/url]



[url=#]
CONTENT LINK
[/url]



[url=#]
CONTENT LINK
[/url]



[url=#]
CONTENT LINK
[/url]

CSS:

Код: Выделить всё

.wrapper {
position: relative;
box-shadow: 0 0 1em #333333;
}
.wrapper section {
position: relative;
background: #00477C;
}
.wrapper section article {
width: 50%;
margin: 0 auto;
padding: 2em 0;
}
.wrapper section article p {
margin-bottom: 1em;
}
.wrapper section article p:last-of-type {
margin-bottom: 0;
}
.wrapper section:after {
content: "";
display: block;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100vh;
width: 100%;
}

.img-src {
position: fixed;
background-position: center;
-webkit-background-size: cover;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.wrapper section:nth-child(1):after {
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(2):after {
background-image: url("../img/test2.jpg");
}
.wrapper section:nth-child(3):after {
background-image: url("../img/test3.jpg");
}
.wrapper section:nth-child(4):after {
background-image: url("../img/test4.jpg");
}
.wrapper section:nth-child(5):after {
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(6):after {
background-image: url("../img/test2.jpg");
}

@media only screen and (max-width: 600px) {
.wrapper section:nth-child(1):after {
position: -webkit-sticky;
top:65px;
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(2):after {
position: -webkit-sticky;
background-image: url("../img/test2.jpg");
}
.wrapper section:nth-child(3):after {
position: -webkit-sticky;
background-image: url("../img/test3.jpg");
}
.wrapper section:nth-child(4):after {
position: -webkit-sticky;
background-image: url("../img/test4.jpg");
}
.wrapper section:nth-child(5):after {
position: -webkit-sticky;
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(6):after {
position: -webkit-sticky;
background-image: url("../img/test2.jpg");
}
}

@media only screen and (max-width: 600px) {
.wrapper section article {
width: 80%;
}
.wrapper section:after {
height: 100vh;
}
}

Я ожидал, что параллакс будет работать на мобильных устройствах, однако это не так. Может ли кто-нибудь помочь с этим? Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/573 ... e-browsers