Single Page Vertical Scroll Parallax Micro Site

home

I’m in the process of wrapping up a personal micro-site for a local business owner.  This site provides the owner an opportunity to talk about himself and the business in a contact that is free of constraints normally associated with a business web site.

The personal site was implemented with a single-page, vertical scrolling, parallax style.  This was quite fab a year or so ago with design agencies and a few leading-edge companies.  This individual is in a business area that tends to lag in terms of online technology, so this style of display is only now just coming into its own.  To my knowledge, only one firm in the industry has used it for a product display and we would have beaten them online were it not for delays in receiving copy.  How many times have you lived through that one :)

I think one of the most interesting aspects of this project was just how far native display has come over the last few years relative to what we used to implement in Flash/Flex.  I tend to be technology agnostic; in fact, my favorite phrase is ‘as long as the money’s there, I don’t care.’

The number of jQuery libraries that can be imported into a project and used to create a high-quality, responsive design is rather impressive.  I actually had to write very little custom script and CSS in order to implement the micro-site.

The landing section uses the Revolution Slider to display a few Zombie Apocalypse-themed slides that introduce the individual’s company.  He is a big fan of ‘The Walking Dead,’ and that is reflected through the imagery.  Unfortunately, there was no budget for a graphic artist, so I had to suck it up and create all the site graphics.

home

After a brief personal statement section, there is a responsive vertical timeline that provides a more visceral, graphic representation of the person’s background and history.

history

I was able to implement this with yet another jQuery plugin and a tiny bit of scripting/CSS.

Page elements animate into place as soon as they scroll into display, which is accomplished with the scrollReveal library.

The portfolio section also uses a plugin that allows the display to be dynamically reorganized by category .  I wrote something similar as a Flex component a few years ago, so I appreciate the effort that went into this plugin.

work

The contact area uses quite a few hidden UI elements to blend form validation and error reporting into the display.  It also has light spam prevention along with a cool Google maps display that is rendered into a hidden DIV, then animated into view.

contact

The slide out tab to the left is permanently visible and serves as an informal blogroll.

Overall, this has been a fun exercise in integrating various jQuery plugins into a seamless, visual display.

And, once again, I’ll say that whether your needs are Flex or HTM5/JS/CSS, as long as the money’s there, I don’t care.

Comments are closed.