Take a Hike
A hiking website designed to showcase a number of interactive features.
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.
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.
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.
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.
The site is designed as an informational brochure site and potential shop, but the primary features are the three interactive ones we previously mentioned.
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.
Information Box Animation
As the user scrolls down to the particular hike information, the slider image animates out and the effect is super.
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.
There are no more recent projects
There are no more projects.