CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-transitions
Matthew James Morris
Matthew James Morris

Reputation: 93

Creating a slide up transition between two seperate pages

So i have been trying to create a website that has a welcome page before you actually enter the site and when you press the enter button the first page slides up and then the new page comes up from underneath.

To give you an idea of what i really mean here is a good example,http://keepearthquakesweird.com .

You will notice that when you press the enter button there is a page transition to a completely different page (Take note of the url change). This is what i am trying to achieve.

So far i have tried alot of different plugins such as animsition, (Cant remember the others :P) but nothing has seemed to work so my latest attempt has been with iframes (Noted that the url wont change).

Latest attempt:

HTML

<a id="myLink" href="#">
            Click to slide in new page
    </a>


<iframe id="newPage" src="https://jsfiddle.net/"></iframe>

CSS

#myLink {
position: absolute;
}

iframe {
width: 100%;
height: 100%;
top: 100%;    
position: fixed;
background-color: blue;
}

JQuery

$(document).ready(function() {
    $('#myLink').click(function() {
    $('#newPage').transition({top: '0%' });
    });
});

Upvotes: 2

Views: 1083

Answers (2)

mjsarfatti
mjsarfatti

Reputation: 1745

The page you linked to uses the History API, which allows to change the URL address without a full page reload. As others have said, you would:

  1. Capture the click and load the new content via AJAX
  2. transition/animate the page to show the new content
  3. update the address bar using the History API

I suggest using smoothState.js (a jQuery plugin), it does all of the above for you.

Ps: iframes is not the way to go, they have a very different purpose

Upvotes: 1

Anil Kumar Ram
Anil Kumar Ram

Reputation: 1221

I can give you one solution for your problem statement..

Use <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)"> inside head section.

and for transition there are more than 20 type listed below..

0       Rectangle towards centre
1       Rectangle from centre outwards
2       Circle towards centre
3       Circle from centre outwards
4       Horizontal wipe from bottom to top
5       Horizontal wipe from top to bottom
6       Vertical wipe from left to right
7       Vertical wipe from right to left
8       Vertical Blinds from left to right
9       Horizontal blinds ftom top to bottom
10      Box Blinds from left to right
11      Box Blinds from top to bottom
12      Pixel Fade
13      Vertical Window Opening from middle to sides
14      Vertical Window Closing from sides to middle
15      Horizontal Window Opening from middle to top/bottom
16      Horizontal Window Closing from top/bottom to middle
17      Diagonal: bottom right to top left
18      Diagonal: top right to bottom left
19      Diagonal: bottom left to top right
20      Diagonal: top left to bottom right
21      Vertical Line Fade
22      Horizontal Line Fade
23      Random

but transitions are not supported by all browsers, and are therefor often considered as bad design.

HOPE THIS WILL HELP YOU.

Upvotes: 2

Related Questions