CODEWITHSUNDEEP
htmlcss-transitionstransition
Cam Connor
Cam Connor

Reputation: 1231

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!

Upvotes: 5

Views: 8852

Answers (5)

XenonPy
XenonPy

Reputation: 48

These answers all use JS, and even though this post is old it still pops up in search results, so I would like to provide an update with a pure CSS solution. You can now use the @view-transition rule to do this, without need for JavaScript.

Upvotes: -1

Adam Brown
Adam Brown

Reputation: 2870

You could also try implementing something like a vertical slider , much like the coda slider but this one is developed for vertical scrolling. Demo.

I tried making these kind of transitions full page and found it difficult. (But I'm a JQ N00B)

Magic slider Offers horizontal and vertical scrolling and could be easier to implement.

Also have a look at this (tutorial here) which might be a simple solution to what you need.

Actually I think this last one is the closet to what you want

Upvotes: 0

Adrian
Adrian

Reputation: 46562

I've had success using something like this: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

The only issue is that you may see a brief flash of the new page, which will then disappear, and then be transitioned in. This is more or less unavoidable without using iframes or something similar (something I'm generally loathe to do).

Upvotes: 0

Gaff
Gaff

Reputation: 5667

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%' });
});

Upvotes: 3

Andrey Shchekin
Andrey Shchekin

Reputation: 21609

I am not sure if it is possible for standard navigation. Some options that should be possible:

  1. Use JavaScript to navigate (either by putting all on the same page or through AJAX)
  2. Put everything on the same page and use :target and CSS transitions

For option 1 you can still have reasonable URLs in the browser if you use the history API.

Upvotes: 0

Related Questions