Dev Blog 9 – Overview of Advanced Techniques

Introduction

The tasks below show experimentations based on parallax images.

Individual Task 1 

The first exercise was to experiment with widgets in Elementor and make a parallax website based on a space theme. The first step was to add a single-column section and change the background colours to a gradient that fit the whole screen. I then added a page heading on top of the gradient.

Figure 1 – Adding in a header section and changing the colours.

Next, I added a new single-column section to the website and changed the background to a space-themed image. I then set the image attachment as fixed in the settings, this anchors the image to the page whilst the rest of the site is scrollable, resulting in an image parallax.

Figure 2 – Adding a space theme background image to a new section – fixed attachment anchoring the image as the user scrolls the page.

I then added a heading to the page and set the positioning as absolute. This setting allows us to move the heading freely around the page and also will result in a scrollable effect when the user scrolls the page.

Figure 3 – Adding a header with the positioning set as ‘absolute’ means the heading can be moved around the background image freely.

After adding the heading to the page we decided to add a spaceman image as a background overlay. This gives the effect that the spaceman is floating in space. Moreover, to ensure the image blended into the background I changed the image opacity and also set the image as fixed so that it moved with the original background.

Figure 4 – Adding a spaceman image as fixed so it anchors to the background as it is scrolled.

Next, I added a UFO image to experiment with animation. I set the image as absolute so that I could freely move the image around the page to achieve my desired effect.

Figure 5 – Adding in a spaceship as absolute so that it can be moved around the background image freely.

I then animated the image with the use of motion effects in the settings window. I decided to set the animation to ‘slide in right’ to give the overall section more movement when the user scrolled the page.

Figure 6 – Adding motion effects to the spaceship so that it moves on a scroll.

Finally, to emphasise the parallax further we added another section and changed the background colour. I decided to use a bright green to add a pop of colour to the overall design and to create a breakpoint. I then added an image of the sky to the website as a fixed attachment to finish off the parallax effect.

Figure 7 – Adding a sky scene below a blocked colour section to create a transition when scrolling.

Individual Task 2 

The second exercise gave us the tools to create a layered image that moves with the users mouse. We used existing code from CodePen to create the effect with Elementor widgets.

Figure 8 – The code from Codepen used to create a parallax image that moves at the speed of the mouse.

The first step was to open BBEdit and create a new page with the opening style tag, <style>. I then copied over the CSS style guide from CodePen and pasted it in after the opening style tag. I then closed the style tag by inputting </style> into the page after the CSS was imported.

Figure 9 – Adding into BB EDIT the style guide from Codepen for the parallax image.

I then copied and pasted the HTML after the CSS in BBEdit.

Figure 10 – Adding in BB EDIT the HTML from Codepen for the parallax image.

After importing the HTML I needed to add the JS (JavaScript) to the BBEdit page. To do this I added a new opening tag <script> and pasted the JS from CodePen. I then closed the tag by inputting </script> into BBEdit.

Figure 11 – Adding into BB EDIT the Java Script from Codepen for the Parallax image.

Finally, I copied and pasted the whole Code into the HTML widget on Elementor which translated into the moveable image on the page.

Figure 12 – Adding the code from BB EDIT into an HTML widget on Elementor to create the Parallax curser image.

I then made sure it worked by previewing it in a different window.

Figure 13 – Testing the Parallax curser image.

Individual Task 3 

The final task was to design a parallax website promoting fair trade products. I decided to use imagery and video to inform the audience about Fair Trade products. I used knowledge from the first exercise to create the parallax website.

Figure 14 – Parallax website design promoting fair trade products.
Figure 15 – Screenshot of parallax fair trade website.
Figure 16 – Screenshot of parallax fair trade website.
Figure 17 – Screenshot of parallax fair trade website.
Figure 18 – Screenshot of parallax fair trade website.

Individual Reflection

Reflecting on the tasks above, I learnt and carried out new experimentations independently. I am confident with creating parallax websites and believe the design element may come in useful when designing my final campaign website. 

References

Mouse move parallax – codepen (no date). Available at: https://codepen.io/oscicen/pen/zyJeJw (Accessed: November 3, 2022). 

Stock images, photos, vectors, video, and music (no date) Shutterstock. Available at: https://www.shutterstock.com/ (Accessed: November 3, 2022). 

Unsplash (no date) Beautiful free images & pictures, Unsplash. Available at: https://unsplash.com/ (Accessed: November 3, 2022). 

Related Posts

Scroll to Top