Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make page transition

I am making a website and I want to make it so that if you click on a button at the bottom of the page you go to a new .html file with a different layout, but I want it to look like that new page is sliding up so that it looks like a cool transition.

Here is an example:

<!DOCTYPE html>
<html>
<body>

    <p>Create a link of an image:
        <a href="default.asp">
            <img src="smiley.gif" alt="HTML tutorial" width="32" height="32">
        </a>
    </p>

    <p>No border around the image, but still a link:
        <a href="default.asp">
            <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32">
        </a>
    </p>
</body>
</html>

I need it to be so that when you click on the picture it goes to a new page, but when it goes to that new page there is a "sliding up" transition.

Thanks!

like image 782
Cam Connor Avatar asked Oct 21 '22 10:10

Cam Connor


1 Answers

You can use an iFrame to accomplish this:

JS Fiddle Demo

I used jQuery Transit for the transition effects:

$("#myLink").click(function () {
    $('#newPage').transition({top: '0%' });
});
like image 171
Gaff Avatar answered Nov 01 '22 13:11

Gaff