Bearing Supply Company wanted a custom animated banner on their homepage. This presents a unique challenge for web designers in the post-Flash era of web design.

After experimenting with a canvas blur effect, I found out that blurring in a series of steps was too much work for the processor. As a compromise I opted to load an image that was blurred on top of the image in focus. The blurred image slowly fades giving the illusion that the image is coming into focus. While it wasn't nearly as sophisticated as the canvas blurring effect that I was experimenting with, the final solution was practical and achieved the desired effect.

Also, I used Lettering.js for a nice animation effect for the lettering. The design is responsive.

homepage animated banner

The images in the banner appear to come into focus as text is animated on top of the images.

responsive style

The responsive style of the homepage.

locations map

The locations map was created from code used in earlier projects. One of the custom modifications was showing the photo of the store managers in the marker pop-ups for each location.