Development Blog 9 - Advanced Techniques (Parralax)

Parralax Excercise 1

Figure 1; A vidoe demonstrating the use of parallax using Elementor on the wordpress site.

The video above demonstrates the live preview of a parallax within an elementor plug-in on the wordpress site. Transparrent PNG images are added in fixed and absolute attachment styles, which creates a moving 3D visual to a still background image. The spacecraft and spaceman both have animations which are activated when a mouse hovers over the image. The parallax was created using widgets and ajusting the settings (size, style, position, animation.)

Parallax Exercise 2

Figure 2; Using code from the CodePen website to create a parallax effect.

A parallax effect can also be created using code from HTML, CSS and Javascript. In the above video a 3D moving bullet with smashed glass effect is created using the HTML widget and code from the Codepen website. By editing elements of the code, the images, text, size, animation and more can all be editied. For this example the colour and text content was changed.

Website Parallax (Fairtrade Products)

There are two websites which demonstrate different uses of Parallax. One utilises a scrolling parallax and the other features fixed and absolute positions of images which also have animations. The video below shows the live preveiw of each websites, and demonstrates the functionality of the parallax on each website.

Figure 3; Parallax fairtrade websites which link to each other.
Figure 4; Fairtrade website 1 with animated images in the parallax
Figure 5; This website uses a scrolling gallery style parallax


Home. n.d. [Online] Available at: (Accessed 20 December 2022)

Home. n.d. [Online] Available at: (Accessed 20 December 2022)

Home. n.d. [Online] Available at: g(Accessed 21 December 2022)