Zoom Out

Submitted by AppCreator on Thu, 07/24/2008 - 12:30

When developing the APSystems website the client wanted the banner image to zoom into focus when the page loads. Firstly I was thinking of doing it in Flash, my Flash skills are pretty rusty so I came up with a method of doing it via jQuery's animate effect.

The banner is actually two parts, the main image and an overlay logo and text that is fixed in place. The overlay image is a transparent png so I used the Drupal PNG fix Module to get transparency working in IE. The main image dimensions are larger then the area for the banner so the quality is still good when zooming.

Here's the CSS used to position the images and ensure the image doesn't break out of the container.
/* container */
#logo-title {
overflow:hidden;
height:153px;
width:768px;
position:relative;
margin:0 10px;
}

/* main image */
.logo{
position:absolute;
top:0; left:0;
z-index:1;
}

/* overlay image */
.logo-text{
position:absolute;
top:101px; left:21px;
z-index:6;
}

drupal_add_js(
"$(document).ready(
function(){
/* first position and resize the main image to larger then it's true dimensions */
$('.front .logo').css({
width:'2000px',
height:'400px',
margin:'0',
position:'absolute',
left:'-384px',
top:'-76px'
});

/* then use jQuery's animate effect to zoom fully into view */
$('.front .logo').animate({
width: '768px',
height: '153px',
left: '0',
top:'0'
},
13000)
})",
'inline');