EverWeb Codebox logo

EverWeb Widgetbox 3

Parallax Scroll FX Background

Scroll FX Background Widget

Parallax Effect

This widget creates a simple parallax scrolling effect by using jQuery to alter the scroll speed of the background image in relation to the page content.
The widget can be used in conjunction with the other scroll effect widgets or with normally inserted ones.
There are only two controls to contend with - one to alter the percentage height of the image and the other to adjust the relative scroll speed.

Google Map Find Coordinates

Background Image

The backround image can either be a single image or a composte image as shown in the DEMO.
The image size is important in that it should be large enough to show the required detail and quality but not so large that it takes too long to download in the browser..
As a guide, the composite image background in demo 2 is 1200px wide by 1800 px high. This gives an aspect ratio of 2:3 and file size of around 730KB.
This is about the largest size that is sensible but will benefit from being reduced - particularly if there are a few other images being displayed on the page.
Experiment with reducing the size to see the minimum required to get a reasonable quaility. The image size can be changed quickly, while maintaining the aspect ratio, using Preview.app.
The composite image in the demo was created in Keynote and exported as a JPEG.

Widget Settings

Drag the widget onto the page where it will appear as a small 20px x 20px square.
Select it and, in the Metrics inspector, check the box next to "Allow Free Dragging".
Drag the widget off the page content area into the background out of the way. Its actual position doesn't matter at all.
Choose the background image from the Assets list.
Set the percentage height and the scroll factor.
The "Percentage Height" is set to ensure that the background image covers the browser background right to the bottom. The value will depend on the height of the page content. This will require some experimenting with and checking the results in the browser.
The "Scroll Factor" is the speed of the background relative to the page content. The lower the value - the slower the page background will move relative to the content blocks.

This widget is included in the Scroll FX widget pack.