Parallax images don't fill the container

[dijkermans]

Hi,

The images of the official Parallax demos don't fill the container.

https://codepen.io/desandro/pen/jAGWRQ https://codepen.io/desandro/pen/qNPbgb

It looks better on your site but it has the same problem but just less noticeable: https://flickity.metafizzy.co/#parallax

I think it should fill up the entire space like background-size cover (or object-fit cover), but then probably zoomed in a bit so it can be panned.

I've seen it the right way with Flickity, but what's the difference? How did they do it?:

https://themenectar.com/salient/architect/project/23-world-plaza/

flickity 2.3.0 + 2.2.2 / win10 / chrome v98 + edge v98 + firefox v97

Regards! Great slider!

[dijkermans]

I noticed the demos look fine on my mobile; android12 / chrome + samsung browser but not on ipad2017/iOS 14.6

[dijkermans]

This codepen works:

https://codepen.io/acolinucci/pen/QWbOWqP

They scaled up the image and made it move slower.

flkty.on( 'scroll', function() {
  flkty.slides.forEach( function( slide, i ) {
    var img = imgs[i];
    var x = ( slide.target + flkty.x ) * -1/8;
    img.style[transformProp] = 'translateX(' + x + 'px) scale(1.5)';
  });
});

I guess the scaling factor could be calculated. It seems like a random big number now.

Also, I believe css upscaling reduces the image quality. The image is scaled down to make it fit, which is scale 1, and then it's scaled up. A better approach would be to make a bigger outer wrapper and make it move.

[desandro]

As you discovered, you'll need to made some adjustment to cover that other space. One way is to scale up the image.

Another way would be to decrease the size of the containing cell element. You could try something like .carousel-cell { margin-right: -60px; }. See CodePen. There's still a chance of gaps, so you'll have to play around with that number.

Or, you could try dynamically resizing the cell width.