0
Watch from the Wix website;
It can be noted that by clicking on links like Home, Services, Work, Blog it applies an implementation called Pagetransitions with Jquery.
I made an implementation with the help of some collaborators of the Stack Overflow site that looked 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>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</h:body>
</html>
and yet you didn’t take!
What’s wrong? I believe it’s bullshit.
found templates like this one: https://github.com/codrops/PageTransitions/tree/master/css
– wladyband
You have an example here. https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
– PauloHDSousa
@Paulohdsousa, example that has been shown does not make me see where I went wrong in my project.
– wladyband