Development Blog 9 – Overview of Advanced Techniques

For this exercise, we were told to create a new Elementor page, and given files to use to create our own parallax.

Step 1

Add a single column section and change the colours as shown.

Add a section heading called Parallax Exercise.

Fig 1. My parallax website showing a red and black gradient background with ‘parallax exercise’ as the section heading.

Add another single column section below the first.

Use the space scene to change the background as shown.

Note the use of FIXED as the attachment type. This will anchor the background image as you scroll.

Fig 2. Screenshot of the Earth image in a single column section with fixed as the attachment type.

Add section heading as ABSOLUTE attachment type. This will enable you to move the position within the section.

Fig 3. Screenshot of section 2 with the heading ‘first section heading’.

Lets add a spaceship to the scene as an additional image. Use the ABSOLUTE for this one.

Fig 4. Image of my spaceship with absolute as the attachment type.

Once the spaceship is in position you can also animate so you get some additional movement as you scroll.

Next add a section with a solid colour.

Fig 5. Solid colour in the next section.

Now try and add the sky scene to the next section.

Fig 6. Sky background added to next section.

The following is a video of my parallax page with the animations.

Video 1. Video showing a screen recording of my parallax website.

Link to parallax site here

Leave a Comment

Your email address will not be published. Required fields are marked *