Wie kann ich dafür sorgen, dass dieser Parallaxeneffekt in mobilen Browsern funktioniert? ⇐ HTML

[Anonymous]

Ich versuche, einen Parallaxeneffekt basierend auf diesem Codepen zu erzeugen: https://codepen.io/chaobu/pen/qsyhf

Auf Mobilgeräten funktioniert dies jedoch nicht. Wie kann ich dafür sorgen, dass der Parallaxeneffekt in mobilen Browsern funktioniert?

Es scheint, dass das Javascript hier keinen Einfluss auf den Parallaxeneffekt hat. Ursprünglich dachte ich daran, das Javascript-Klickereignis in „Touch...“ zu ändern, aber das hat nicht funktioniert. Ich habe auch versucht, eine Medienabfrage für die Hintergrundbilder und die Position zu erstellen: sticky; sie, und das hat auch nicht funktioniert.

HTML:

Code: Select all

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



[url=#]
CONTENT LINK
[/url]



[url=#]
CONTENT LINK
[/url]



[url=#]
CONTENT LINK
[/url]



[url=#]
CONTENT LINK
[/url]

CSS:

Code: Select all

.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;
}
}

Ich habe erwartet, dass die Parallaxe auf Mobilgeräten funktioniert, aber das funktioniert nicht. Könnte jemand dabei helfen? Danke!