Parallax Effect for Smartphone Page


I need some help and inspiration on the Parallax effect.
I have already tried it for the 960 px desktop version. It works best with a wide box and transparent background. So far so good.

But what do I do with the 320 px smartphone page? This is portrait. I can’t get any further. The image is cropped very much and it doesn’t look good anymore.

Is it better to remove the effect for smartphones? Or what settings would I have to make so that it fits there again?

Thanks - Mr. F.

I would change the image.

Yes it is a difficult one @Mr_Fozzie

For me I don’t really use the 480 device for mobile landscape for the reason it is hardly used except for video, plus on iOS it just looks ugly with those white boarders! The parallax effect would still work on your 320 with a bit of tweaking.

If you do still include the 480 then like @macarna said swap out the image, or remove the parallax, or remove from the device and introduce one for the 480 that does work removing it form the other devices.

Thank you both. The key is to find the right image and resize it to the right size for the smartphone.

I will work on that.

Mr. F.

As mentioned, resize the image so the aspect ratio matches the device browser. If your starting image is large enough and high resolution, then adjusting the aspect ratio for each device when needed will give a perfect parallax effect.

I experimented with eliminating the 480 width. At first it seemed to work, but ongoing results were unsatisfactory.

As for the borders on 480…make them black by setting a black background. So you will have your image, with appropriate aspect ratio, in a wide box, the Sparkle canvas background set to pure black. What this does is make the 480 side bars blend with the black screen bezel now on all recent devices. Even the new colored, white case bezel iMacs have a black pencil thin screen bezel.

To really show off the parallax effect, set the Page Alignment to right or left, depending on which side of the browser is heaviest with elements.

Catching up on my reading, and I’d think the parallax is rather important for mobile variants, since the mobile stats indicate so.
We want to duplicate the effects seen on a 960 or 1200 laptop on a phone for viewership.
I’m watching this thread carefully for options.