A microsite is an individual web page or small cluster of web pages that act as a separate entity for a brand. A microsite typically lives on its own domain, but some exist as a subdomain. Companies have different reasons for investing in microsites. Microsites have the advantage of opening wide out-of-the-box thinking and strategy and can be used to help brands achieve a number of things. For example, some companies have used them to highlight a specific campaign or target specific buyer personas. Others have used them to tell a short story or to inspire a specific call-to-action.
Microsites are a great way to share the important elements of your brand. Microsites that are highly engaging, interactive, and shareable promote your brand across all the channels they’re shared in. Microsites that are informative or fun (but not related to a product) keep your company top-of-mind in the consumer’s mind.
If you've found a word "fun" or maybe "inspire" somewhere in the text above, then you probably know why I want to share this concept today with you. It's maybe good to know, that code (after clicking on the DOWNLOAD button :) ) can be used really as a starting point for creating a microsite or simply as a cool slideshow/slider somewhere on the website.
Because of the assumption that this example can be used as the starting point for creating a microsite or, on the other hand, as a slideshow/slider I tried to keep all the things in the demo as simple as possible. It has only two simple, but important parts: microsite (or slider/slideshow) navigation and microsite (or slider/slideshow) content. In the navigation at one point, only a previous or a next item can be clicked. After clicking on a navigation item, I find the index of the clicked item, compare it with the index of the last active item and that's the way how I determine the direction of the rotation background as well as the direction of the left and the right parts of the microsite. For each direction, I created a TweenMax timeline and call one of them each time after clicking on the navigation item.
I hope you like this simple concept and find it useful!
References and Credits
- The inspiration for effects and Layout comes from SELECTO
- TweenMax by Greensock
- imagesLoaded by David DeSandro
- Images by Unsplash.com
- Font Montserrat by Google Fonts
- Simple Loader by loading.io
- Text by Wisdom Quotes
- iPhone design vector created by freepik – www.freepik.com
- Prev and Next Icons made by Alfredo Hernandez from Flaticon are licensed by CC 3.0