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.
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.