Smooth page transitions using jQuery [video]
Posted at December 11, 2011
I uploaded a video to youtube explaining how to do some basic smooth page transition using javascript (jQuery).
Here is the video:
You can see a live example of the effect over here (also demonstrated in the video).
This is the code from the end of the video:
JS
$(function() {
var request = window.location.hash;
if(request == '#page-2') {
$('.page.current').removeClass('current');
$('.page').eq(1).addClass('current');
}
$('nav a').click(function(){
var speed = 200;
var i = $(this).index();
$('.page.current').animate({opacity: 0, marginTop:80},speed,function(){
$(this).removeClass('current');
$('.page').eq(i).css('marginTop',30).animate({opacity:1,marginTop: 50},speed).addClass('current');
});
});
});
HTML
<!doctype html>
<html lang=lipsum>
<head>
<meta charset=utf-8>
<title>smooth page transition</title>
<link rel=stylesheet href='style.css'>
</head>
<body>
<nav>
<a href='#page-1'>first page</a>
<a href='#page-2'>second page</a>
</nav>
<div class='page current'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu dignissim leo.
Maecenas eleifend, massa eget faucibus lobortis, dolor mauris adipiscing leo, sit amet
tristique urna quam non risus. Maecenas sagittis ligula ac magna vestibulum hendrerit.
Praesent dignissim elit eu massa laoreet varius. Nullam tortor erat, fringilla ac consectetur
eu, lacinia eu sapien. Nunc bibendum porta rhoncus. Sed convallis vehicula feugiat.
<img src='fire.jpg'>
</div>
<div class='page'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu dignissim leo.
Maecenas eleifend, massa eget faucibus lobortis, dolor mauris adipiscing leo, sit amet
tristique urna quam non risus. Maecenas sagittis ligula ac magna vestibulum hendrerit.
Praesent dignissim elit eu massa laoreet varius. Nullam tortor erat, fringilla ac consectetur
eu, lacinia eu sapien. Nunc bibendum porta rhoncus. Sed convallis vehicula feugiat.
<img src='water.jpg'>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS
html {
overflow-y:scroll;
}
body > div, nav {
width:640px;
margin:auto;
margin-top:50px;
}
.page {
display:none;
opacity:0;
}
.page.current {
display: block;
opacity: 1;
}