This is an example of how to create a type of parallax effect - where panels appear to slide over the top of a fixed background image.
This styling effect is created using HTML <divs> direct in the Source view of the Page surface.
You can download the HTML for this page as a simple text file here: parallax-source-view.txt
Copy and paste into your own page in Source view, and then modify to suit your needs.
In this example, the images are nominally 1920 x 1040 pixels.
This example also uses the Custom Font 'Roboto' (see how) and you will need to upload your own images to your page using the Image picker in the normal way and then 'fix-up' the URLs in the HTML to use the location shown to you in your Image Properties dialog.
Parallax effect
text sliding above fixed image
Sliding panel
with own background image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Second text panel
over fixed view
And another panel with plain background for more text, and so on...
|