Comment créer un super site web à page unique avec jQuery

Les sites web à page unique ou One Page Navigation en anglais sont devenu à la mode surtout après que plusieurs marques de renommées  mondiales l’ont utilisés pour présenter de façon originale le lancement d’un produit ou un service.  

One page Navigation

Vous pouvez consulter la démonstration ici : Démo

Si vous souhaitez faire la même chose voici comment procéder :

Fichier HTML :

<!-- Section #1 -->
	<section id="top" data-speed="10" data-type="bgSite">
	  <article>
		<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, impedit, libero quis aliquid laudantium omnis eius soluta ullam hic nisi! Quidem, iure, mollitia ipsa maxime sunt eveniet quo culpa tempora!</div>
		<div>Autem, rem iure odit ad et quos maxime totam vero error temporibus eveniet tenetur voluptate ipsa sit dolores molestias mollitia illum magnam consequatur id dolorem accusamus in officia voluptatibus harum.</div>
		<div>Fugit, architecto, quidem, odio, aspernatur natus sit assumenda veritatis quo iure perspiciatis nobis ipsum libero rerum deleniti nostrum voluptas at esse vitae corrupti eius veniam ducimus autem sunt suscipit nulla!</div>
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, mollitia, voluptatem ut suscipit dolor tenetur incidunt vel molestias dicta nihil at illum distinctio cumque quaerat eum. Rem, quibusdam dolores accusamus!</div>
		<div>Amet, aspernatur, ut, nihil modi distinctio repudiandae quaerat fugit nesciunt a cupiditate optio ab illum sapiente tempora numquam. Vitae architecto dolor velit error quis fuga at laboriosam rerum rem corrupti?</div>
	  </article>
	</section>

	<!-- Section #2 -->
	<section id="middle" data-speed="4" data-type="bgSite">
	  <article>
		<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>

		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, impedit, libero quis aliquid laudantium omnis eius soluta ullam hic nisi! Quidem, iure, mollitia ipsa maxime sunt eveniet quo culpa tempora!</div>
		<div>Autem, rem iure odit ad et quos maxime totam vero error temporibus eveniet tenetur voluptate ipsa sit dolores molestias mollitia illum magnam consequatur id dolorem accusamus in officia voluptatibus harum.</div>
		<div>Fugit, architecto, quidem, odio, aspernatur natus sit assumenda veritatis quo iure perspiciatis nobis ipsum libero rerum deleniti nostrum voluptas at esse vitae corrupti eius veniam ducimus autem sunt suscipit nulla!</div>
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, mollitia, voluptatem ut suscipit dolor tenetur incidunt vel molestias dicta nihil at illum distinctio cumque quaerat eum. Rem, quibusdam dolores accusamus!</div>
		<div>Amet, aspernatur, ut, nihil modi distinctio repudiandae quaerat fugit nesciunt a cupiditate optio ab illum sapiente tempora numquam. Vitae architecto dolor velit error quis fuga at laboriosam rerum rem corrupti?</div>
	  </article>
	</section>

	<!-- Section #3 -->
	<section id="bottom" data-speed="8" data-type="bgSite">
	  <article>
		<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>

		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, impedit, libero quis aliquid laudantium omnis eius soluta ullam hic nisi! Quidem, iure, mollitia ipsa maxime sunt eveniet quo culpa tempora!</div>
		<div>Autem, rem iure odit ad et quos maxime totam vero error temporibus eveniet tenetur voluptate ipsa sit dolores molestias mollitia illum magnam consequatur id dolorem accusamus in officia voluptatibus harum.</div>
		<div>Fugit, architecto, quidem, odio, aspernatur natus sit assumenda veritatis quo iure perspiciatis nobis ipsum libero rerum deleniti nostrum voluptas at esse vitae corrupti eius veniam ducimus autem sunt suscipit nulla!</div>
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, mollitia, voluptatem ut suscipit dolor tenetur incidunt vel molestias dicta nihil at illum distinctio cumque quaerat eum. Rem, quibusdam dolores accusamus!</div>
		<div>Amet, aspernatur, ut, nihil modi distinctio repudiandae quaerat fugit nesciunt a cupiditate optio ab illum sapiente tempora numquam. Vitae architecto dolor velit error quis fuga at laboriosam rerum rem corrupti?</div>
	  </article>
	</section>

 

Fichier CSS :

#top { background: url(images/top.jpg) 50% 0 no-repeat fixed; height: 800px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
#middle { background: url(images/middle.jpg) 50% 0 no-repeat fixed; height: 800px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
#bottom { background: url(images/bottom.jpg) 50% 0 no-repeat fixed; height: 800px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; box-shadow: 0 0 50px rgba(0,0,0,0.8); }

	#top article {  position: absolute; top: 150px; width: 100%; }
	#middle article { position: absolute; top: 150px; width: 100%; }
	#bottom article { position: absolute; top: 150px; width: 100%; }

		#top h1 { text-align: center; font-size: 2.2em; color: #ffffff; margin-bottom: 50px;}
		#top div { color: #fff; width:  600px; margin: 0 auto; text-align: justify; line-height: 20px; padding-bottom: 10px; text-shadow: 1px 1px 1px #000; background-color: rgba(0,0,0, 0.5); padding: 10px; border-radius: 0px;}

		#middle h1 { text-align: center; font-size: 2.2em; color: #ffffff; margin-bottom: 50px;}
		#middle div { color: #fff; width:  600px; margin: 0 auto; text-align: justify; line-height: 20px; padding-bottom: 10px; text-shadow: 1px 1px 1px #000; background-color: rgba(0,0,0, 0.5); padding: 10px; border-radius: 0px;}

		#bottom h1 { text-align: center; font-size: 2.2em; color: #ffffff; margin-bottom: 50px;}
		#bottom div { color: #fff; width:  600px; margin: 0 auto; text-align: justify; line-height: 20px; padding-bottom: 10px; text-shadow: 1px 1px 1px #000; background-color: rgba(0,0,0, 0.5); padding: 10px; border-radius: 0px;}

 

Code jQuery :

$(document).ready(function(){
	// Cache the Window object
	$window = $(window);

	$('section[data-type="bgSite"]').each(function(){
		var $bgItem = $(this); 

		$(window).scroll(function() {

			var yPos = -($window.scrollTop() / $bgItem.data('speed')); 

			var coordonnees = '80% '+ yPos + 'px';

			$bgItem.css({ backgroundPosition: coordonnees });

		}); 

	});	

}); 

//pour IE
document.createElement("article");
document.createElement("section");

Vous pouvez consulter la démonstration ici : Démo

Si vous avez des questions n’hésitez pas à les poser dans les commentaires.