Look at the Wix site;
It may be noted that by clicking on links like Home, Services, Work, Blog, it applies an implementation called PageTransitions with Jquery.
I did an implementation with the help of some employees of the Stack Overflow website that was like this;
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="bootstrap-theme.css" />
<h:outputStylesheet library="css" name="bootstrap.css" />
<h:outputStylesheet library="css" name="sistema.css" />
<link rel="stylesheet" type="text/css"
href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<h:outputScript library="js" name="jquery-2.1.4.min.js" />
<h:outputScript library="js" name="jquery-ui.js" />
<h:outputScript library="js" name="bootstrap.js" />
</h:head>
<script type="text/javascript">
//<![CDATA[
$(window).load(function() {
function transitionPage() {
// Hide to left / show from left
$("#home").toggle("slide", {
direction : "left"
}, 500);
// Show from right / hide to right
$("#servico").toggle("slide", {
direction : "right"
}, 500);
}
$(document).ready(function() {
$('#home').click(transitionPage);
$('#servico').click(transitionPage);
});
});//]]>
</script>
<h:body>
<div id="part2">
<div id="home">
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
</div>
<div id="servico">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><!--LatestcompiledandminifiedJavaScript--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</h:body>
</html>
And even though it did not catch on!
What's wrong? I think it's bullshit.