technoholic.ca » Web Design

jQuery Shine animation effect

Peter — Sat, 13 Nov 2010 18:16:39 +0000

I’ve been diving deeper into jQuery lately, because a few clients have been requesting Flash-like functionality for their websites, and I’ve been avoiding Flash since before Steve Jobs made it cool to do so. I have to say, there is more and more that jQuery can do that Flash used to only do. I recently came across one great example of this while researching button effects for a personal project (release coming soon). Addy from AddyOsmani.com posted this great article about a shine effect using jQuery called “ShineTime – A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects.” The best part of the effect is that it’s so simple to implement and if you’re at all comfortable with jQuery and CSS, the method used with background-position opens up a world of possibility with other effects other than shine, which at least I wasn’t aware of. Check out his demo to see the effect in action.

The entire thing really boils down to a few lines of jQuery Javascript code and some CSS. When a event happens, such as a hover or a page load, a shine PNG image is changed from a background position of off the screen to one that crosses to the other side off the screen. With a little modification, I made the effect display a few seconds after the page loads using setTimeout, rather than when you hover over an element, which produced a great little embellishment for a button or a logo when a visitors comes to the site. It’s a great little effect that you used to only be able to do with Flash.

One Major Reason to Register YourName.com

Peter — Wed, 12 Nov 2008 08:19:33 +0000

Registering your name as a domain name has been common place for a long time. However, some people have more marketable names than others, which might prevent some from registering their names as domain names. Just look at me. My name is Peter Szymczak, which isn’t exactly the most marketable name. Heck, most English speaking people can’t say my last name without having me explain it, let alone try to remember how to type it.

Marketing a company or freelance services under my name, therefore, is not really the best idea. This is why I didn’t register the domain name peterszymczak.com in past; however, recently, I’ve come across a great reason for why you should register your name as a domain name and throw up even a single page, if you can afford it. Having my own web hosting for other projects, registering one extra domain name really only costs me the annual domain registration fee. It may cost you more than that if you don’t have the luxury of having a web server for hosting, but you should probably still do it.

My big reason for registering the domain? The information age is upon us and employers are increasingly googling names of people who apply at their company. The organization I work with does this, and whenever I’m hiring someone, I always throw their name into google. Heck, I even throw co-workers names into google sometimes to see the dirt on them. Having your dot-com name will position you very well in google to turn up as a high search result, if not the first result. I’ve put together a single page for peterszymczak.com, which essentially looks like a business card, and I’m waiting for google to index it right now.

I guess the essential idea here is to regain some control over those search results for your name by registering your dot-com. You’re name is a brand and you should try to regain control over what it means on search engines.

WordPress and sIFR

Peter — Wed, 22 Oct 2008 16:04:15 +0000

I’ve been tinkering around with sIFR over the last day and a bit in my free time, and I’ve got it working on the site for the top level navigation menu and titles. I have to say, it’s pretty sweet. Now, all of my blog post titles can show up smooth and crisp and I have way more control over the font on the site. I’m really pleased with how it has turned out. It wasn’t even difficult to implement.

I followed the sIFR wiki and had it working to my liking within a few hours. It’s even working nicely with my transparent PNG background fade, so I’m happy all around this morning.

IE6 PNG Fix

Peter — Tue, 21 Oct 2008 15:47:12 +0000

I recently redesigned this website with the intension of using transparent PNGs to add some extra creativity to the design. Naturally, I knew that IE6 was going to be a major challenge pain in the ass. I decided to leave the PNG fix for IE6 until the last minute, but I worried that it would come back to haunt me in the end. Fortunately, thanks to the following post, it all came together well. I am not finished with the design, but at least I have a solid start with PNGs in place.

To use the same PNG fix for IE6 that I did, download SuperSleight.