By Amongst the new features of EverWeb 3.4, such as SEO Power Up Addon, Calendar and Select Time controls for the Contact Form Advanced Widget and Replace Assets, Parallax Scrolling is the new feature that could change the look of your website forever!
What is Parallax Scrolling?
Parallax is an effect where an object appears in a different position when viewed from a different angle. Parallax is something used by astronomers used to estimate the distance of stars. For example, if you observed a particular star on the first of January, then again on the first of July, you would notice a very small change the the position of the background stars relative to your target star. This difference can then be used to estimate the distance between the Earth and the target star.
The same visual parallax ‘shift’ applies to Parallax Scrolling in websites where the background image on a page moves at a different rate to the objects in front of it. This difference gives the page itself a sense of motion when it’s being scrolled up and down.
When Should I Use Parallax Scrolling?
There are no limitations as to when or where you should use Parallax Scrolling in your website using EverWeb. Typically you will find that this feature is best used when you want to convey a list of instructions in a clean, simple way with explanatory images and little text, or when you want to story tell in your site. If you look at news websites, you will often find human interest stories employ parallax scrolling images. If you look at Apple’s website, you will also see a lot of Parallax Scrolling used for product introduction and information pages. These types of pages focus you on the strong images that the stories, or sales pitches, want to convey. As the old saying goes, ‘a picture paints a thousand words’.
What Do I Need to Set Up Parallax Scrolling on My Page?
Setting up Parallax Scrolling in EverWeb is very easy to do. First of all, you will need to use EverWeb 3.4 or higher. Secondly, you’ll need some great looking full width images! EverWeb has this covered as well with its free stock photo library of over half a million images to choose from. Click on the Media button in the Toolbar, then select ‘Free Stock Photos…’ from the menu. Simply use the search function to find the images you want. Drag and drop each image that you want to use in to the Assets List of the Project file so you can use them later. The images that you choose should be of good quality and of sufficient height and width so that they can be effectively used in Parallax Scrolling.
Using Parallax Scrolling
Parallax Scrolling can be used on Full Width objects in either Fixed Width (i.e. centered or left aligned page layouts) and Responsive Page Layouts. Select the Full Width object that you want to apply Parallax Scrolling to, then go to the Shapes Options tab in the Inspector Window. In the Fill section, change ‘None’ to ‘Image Fill’. Select the image that you want by clicking on the ‘Choose…’ button and selecting the image you want. You can use Parallax Scrolling with the image options ‘Scale to Fit’. ‘Stretch’ and ‘Tile’. The Parallax Scrolling checkbox will be available when any valid option has been selected.
That’s all you need to do! Preview to see the Parallax Scrolling effect in action.
Tips When Using Parallax Scrolling
As Parallax Scrolling is used for background images, you should make sure that the foreground content is properly framed against the background image. You may find that you need to add padding to to the top and bottom of the Full Width object. If you add padding to a TextBox, for example, use the Before and After Paragraph settings in the Text Inspector. You may also need to add carriage returns in to the TextBox to achieve the effect you want.
When adding padding, make sure that you Preview to test that the Parallax Scrolling effect is maintained. If you add too much padding the effect may not work properly.
Conclusion
Parallax Scrolling is a great addition to the tools you have to build your website in EverWeb. It is easy to use and can be highly effective in making your website a great way to tell your story or to sell your products.
Loading ...
Comments