Search:  

Previous pageTechniques & KB Articles Next page
Styling - creating the parallax effect 

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...

 

Copyright © 2023 Enstar LLC    All rights reserved Print this pageTranslate: