AnimePaper: Fantastic Wallpaper Site

This post is about one of my "daily visit" sites: AnimePaper. I found the site a few months ago – I don't remember how – and it has been a regular source of new backgrounds ever since. AnimePaper (AP) has been set up, in their own words, to be "all about making wallpapers and being creative". I think this is an apt description of the site as a brief glance at some of the wallpapers will tell you. The site is also a great place to check out some of the things that can be done with standard web technologies. If you're in the market for some anime, or manga or game, related wallpapers – or want to check out some cool web techniques – then give it a look.

The site does have some interesting rules, such as only allowing 15 papers to be downloaded per user in a 24 hour period. Users are also expected to contribute something back, be in the form of actual wallpapers, scans, monetary donations or even simple comments about other people's work. Each user has a count of "papers" that increases whenever they contribute and can be redeemed for scans.

Scans, in case it's not clear, refers to raw material, usually scanned from books, magazines, ads, and so on, that can be used in the production of wallpapers. The library/gallery of scans is one of the distinguishing factors of AP and definitely something you should check out if you're interested in making a wallpaper of your own.

The site is organised fairly simply into a main page, which shows off the latest additions to the site as well as recent highly rated work, and a set of galleries for wallpapers and scans. One of these galleries is Session Zero, which is a place for new wallpapers to go to be reviewing and critiqued before being put into the main gallery.

Session Zero, like much of the site, contains an interesting interface and technology. When reviewing a wallpaper you have the ability to add notes to specific parts of the image to give a more detailed analysis of what you think. You might point out an area where there are visual artefacts, for example, or an object you think should be removed. I think this is a stroke of brilliance and allows far more meaningful feedback in some cases than "that bit near the top right corner".

Apart from Session Zero, other areas of the site display some nifty use of Javascript and CSS. On the main page is a slideshow for a (seemingly?) random collection of wallpapers. When I first saw this I thought it was Flash but it actually makes use of the opacity CSS property and Javascript to create a "flash and fade" between wallpapers. Each wallpaper lives in it's own div, with a link to the wallpaper page, and are layered on top of one another, ready to be displayed. At the bottom of each slide is the title of the wallpaper and its creator. This information is placed on top of a semi-transparent PNG image, which lets the wallpaper underneath show through.

Each wallpaper (or scan) in a listing is contained in a separate box, which has a thumbnail of the image and some information about the wallpaper – the title, creator and when it was posted or modified. The thumbnail shows off some nice CSS and has a border around the image (made with a white background, 4px padding and a 1px grey border) and has a small dropshadow (made with a combination of a GIF for the main shadow and a PNG image over the top of it to remove some hard edges, as well as some more CSS to glue everything together). I think this shows off some of the great things you can achieve using pure CSS.

The submit buttons are nicely styled as well and use the CSS sprites/fast rollover technique to avoid both Javascript and the annoying wait for another image to load when you mouseover an object. The sprite technique is incredibly simple and effective, especially in the simple case of rollovers, so I'm surprised it's not used in more places.

I should note that the site validates fine but does use some methods that I'd recommend not using yourself, such as inline Javascript instead of attaching behaviours through the DOM.

Overall, I'd recommend AnimePaper for those of you wanting some high quality wallpapers or those who wish to check some "Web 2.0″ ideas and investigate some creative uses of CSS and Javascript.