Help your visitors focus on the subject with jquery script PageSlide

November 11th, 2010 § 0 comments

As already stated during one of my previous posts (Push the minimalist approach one step further by hiding site navigation), I am (like many of you out there) a huge fan of the minimalism concept in web design, being convinced that too much information or content has a tendency to overwhelm our web site visitors to a point that they will lose interest, miss the point, and most likely turn around and never look back.

This approach has certainly proved to be a winning one in the marketing business, people in the high spheres of the sales industry very quickly understanding the power witty pictures could have in comparison to lengthy and boring sales proses.

 

And when it comes to online art display, I don’t see why those rules would not apply. Your work needs to be staged to be seen/inspected with attention. And very much like a designer would pick a frame, select his light to display a painting at its best, you need to make sure your visitors can see but more importantly can focus on what you want them to see.

 

And this implies the removal, at least on a temporary basis, of all the extra details, descriptions and other notes you may want to add to explain your work.

 

Well this PageSlide script I happened to find while taking a stroll along the jQuery plugin bay could bring you the chance to purify the display of your art piece before bringing in the valuable notes you want your visitors to be aware of. If you google this plugin, you will find out it comes in many shapes and pre-destined usages. The one I used for this example is Scott Robin’s.

 

Just download it and use it to your likings. You can add links so that the initial page shifts in every direction. I only set it up so it shifts to the left, but you get the idea.

Code your page

You will be needing 3 essentials pieces of coding to make this PageSlide script work.

 

Call the jQuery scripts in the header with the following:



 

A link triggering the shifting of the main content and the appearance of the hidden side panel.

- more about this -

 

And the javascript command dictating the various shape and direction of the side panel.


Finally you will be needing to code the side panel, in this case the page _left.html just like you would do with any other HTML page. This is it people, try it out. Open the demo and click on the -more about this – link below the picture to see the script in action. Click anywhere on the main content to go back to the page’s initial stage…

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes:

What's this?

You are currently reading Help your visitors focus on the subject with jquery script PageSlide at Shoogle Designs.

meta