Smooth splash screen transition for Windows Phone panorama apps

∞ Fri, 22 Jun 2012 · Comments

I was trying to finally get into some coding today and decided to create a simple stopwatch application for Windows Phone using the panorama control. However, as I’m much more comfortable with Photoshop, I immediately set out to create a good-looking splash screen for the app. I wanted an effect similar to what Apple recommends for iOS apps, which is using a mockup of the actual user interface as the splash screen to provide a seamless app-launching experience. Here’s the result:

Obviously, the app is very barebones at this point, but I’ll hopefully make some progress in the next few days.

Anyway, to achieve this effect, take a screenshot of the last (right-most) panorama screen and shift it 50px 48px to the right (for example using the excellent Paint.NET, if you don’t have Photoshop). If you have a background image, you’ll also need to copy part of it into the splash screen to fill out the newly-empty pixels; if you have a solid background, just fill them with the appropriate color. Now, save this image and set it as the splash screen image. Done!

If you’ve got any questions regarding this trick, feel free to leave a comment. I will try to help where I can.

How to: enlarge images on click using CSS and JavaScript

∞ Fri, 27 Apr 2012 · Comments

Instead of using a lightbox script to display enlarged versions of embedded images, I decided that there was a better solution, for my own needs anyway: images should simply expand to their full size on click. So, I sat down today to figure out how to do that, and arrived at a solution that I feel is good enough for me to replace the otherwise excellent fancyBox with. If you want a quick demonstration of what I mean, head over to my PSDs page – clicking on any image will enlarge it, or you can even click on a special link to quickly toggle all images between regular and full size.

Here’s how to do it. Continue →