Das Bild hat falsche Anzeigen auf dem iPhone

Post a reply

Smilies
:) :( :oops: :chelo: :roll: :wink: :muza: :sorry: :angel: :read: *x) :clever:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: Das Bild hat falsche Anzeigen auf dem iPhone

by Anonymous » 04 Mar 2025, 04:48

Ich erstelle eine Website mit Parallaxe -Scroll -Effekten, aber auf dem iPhone scheinen die Parallaxe nicht gut zu sein. Es scheint, als wären sie von schlechter Qualität und falschem Zuschneiden. />

Code: Select all

    document.addEventListener("scroll", function() {
const sections = document.querySelectorAll('.section-background');
sections.forEach(section => {
const img = section.querySelector('.parallax-img');
const rect = section.getBoundingClientRect();
const sectionHeight = section.offsetHeight;
// Calculate progress (0 when the section is fully below, 1 when it's fully above)
let progress = Math.min(Math.max(-rect.top / sectionHeight, 0), 1);
// Map progress to translation from 0 to -sectionHeight
const translateY = -progress * sectionHeight;
img.style.transform = `translateY(${translateY}px)`;
});
});< /code>
.ah2 {
background: rgba(128,128,128,.5);
font-size: 125px;
padding-top: 0.25em;
font-size: 28pt !important;
width: 60%
}
.section-background {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.parallax-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%; /* twice the section height ensures full coverage */
object-fit: cover;
z-index: -1;
will-change: transform;
margin: 0;
}
figure > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* twice the section height ensures full coverage */
object-fit: cover;
z-index: -1;
will-change: transform;
}< /code>
    

[img]https://a.travel-assets.com/findyours-php/viewfinder/images/res70/363000/363235-Nice.jpg[/img]



WHERE EXCEPTIONAL ENTERTAINMENT — MUSIC, THEATRE, THE ARTS AND INSPIRING LECTURES — ENRICHES OUR CULTURE.




[img]https://static.vecteezy.com/system/resources/thumbnails/040/890/255/small_2x/ai-generated-empty-wooden-table-on-the-natural-background-for-product-display-free-photo.jpg[/img]



WHERE SHARING A GOOD LAUGH HELPS BUILD FRIENDSHIPS THAT LAST A LIFETIME.




[img]https://smart-tourism-capital.ec.europa.eu/sites/default/files/styles/embed_large/public/2021-09/Nice2.jpg?itok=3GEJXlT6[/img]



WHERE MUSIC UNDER THE REDWOODS CREATES A MAGIC SHARED WITH FRIENDS AND FAMILY.


Erwartete Ergebnis
: :

Top