When done right, parallax scrolling images can add nice depth to your website or webapp. When done wrong, it can be another distracting animated effect that detracts from the page and causes your users to bounce to competitors. The difference could likely be finding the right plugin that gives you the control and tools to dial your effect in perfectly to match your implementation without creating distraction. Here at Mission Bay Media we have taken the time to test and trial more methods of creating JS parallax then you see here. Here is our run-down of a few of the best and most interesting.
Parallax.js – Matthew Wagerfield
About: This plugin is the most comprehensive for doing scene parallax.
Pros: The only solution reviewed here that responds to the tilting of a smart device. I tested this briefly on iPhone (chrome and safari), iPad and android and (perhaps surprisingly) it worked in all the contexts I tested.
Cons: As you might expect, the extra features and polish come with some extra code – the plugin weighs 9KB Minified. The object oriented approach is simple enough but there are real constraints to what your HTML can look like if you want to use this plugin.
Enllax.js – MMK Jony
Pros: Extremely simple to implement, 2KB minified.
Cons: Too simple. Specifying background versus foreground, ratio and direction are simply not enough. It is very easy for your items not to line up as expected and there is no built in way to control it. It is hard to even get parallax background images not to show repeat lines.
The following two plugins do much more than just parallax. They are full-fledged libraries for implementing scroll-locked animation. Parallax is, of course, a very achievable effect with these libraries.
SUPERSCROLLORAMA – John Polacek
Pros: Easy to implement scroll-locked animation. Impressive demo site.
Cons: Fails badly on mobile, at least on iPhone. This is a deal-breaker in my opinion so I stopped testing there. It is of course possible to design your site to only init the plugin on desktop, however I expect the responsive CSS might become a mess and mobile is half the fun with these scrolling animations.
Our top Pick: Skrollr – prinzhorn
Pros: Lightweight, mobile friendly, and full featured. Skrollr is simple to implement with a CSS3 keyframe approach to controlling scroll animations (as opposed to a controller). Relative mode is excellent when considering responsive design. The plugin is extremely full featured and allows you to control almost any css property with interpolated, scroll-locked animation (even allowing you to animate svg path draws and attributes). It also has a lot of useful plugins (for example skrollr-decks).
Cons: If you have full-width elements moving with scroll on mobile, it is possible to lose anything to touch-scroll against and basically “get stuck” in your page on mobile. This is not so much a failing of the plugin so much as something to be aware of when designing your implementation thereof. The only other limitation I was able to find is that it isn’t able to interpolate between CSS3 linear-gradients. How to parallax: The easiest implementation of a parallax effect using skrollr involves assigning a background image to your div with “background-size: cover;” then using skrollr keyframes in relative mode to animate from data-bottom-top=”background-position-y: 0%” to data-top-bottom=”background-position-y: 100%.” The relative data attributes refer to when the bottom of the viewport hits the top of the element anchor and when the top of the viewport hits the bottom of the element anchor respectively.
If you are looking for a developer to build your perfect feeling and performing pages or webapps, contact us today to start coding your project from idea to reality.
