By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
Web Development

Take a Hike

A hiking website designed to showcase a number of interactive features.

Case Study
Take a Hike is a showcase hiking website that would would allow users to explore popular hiking routes. We used it as the canvas to implement a number of interesting interactive features: a scrolling parallax effect, an infinite slider with hover effects and an informational animation.

Challenge

To build an attractive hiking-themed site with a delightful scrolling parallax effect that relies on layered illustrations. We also wanted to implement an infinite slider with hover effects as well as an informational box that opens on user scroll.

Solution

All features were successfully implemented. The scrolling parallax in particular works very well with illustrations as there are no real limits to the amount of potential levels and layers that can be animated. The effect is arresting and engaging for users.

Design

Typography

We wanted this site to feel fun & youthful. We chose ‘Bungee Shade’ as the main title font which encapsulates that tone. We paired it with ‘Bitter regular’ and ‘Bitter bold’ which add some solidity to the website body.

Colour Palette

Taking inspiration from Arizona hiking trails, we blended burnt oranges with muted peach tones and aqua blues to create the impression of a sunset hike near a lake.


Features

The site is designed as an informational brochure site and potential shop, but the primary features are the three interactive ones we previously mentioned.

Parallax Scroll

The parallax effect is best known for being used with fixed images on sites, but more rarely is it implemented as we have done with multi-layered illustrations. The effect has huge flexibility and scope for customisation. The scroll speed and the levels of 'fixedness' of each of the layers can all result in huge differences in how the effect looks and works. The result in most cases is interesting and definitely enhances the UX.

Infinite Slider

The slider works well, when it reaches the end, it loops around again to the first item. There is a development flaw here though, as in order to create the infinite effect, we must double up all the slides, which is not best practice, so perhaps a custom JavaScript solution would be better.

Information Box Animation

As the user scrolls down to the particular hike information, the slider image animates out and the effect is super.

The parallax effect on scroll
Beautiful parallax scrolling effect
Selection hover effects
Scroll and selection effects combined.

responsivity

The design is currently only partially responsive. The main purpose of this project was not to develop a final product but to explore the aforementioned features. The features themselves are fully responsive, the parallax scroll works perfectly on mobile and tablet, as do the other animations.

Previous Project
Next Project
You're all caught up.
There are no more recent projects
That's everything.
There are no more projects.

Need a

website?

Let's talk.

Submit
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.