Page Viewer Concept

I guess this article should be prefaced by my reason for creating this. As some of you may know, I am not a big fan of the ‘Apple’ marketing scheme or their copyrighting practices. Therefor I am really against directly simulating anything that they make,  however that isn’t to say I am against creating similar concepts while maintaining the integrity of being a somewhat original product. The only reason for this preface is that a web design colleague of mine criticized my concept of being very similar to apples album viewer (I think this was an attempt to ‘rustle my feather’ a bit, my WSU Duck agreed with me.) With that said, this is a mild offshoot of my article viewer, and it is a very basic concept that has potential to be a little prettier.
</justification rant>

So, what was my goal with this concept; ideally to create a smooth, original, and visually appealing page preview transition frame. It isn’t meant to contain a whole page it is more of a sample of each page. here is a screenshot of a basic layout concept that i started with.

so far.. we have… smooth? well since there is no functionality I guess not, but oh well. This is a very generic navigation concept, with the exception maybe of having the pages linearly placed next to each-other. If you have seen my article viewer you are probably thinking, ‘cool you just removed the article and the vertical transitions’. Allow me to retort with, …well there is now a nav bar.
You might have noticed that this concept did not really satisfy what my goals were with this project, so I addressed a few issues i had with this layout before I continued. The current page needs to be centered, and stand out more than the others. Centering was relatively easy, so all i really needed to do was come up with a way to make the center page stand out more. What could I do to make them look different as well as have a somewhat appealing transition effect; I came to the conclusion that modifying the Width and Opacity should do the trick!
Here is concept image:

Well that looks a little nicer, it is somewhat original in addition to being appealing (my opinion). So lets make it smooth, as per usual with my other projects this will be done in jQuery mobile, utilizing the jQuery libraries as well.
So what functions are we going to use you ask? .animate(), and .live() of course! The animate function will consist of 3 css modifications: Opacity, marginLeft, and Width. it looks a little like this

$('#frameContainer').animate({ 'marginLeft' : how much}, time)
$('.selectedPage').animate({ 'width': n+'px', 'opactiy' : n+'px'}, time);
$('.selectedPage:next , .selectedPage:previous').animate({ 'width': n+'px', 'opacity' : n+'px'}, time);

That’s a rough outline of the animation concept, don’t take it to the bank if you want to see the code checkout git! so, minor issues I ran into, stacking of animations creating undesired effects, oops you think i would have remembered that from the last project. easy fix with the .stop() function. other than that the concept really went of without a hitch, all that needed to be done was getting the margins to be accurate, I ran into inconsistencies due to padding and margin settings that were inherited from some of the jQuery Mobile styles, easy fix with an explicit CSS declaration to remove margins and padding. So let me know what you think of my concept, I hope it runs smoothly for anyone that tries it, comments and critiques always welcome!

Until next time,

About these ads

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s