Archives
-
Latest
-
Popular (7 Days)
-
Popular (30 Days)
-
Popular (All-Time)
Tweets
My Player in NBA 2K10
- graphic, layout design
- XHTML/CSS coding
- jQuery-plugin implementation
- cross-browser testing
- writing
Notes
I wanted to make something that used jQuery to do certain things. Specifically, I wanted to develop a single-page site that had a scrolling background and simulated iframes. My campaign in the My Player mode of NBA 2K10 gave me the inspiration that I needed.
Graphic Design
My goal was to make a page that was basically a slideshow. Each section of the page, or slide in the slideshow, would represent a different team and be the same size as the user’s viewport.
I did Google searches for similar-sized image files of the team logos. Then I used the Live Trace feature in Adobe Illustrator to convert the raster images into vector images so that I could resize the logos as needed without ruining their clarity. I had to use Tracing Options that were less detailed for the sake of my CPU’s performance, but the results met my needs. I also used a few different tools to clean up the traced logos.
Besides the logos, I wanted the background(s) to have a mesh texture. I found a great image of a mesh basketball jersey and stretched it for my purposes, but the resulting image-quality was poor. So, I decided to photograph my old reversible jersey. Finding the right arrangement, distance, and lighting was tricky because I wanted the texture to be a close-up with fabric folds, not wrinkles, yet still have a flat area where a team logo could be superimposed.
Once I had a decent photo, I used it to make different-coloured backgrounds. In Adobe Photoshop, I used the Soft Light blend mode to overlay the mesh photo in front of opaque layers that each had a team-specific colour.
I used a reverse radial gradient to create a low-light effect. The solid black at the bottom and side edges of every background image lets the image blend with the black background behind it. The blending creates the illusion fills the user’s screen even if s/he has a very large screen-resolution.
Dynamic Height
The .height() jQuery method is used to get the height of the user’s viewport. Then the .css() method is used to assign the viewport height to the CSS height of every slide. The height of the content columns is also dynamically assigned with the .css() method, although the content columns are intentionally shorter than the viewport by a fixed amount.
Custom Content Scroller
The content columns use the Custom Content Scroller plugin for jQuery. I generally don’t like iframes&emdash;they actually create extra mouse-movement for the user&emdash;but I’ve implemented simulated iframes just for the sake of it.
The scrollers of this plugin have the built-in functionality of regular scrollbars: the user can drag the scroller, push the scroll buttons, or use a mouse-wheel if the mouse pointer is on the container. Obviously, the look and function of these scrollers can be customized.
This plugin caused some headaches because at first, I dynamically sized the height of the content instead of its visible area. The plugin code required the viewing-area, parent divs to have unique id values, but I tried to use a single JavaScript statement to dynamically size the class of the content-containing, child divs. To make a long story short, I solved my problem by adding a new class value to the parent divs.
One Page Navigation
The smooth scrolling within page sections is done via the One Page Navigation plugin for jQuery. This plugin is easy to implement and has a couple of user-friendly options: the plugin can show the current link in the navigation menu and the URL bar of the user’s browser.
A single menu is fixed at the top of the viewport via CSS. IE6 doesn’t render the position:fixed CSS attribute value that I’m using, though. So, I’ve used some IE6-specific, adapted JavaScript code to continuously anchor and center the nav menu.
Tables
The content containers and stats tables have float: left applied to them, otherwise the stats tables wouldn’t be visible in IE6. The stats tables also have position: absolute and, as a result, they’re anchored to the bottom right of the parent div that contains all of the content within a section.
CSS3
I’ve used the font-face attribute to display the free-use Droid Sans font. I could’ve used the Google Font API, but I wanted to try the “new” CSS3 attribute so I downloaded a useful font-face kit. I’ve also used the text-shadow attribute for the headings and the box-shadow attribute for the images.
Comments are closed.