I've been working on designing a website that includes a welcome page before users enter the main site. When visitors click the enter button, the initial page slides up and the new page emerges from underneath.
Here's an example of what I'm aiming for: .
If you click the enter button on that site, you'll see a smooth transition to a different page (notice the URL change). That's the effect I want to achieve.
So far, I've experimented with various plugins like animsition but haven't had much luck. My latest attempt involved using iframes, although it does not update the URL.
Here is my 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%' });
});
});