Wild Taranaki - Custom Functionalities


Written by Smokeylemon Team

9 August 2019 | Less than a minute to read


When a long-time client of ours Jason, of Kowalewski Holdings Limited, approached us about his new business venture, we were intrigued to hear his latest idea. Jason wanted to build a website and brand called ‘Wild Taranaki’ with the intention of providing information to visitors of our beautiful and unique region (and hey, even locals) with information on things to do in the region of Taranaki.  

Jason came to us at Smokeylemon because he wanted something fun and a little different from the standard webpage of information. We leapt at the opportunity to create a cohesive brand and delve into incorporating interesting & fun functionalities into his website. 

After meeting with Jason who provided us with the design starting point, we then began building. Two main things that we developed were unique treatments to images and adding an animation that is activated as the viewer scrolls.

Part 1: Unique looking ‘campaign’ images

Forgotten highway

Our concept overall was to create a look that was ripped and rugged mirroring the Taranaki landscape. One of the ways we incorporated this idea was the way our imagery was displayed by not having straight or plain edges. This suited the name, ‘Wild Taranaki’.

With this design aesthetic, we didn’t want Jason to need to have each image he chose to upload to be altered outside of the website. The solution to this was building into the website the functionality that the user could upload any image, be it portrait or landscape and it would have the window/splotchy’ effect and shape treatment added to it all automatically. How is this done you may be asking?

First the client uploads an image, automatically it’s resized and has a PNG alpha based ‘mask’ overlay put on it. This mask will create a unique new image that would retain the neat window/splotchy shape. This turns either a generic regular landscape or portrait image into something a little different and more eye-catching.

Mt Taranaki

Part 2: SVG with Animation

The next feature we added was a bit of movement. In reference to walking a track-like scenario (think of a map). We created a solution where the system would automatically create ‘points’ on the page, and essentially ‘draw and calculate’ a neat curvy track line between the featured campaign items. 

We added animation to the scroll. Depending on how you are scrolling on the page would determine the tracks animated direction. 

By creating this functionality that maps out the points between the sections of text opposed to having these dotted lines/tracks as an image, it allowed Jason to continue to add information without having to constantly get parts of his website altered to suit. 

Technology used

Throughout the Wild Taranaki website, we used SVG with animation and PNG masks. 

Watch this space

The journey to creating this website is not over, our client is looking at expanding on this concept of a map/journey. The next phase is adding a little character who will be essentially ‘walking’ down the path, just like having your own personal little tour guide.

Check out the current unique functionalities on the site now by clicking this link https://www.wildtaranaki.co.nz/

If you’re wanting a custom-built website with unique functionalities we’d love to hear from you.