Hello.
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.
-W
He guys,
You’re question, on its turn triggered one for:
I was wondering “Is parallax on mobile devices a NO NO ?”
Found this (recent) interesting article that i am sharing with the community:
It feels like this author has issues with parallax scrolling?
The examples he gives to warrant his argument is strange! Why would anyone create a web page full of parallax scrolls? I have not found that by loading a web page with a bit of parallax scroll that it takes a real long time to load!
Parallax scrolling works on any device. It is up to the designer how it catches the User’s eye.
Also it makes no sense to blame parallax scrolling on SEO issues. The html is seperate to the javascript that makes it happen. Again I’m really confused how this author goes about making it look like parallax scrolling is bad to use?
I do agree with your (above) mentioned comment, however…
imho:
i don’t believe in its effectiveness on smartphones (tablet are, again imho, okay)
btw - there are more articles about applying parallax on smartphones, and also how it impacts SEO
@wolfferine, I guess in the end it is up to the designer.
I have come across several mobile layouts where parallax scrolling was used… It looked great, very effective, and well thought out. But I also agree with you that I have come across parallax scrolling on mobile without any care to the User and it was just an outright bad experience.
With what you have found, what part of parallax scrolling impacts SEO?..