Introduction


Eraze approached me to create a website based upon designs that he had made which were Minecraft themed, this was the basis of the website. The main page of the website needed to have a parallax effect which involved multiple layers of images moving at different factors according to how far the user had scrolled.

Another requirement was to have a trailer; however, the default YouTube embed was ugly (especially with it being one of the first elements the user will see), therefore I created a wrapper Vue element which would show a thumbnail with a stylised play button that would seamlessly transition into the YouTube embed.


Achieving the Parallax


To achieve the parallax I created a scroll function which would passively listen to the user scrolling, this would then calculate the amount of offset which each element needed according to their config, these offsets could be clamped to prevent further scrolling if required.

Example Element Config:

  foreground: {
    style: "",
    speedFactor: 0.2,
    inverse: true,

    start: 345,
    end: 300
  }

Why wasn't it the final version?


As previously stated, this was created during very early development, there simply wasn't enough room for content! The design ended up being completely overhauled and I sadly wasn't chosen to complete the second version; but, I'm still extremely grateful to have had the opportunity to work on such a unique project.