11540 sujets

JavaScript, DOM et API Web HTML5

Scroll de div en div

Bonjour Smiley smile
J'ai un peu chercher mais je ne trouve rien qui correspond à ce que je cherche même si c'est assez simple...
La page de mon site (ici) est composé de plusieurs div qui prennent la hauteur de l'écran à chaque foi.
J'aimerai juste trouver un petit script qui passe de div en div lorsque l'on scroll + la navigation au clavier qui va avec...
J'ai bien trouver des début de piste mais rien qui n'arrive au résultat que je souhaite.
Alors voilà, si vous avez des petits tuto ou des scripts sous la main....
Merci Smiley smile
Marche très bien sur fiddle, mais pas vraiment en vrai, même en essayant de bidouiller le sélécteur firstSection...
Je l'ai héberger ici.
Cassangel a écrit :
Marche très bien sur fiddle, mais pas vraiment en vrai, même en essayant de bidouiller le sélécteur firstSection...
Je l'ai héberger ici.

lol Smiley biggrin Tu penses bien que s'il marche su JSField alors il marchera partout. Tu as juste placer le code n'importe comment Smiley cligne 

<!DOCTYPE html> 
<html lang="fr-FR">
	<head>
		<meta charset="utf-8" />
		<title>Titre de la page</title>
		<link rel="stylesheet" href="style.css" />
		<style type="text/css">
			html, body {height:100%;}
			html, body, section, p {margin:0;}
			#Conteneur-Central {overflow:hidden;height:100%;}
			#wrapper {white-space:nowrap;height:100%;}
			#Conteneur-Central section {position:relative;display:inline-block;vertical-align:top;width:100%;height:100%;color:#fff;transition:margin-left 1s ease;}
			#Conteneur-Central section:nth-child(1) {background:#0099CC;}
			#Conteneur-Central section:nth-child(2) {background:#12D05F;}
			#Conteneur-Central section:nth-child(3) {background:#CC3029;}
			#Conteneur-Central section:nth-child(4) {background:#FFC02A;}
			#Conteneur-Central section:nth-child(5) {background:#CC3D91;}
			#Conteneur-Central p {overflow:hidden;position:relative;top:45%;text-align:center;font:500% sans-serif;}
			#Conteneur-Central a span {font-size:0 !important;color:transparent !important;}
			#Conteneur-Central p+a:before {content:"«";left:2%;}
			#Conteneur-Central a+a:before {content:"»";right:2%;}
			#Conteneur-Central p+a:before, #Conteneur-Central a+a:before {position:absolute;width:60px;height:60px;top:50%;margin-top:-20px;text-align:center;font:250%/53px sans-serif;border-radius:30px;color:#333;background:#fff;}
			#Conteneur-Central a[href="#"] {display:none;}
		</style>
	</head>	
	<body>
		<div id="Conteneur-Central">
			<div id="wrapper">
				<section id="un">
					<p>1</p>
					<a href="#"><span>nul</span></a><a href="#deux"><span>Suivant</span></a>
				</section><!--
			 --><section id="deux">
			 		<p>2</p>
					<a href="#un"><span>Précédent</span></a><a href="#trois"><span>Suivant</span></a>
			 	</section><!--
			 --><section id="trois">
			 		<p>3</p>
					<a href="#deux"><span>Précédent</span></a><a href="#quatre"><span>Suivant</span></a>
			 	</section><!--
			 --><section id="quatre">
			 		<p>4</p>
					<a href="#trois"><span>Précédent</span></a><a href="#cinq"><span>Suivant</span></a>
			 	</section><!--
			 --><section id="cinq">
			 		<p>5</p>
					<a href="#quatre"><span>Précédent</span></a><a href="#"><span>nul</span></a>
			 	</section>
			</div>
		</div>
	<script type="text/javascript">
		function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}
		function elementIndex(a,b){for(var i=0, l=a.length; i<l; i++){if (a[i]===b) return i;}}
		
		var navLinks = document.querySelectorAll("#Conteneur-Central section a"),
			allSections = document.querySelectorAll("#Conteneur-Central section"),
			firstSection = document.querySelector("#Conteneur-Central>div>section:first-child"),
			currentIndex = 0, clicked = false;
		
		
		function scrollSection(e){
			(e.stopPropagation()) ? e.stopPropagation() : e.cancelBubble;
			(e.preventDefault) ? e.preventDefault() : (e.returnValue = false);
		
			var cur = e.target || e.srcElement,
				positionMaxDebut = (currentIndex == 0 && (e.detail < 0 || e.wheelDelta > 0 || e.keyCode == 37 || e.keyCode == 38)),
				positionMaxFin = (currentIndex == allSections.length-1  && (e.detail > 0 || e.wheelDelta < 0 || e.keyCode == 39 || e.keyCode == 40) && !clicked),
				toucheNonGeree = e.keyCode < 37 || e.keyCode > 40;
			
			if (positionMaxDebut || positionMaxFin || toucheNonGeree) return;
		
			var	scrollNext = e.detail > 0 || e.wheelDelta < 0 || e.keyCode == 39 || e.keyCode == 40,
				targetElement = clicked ? document.getElementById(cur.hash.substring(1)) : allSections[scrollNext ? currentIndex+1 : currentIndex-1],
				targetIndex = elementIndex(allSections, targetElement);
		
			currentIndex = targetIndex;
			clicked = false;
			
			firstSection.style.marginLeft = "-"+ (currentIndex * 100) + '%';
		}
		
		
		for(var i=0, l=navLinks.length; i<l; i++){
			addEvent(navLinks[i], "click", function(e){
				clicked = true;
				scrollSection(e);
			}, false);
		}
		
		addEvent(document, "DOMMouseScroll", scrollSection, false);
		addEvent(document, "mousewheel", scrollSection, false);
		addEvent(document, "keyup", scrollSection, false);
	</script>
	</body>
</html>


EDIT: erreur de copie.[/i][/i]
REEDIT : il y a un problème en copiant le code directement du forum, je ne sais pas pk
Modifié par Zelalsan (27 Sep 2013 - 11:35)
Sujet clos
Aller à