Transition JS par Tiago_C22 - page 1

Bonsoir à tous,

Je suis actuellement étudiant en MMI et je doit crée un Portfolio avec mes diverses créations. J'ai commencer celui-ci mais je bloque au niveau des transitions, j'aimerais qu'à chaque fois que l'on clic sur un li du menu, la page approprié a la li apparaît de gauche à droite / de droite à gauche ou de haut en bas / de bas en haut.

J'ai essayer cela en Jquery mais mon code ne fonctionne pas

HTML :

<!doctype html>

<head>
	<meta charset="utf-8"> 
	<title>Portfolio | Tiago</title>
	<link href="https://fonts.googleapis.com/css?family=Abel|Josefin+Sans|Lobster|Titillium+Web" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
	
</head>



<body>


<!-- FOND -->
<div class="page_1">
<h1>PAGE 1</h1>


<!-- /FOND -->




</div>	

<div id="page_2">
<h1>PAGE 2</h1>


<!-- /FOND -->




</div>

<div id="page_3">
<h1>PAGE 3</h1>


<!-- /FOND -->




</div>

<div id="page_4">
<h1>PAGE 4</h1>


<!-- /FOND -->




</div>
<!-- MENU --> 
<nav id="menu">
	<ul>
	
		<li id="accueil"><a href="#accueil" onmouseover="this.style.color='#010101'" onmouseout="this.style.color='#F9F9F8'">ACCUEIL</a>
		<li id="creations"><a href="#creations" onmouseover="this.style.color='#010101'" onmouseout="this.style.color='#F9F9F8'" onClick="page2()">À PROPOS</a>
		<li id="realisations"><a href="#realisations" onmouseover="this.style.color='#010101'" onmouseout="this.style.color='#F9F9F8'" onClick="page3()">RÉALISATIONS</a>
		<li id="contact"><a href="#contact" onmouseover="this.style.color='#010101'" onmouseout="this.style.color='#F9F9F8'" onClick="page4()">CONTACT</a>
	</ul>
	
</nav>
<!-- /MENU --> 



<!-- LOGO + BOUTON -->
<div id="logo">
	<button  id="bouton"  onClick="transition()" >
	</button>
</div>
<!-- /LOGO + /BOUTON -->		
		


</body>
</html>

CSS :

/*Body*/

body {  
margin:0; /* Pas de bordure autour des fonds */
padding:0;
border-width:0;
font-family: 'Josefin Sans', sans-serif;
text-align:left;
font-size: 28pt;
font-weight:bold;
}
/*----------------------------------------------------------------*/

	 
/*PAGES COULEURS */
.page_1 {
position:absolute;
height:100%;
width:100%;
background:#EEF2F1;
z-index:7;
visibility:hidden;
}

.page_1re {
position:absolute;
height:100%;
width:100%;
background:#EEF2F1;
z-index:7;

}

#page_2 {
position:absolute;
height:100%;
width:100%;
background:#DCDCDC;
z-index:6;
}

page_3 {
position:absolute;
height:100%;
width:100%;
background:#C1C1C1;
z-index:5;
}

page_4 {
position:absolute;
height:100%;
width:100%;
background:#B2B2B2;
z-index:4;
}
.fond_position { /* Transition de l'image de fond avec le menu */
margin-top:-120px; 
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
}
/*----------------------------------------------------------------*/	 
	 
h1 {
font-family: 'Josefin Sans', sans-serif;
font-size:75pt;
text-align:center;
position:absolute;
left:40%;
margin-top:17%;
color:#292929;
}	 

	 
	 
/* Bouton */ 
#bouton {
background: url("images/bouton.png") no-repeat center center; /* Bouton du menu */
position:fixed;
z-index:10;
height:30%;
width:3%;
left:10%;
top:34%;
border-style:none; /* Enleve la bordure du bouton */
outline:0; /* Enleve la bordure du bouton quand celui si est sélectionner/activé */
}
/*----------------------------------------------------------------*/





/* Logo hover */
#logo {
background: transparent url("images/logo_tiago.png") no-repeat center center;  /* Logo vert */
height:400px;
width:200px;
position:fixed;
z-index:9;
top:1%;
left:4%;
background-cover:size;
}

#logo:hover {
background: transparent url("images/logo_hover.png") no-repeat center center; /* Logo gris */
height:400px;
width:200px;
background-cover:size;
}


/*----------------------------------------------------------------*/

.menu_position { /* Classe qui s'ajoute au #menu pour le faire bouger */
margin-top:-129px;
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
}

/* Menu */

#menu {	
width:100%;
position:fixed;
background:#292929;
z-index:8;
top:0;
height:20%;
box-shadow: 1px 1px 12px #555; /* Ombre du menu */
}

	 

li:hover {  /*cases */
background:#c8cac7; 
padding-top:20px; /* Remplissage haut */
padding-bottom:20px; /* Remplissage bas */
}
 

 
ul, li{ /*cases et ensemble */
list-style:none; /* Enleve les puces des listes */
text-decoration:none;
padding-left:20px;
padding-right:5px;
display:inline; /* Permet de mettre les li en lignes */
margin: 0 18px;
position:relative;
top:20px;
left:10%;
}
/*----------------------------------------------------------------*/




/* a href */

a { text-decoration:none;
color:white;
}
/*----------------------------------------------------------------*/




@media screen and (min-width:1824px) {
  /* Bouton */ 
#bouton {
background: url("images/bouton.png") no-repeat center center; /* Bouton du menu */
position:fixed;
z-index:4;
height:30%;
width:3%;
left:8.6%;
top:20%;
border-style:none; /* Enleve la bordure du bouton */
outline:0; /* Enleve la bordure du bouton quand celui si est sélectionner/activé */
}
/*----------------------------------------------------------------*/

JS :

// PAGE 1 


$(document).ready(function(){   
    $('#accueil').click(function(){ 
		if($('.page_1').is(':hidden') == false){
			$(".page_1re").filter(':visible').hide("slide", {direction: "down", easing: 'easeInOutSine'}, 900);
			$('.page_1re').show("slide", {direction: "up", easing: 'easeOutSine'}, 900);  			
		}
    });

Merci,

Tiago_C22

1 octobre 2016 à 20:45:00