What is this effect?

[andrew_biggart]

Does anyone know how i would go about creating this effect? When you scroll over the image it moves down and reveals another image below it.

 

Like this

http://www.iamdan.net/works.html

 

and also at the top of the page when u clcik news i drop down box slides out.

 

Can anyone point me in the right direction to creating these effects please?

[Alex]

I made a quick example for you. One method is having 2 images and making them overlap by giving one a negative margin. Then manipulating this margin using JavaScript.

 

Here's my JavaScript:

 

function moveImage(id, millisec)
{
var speed = Math.round(millisec / 100);
var timer = 0;
if(parseInt(document.getElementById(id).style.marginTop.substr(0, document.getElementById(id).style.marginTop.length-2)) < -58)
{
	for(var i = 0;i <= 100;i++)
	{
		setTimeout("setMargin('" + id + "', 'dec')",(timer * speed)); 
		timer++;
	}
}
}

function restorePlacement(id, millisec)
{
var speed = Math.round(millisec / 100);
var timer = 0;
if(parseInt(document.getElementById(id).style.marginTop.substr(0, document.getElementById(id).style.marginTop.length-2)) < 0)
{
	for(var i = 0;i <= 100;i++)
	{
		setTimeout("setMargin('" + id + "', 'inc')",(timer * speed)); 
		timer++;
	}
}
}

function setMargin(id, movement)
{
if(movement == 'dec')
{
	document.getElementById(id).style.marginTop = parseInt(document.getElementById(id).style.marginTop.substr(0, document.getElementById(id).style.marginTop.length-2)) + 1 + 'px';
}
else if(movement == 'inc')
{
	document.getElementById(id).style.marginTop = parseInt(document.getElementById(id).style.marginTop.substr(0, document.getElementById(id).style.marginTop.length-2)) - 1 + 'px';
}
}

 

And here's the html:

 

<img id="php" src="http://farm4.static.flickr.com/3195/3131799428_962aba66f1.jpg?v=0" alt="Php" /><br />
<img id="mysql" style="margin-top: -158;" src="http://www.adwh.com/images/logo-mysql.jpg" alt="MySQL" onmouseover="moveImage('mysql', 300)" onmouseout="restorePlacement('mysql', 300);" />

 

Here's the result: http://alexwd.us.to:1337/test/rollover.php

[justAnoob]

if you dont' mind me asking, on the first site iamdan, the picture flows smoothly, on your example, you can control the picture up and down movement. Is there a simple fix to that? your example is still pretty cool though.

[Alex]

if you dont' mind me asking, on the first site iamdan, the picture flows smoothly, on your example, you can control the picture up and down movement. Is there a simple fix to that? your example is still pretty cool though.

Yea, my example was just a quick fix. I might edit it with a better example later. But the reason why it's like that is because on the first website as long as it's within the area of either image it flows down. On my example only if it's on the MySQL image does it move, so even if you place it on the Php image once it has moved, it will go down. The solution and reason behind this is simple. You must just apply this to a <div> that contains the images, instead of applying it to images.

[Zane]

This is straight from the source of the site you posted

<br />
    $(function() {<br />
        $(&#039;.wrap&#039;).hover(function() {<br />
            $(this).children(&#039;.front&#039;).stop().animate({ "top" : &#039;50px&#039;}, 300);   <br />
        }, function() {<br />
            $(this).children(&#039;.front&#039;).stop().animate({ "top" : &#039;0&#039;}, 250);       <br />
        });<br />
    });<br />

 

This is called jQuery....essentially a language written from javascript statements.