Parallax websites are kind of the “in” thing at the moment and in the short video below, I hope to try to give you a very basic overview on what people are calling parallax websites. They are not parallax in the true sense of the definition but they do offer a visual alternative.
Most of the parallax techniques are really to do with the scrolling effect and how by making the background move at a slower rate than the foreground words and images, you can kind of get a parallax effect.
This first little video clip is purely to show you how parallax works in real life. It’s a very short video of some random railings but as I move my camera from side to side, you can see how the railings in the foreground and the wall appear to move differently. You’ll notice that the railings not only move faster but sometimes it appears that the background is actually moving downwards as the camera goes up. This, effectively is what parallax is all about.
OK, now that you’ve seen that short video, it’s time to look at how we can add parallax style effects, to a website.
I apologies in advance for scrolling not being very smooth on this video, it’s purely down to the frame rate of the video capture. Scrolling obviously moves very quickly and the video capture is trying to save file size and space.
Hopefully this will give you a look at parallax website effects and a couple of other tricks you can use to add a bit of motion and animation to your pages.
Take a look at the video and then read the notes below.
Parallax websites – notes:
Parallax scrolling on more than one background image will not work on iphone or ipad. If you only have a single background image, you can get everything to scroll over the top but the image is pretty much fixed.
You can create parallax effects using much more complicated techniques but many i have looked at simply crash the page and Safari is constantly having to try to reload it.
Another point worth mentioning is that videos will not autoplay on mobile devices either. So even if you use video backgrounds on your slider or background, they simply won’t play.
Gifs can be a bit old school but they do at least autoplay on mobile devices. the problem with gifs is that they are usually quite small in size, say 600 x 400 and when you push them as a background image, they do get a bit grainy. But if you find a gif which only has a small area of it moving, you can usually get away with it.
The gif image below is one that we used on our homepage. Because it only has one part of it moving, it worked ok when it was increased in size as a background image.
We do believe that adding movement to your webpages does make them more exciting and there are many different techniques to do this. Parallax websites are great but they look completely different on a tablet than they do on laptop and so you need to consider what other techniques you can use.
One thing to always have in the back of your mind when creating any kind of scroll effect is that mobile devices do not use a mouse. They have to physically be touched to make them scroll. So any mouse hover or mouse scrolling effects you ad to a site, won’t be visible on scroll, they may need a physical touch.
You can of course use “fade in” animation on sliders and images, which do work on tablets and it means that images are held back until a large part of the area they are set to appear in is visible.
If you’re considering getting somebody to build you a parallax website, have a chat with us about parallax and other options. Also make sure you take a look at some of our website examples (which you can find on the projects page) as we have quite a few examples of different types of movement, which work on all platforms.