I’m creating an internet site with parallax scroll results however on Iphone the parallax photos don’t appears good it looks like they’re of unhealthy high quality and incorrect cropping I attempted to make use of <determine> however the situation stills the identical outcome, additionally I attempted to overwrite the photographs on mobiles to extra adaptability this additionally don’t works.
Right here is my present code:
doc.addEventListener("scroll", perform() {
const sections = doc.querySelectorAll('.section-background');
sections.forEach(part => {
const img = part.querySelector('.parallax-img');
const rect = part.getBoundingClientRect();
const sectionHeight = part.offsetHeight;
// Calculate progress (0 when the part is totally beneath, 1 when it is totally above)
let progress = Math.min(Math.max(-rect.high / sectionHeight, 0), 1);
// Map progress to translation from 0 to -sectionHeight
const translateY = -progress * sectionHeight;
img.fashion.rework = `translateY(${translateY}px)`;
});
});.ah2 {
background: rgba(128,128,128,.5);
font-size: 125px;
padding-top: 0.25em;
font-size: 28pt !necessary;
width: 60%
}
.section-background {
place: relative;
peak: 100vh;
width: 100%;
overflow: hidden;
show: flex;
justify-content: heart;
align-items: heart;
text-align: heart;
}
.parallax-img {
place: absolute;
high: 0;
left: 0;
width: 100%;
peak: 200%; /* twice the part peak ensures full protection */
object-fit: cowl;
z-index: -1;
will-change: rework;
margin: 0;
}
determine > img {
place: absolute;
high: 0;
left: 0;
width: 100%;
peak: 100%; /* twice the part peak ensures full protection */
object-fit: cowl;
z-index: -1;
will-change: rework;
} <div class="section-background">
<determine class="parallax-img">
<img src="https://a.travel-assets.com/findyours-php/viewfinder/photos/res70/363000/363235-Good.jpg"></img>
</determine>
<div class="content material">
<h2 class="ah2">WHERE EXCEPTIONAL ENTERTAINMENT — MUSIC, THEATRE, THE ARTS AND INSPIRING LECTURES — ENRICHES OUR CULTURE.</h2>
</div>
</div>
<div class="section-background">
<determine class="parallax-img">
<img className="parallax-img" src="https://static.vecteezy.com/system/assets/thumbnails/040/890/255/small_2x/ai-generated-empty-wooden-table-on-the-natural-background-for-product-display-free-photo.jpg"></img>
</determine>
<div class="content material">
<h2 class="ah2">WHERE SHARING A GOOD LAUGH HELPS BUILD FRIENDSHIPS THAT LAST A LIFETIME.</h2>
</div>
</div>
<div class="section-background">
<determine class="parallax-img">
<img src="https://smart-tourism-capital.ec.europa.eu/websites/default/recordsdata/kinds/embed_large/public/2021-09/Nice2.jpg?itok=3GEJXlT6"></img>
</determine>
<div class="content material">
<h2 class="ah2">WHERE MUSIC UNDER THE REDWOODS CREATES A MAGIC SHARED WITH FRIENDS AND FAMILY.</h2>
</div>
</div>Anticipated outcome
:
Present outcome
: