11548 sujets

JavaScript, DOM et API Web HTML5

Slide entre divs?

Bonjour à tous,

Après avoir cherché sur le net, je viens vers vous pour de l'aide ou des pistes pour résoudre mon problème.

Je suis débutant en html / css alors si j'ai des erreurs quelque part c'est normal je pense.

Je vous explique mon cas:

4 divs dans une page qui dont tous 100% de la fenetre (h et w) avec le contenu centré horizontalement et verticalement + un header de 50px qui est toujours positionné au dessus de ça.

Je pense que j'ai plutôt réussi avec les codes suivants:


<div id="header">
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#work">work</a>
<a href="#contact">contact</a>
</div>

<div id="home">
	<div class="content">
		<div class="bloc">
			<h1>Hello World Home</h1>
		</div>
	</div>
</div>

<div id="about">
	<div class="content">
		<div class="bloc">
			<h1>Hello World About</h1>
		</div>
	</div>
</div>


<div id="work">
	<div class="content">
		<div class="bloc">
			<h1>Hello World Work</h1>
		</div>
	</div>
</div>


<div id="contact">
	<div class="content">
		<div class="bloc">
			<h1>Hello World Contact</h1>
		</div>
	</div>
</div>


CSS:


/* sticky header */

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color:black;

}

/* general content */

.content {
	height:100%;
	line-height:60em;
}

.bloc {
  width:100px;
  vertical-align:middle;
  display:inline-block;
  line-height:1.2;
  padding-bottom:50px;
 }

 /* divs navigation */
 
 #home {
	width:100%;
	height:100%;
	margin:0;
	float:left;
	background-color:red;
}

 #about{
	width:100%;
	height:100%;
	margin:0;
	float:left;
	background-color:green;
}

 #work{
	width:100%;
	height:100%;
	margin:0;
	float:left;
	background-color:purple;
}

 #contact{
	width:100%;
	height:100%;
	margin:0;
	float:left;
	background-color:pink;


Donc ça, ça marche plutôt pas mal, en espérant que ce soit une manière correcte pour faire ce genre de choses.

Mais voila mon soucis: Je voudrais appliquer un effet de slide entre les divs #home #about #work #contact un peu comme ceux qu'on voit sur les carrousels (une transition fluide quoi). Es-ce possible avec ce code? Ou devrais-je me diriger?

Merci d'avance Smiley smile .
Bonjour,

tu pourrais t’inspirer de ceci (testé sous ff9 et iron14 pour ie voir les commentaires dans le code) :
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Diaporama</title>
  <style>
	/* sticky header */
	#header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:50px;
	background-color:#000;
	z-index:1;
	}

	.content {
	height:100%;
	line-height:60em;
	}

	.bloc {
	width:100px;
	vertical-align:middle;
	display:inline-block;
	line-height:1.2;
	padding-bottom:50px;
	}

	#home,#about,#work,#contact {
	width:100%;
	height:100%;
	
	/* Mis en position absolue
	position:absolute;
	
	/* Modifie le 1s pour jouer sur la durée de la transition */
	-moz-transition:opacity 1s ease-out;
	-webkit-transition:opacity 1s ease-out;
	transition:opacity 1s ease-out;
	margin:0;
	}

	#home {
	background-color:red;
	}

	#about {
	background-color:green;
	}

	#work {
	background-color:purple;
	}

	#contact {
	background-color:#FFC0CB;
	}
</style>
</head>
<body>
<div id="header"><a href="#home">home</a><a href="#about">about</a><a href="#work">work</a><a href="#contact">contact</a></div>
<div id="home"   ><div class="content"><div class="bloc"><h1>Hello World Home   </h1></div></div></div>
<div id="about"  ><div class="content"><div class="bloc"><h1>Hello World About  </h1></div></div></div>
<div id="work"   ><div class="content"><div class="bloc"><h1>Hello World Work   </h1></div></div></div>
<div id="contact"><div class="content"><div class="bloc"><h1>Hello World Contact</h1></div></div></div>
<script type="text/javascript"><!--
	var tabDiv = ["home", "about", "work", "contact"], i;
	function diapositiveSuivante(i) {
		"use strict";
		var j;
		for (j = 0; j < tabDiv.length; j += 1) {
			// Si la diapositive est à afficher on met l’opacité à 1 sinon à 0. Il faudra traiter le cas de Internet Explorer ici en utilisant son filtre propriétaire object.filter = "alpha(opacity=" + opacity + ")";
			document.getElementById(tabDiv[j]).style.opacity = (i % tabDiv.length === j ? "1" : "0");
		}
		setTimeout(function() {diapositiveSuivante(i + 1);}, 2000);
	}
	window.onload =  function() {
		"use strict";
		// À partir d’ici toute la page est chargée, on peut commencer à agir sur la page.
		diapositiveSuivante(0);
	};
//-->
</script>
</body>
</html>
Sujet clos
Aller à