Parralax Excercise 1
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
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.
References
Home. n.d. [Online] Available at: https://www.confectionerynews.com/Article/2021/02/18/Fairtrade-cocoa-demand-increases-during-pandemic-as-more-consumers-make-ethical-choices (Accessed 20 December 2022)
Home. n.d. [Online] Available at: https://www.agrofair.nl (Accessed 20 December 2022)
Home. n.d. [Online] Available at: https://www.osolocal2u.com/products/fairtrade-bananas-1kg-average-5-6-per-k g(Accessed 21 December 2022)