Create A Responsive One Page Website with jQuery and CSS3 - Full Page Slider

An Html5, CSS3 and jQuery based responsive one page website template that allows to reveal more content with subtle effects when your scroll down the page.

How to use it:

1. Include the required CSS files in the head section of the page.

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

2. Markup Html structure.

<nav>
<li class="flex-item">TITLE</li>
<li class="flex-item">ABOUT</li>
<li class="flex-item">NEWS</li>
<li class="flex-item">SUPPORT</li>
</nav>
<div class="main-screen">
<ul class="slideshow">
<li class="image"></li>
<li class="image"></li>
<li class="image"></li>
</ul>
</div>
<section>Put some lovely content here!</section>
<section>Put some lovely content here!</section>
<section>Put some lovely content here!</section>

3. Include the latest version of jQuery javascript library at the end of the page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

4. The jQuery script. Add the following javascript snippet into your JS file or include the index.js directly in the page.

function slideSwitch() {
var $active = $('.image.active');

if ( $active.length === 0 ) $active = $('.image:last');

var $next =  $active.next().length ? $active.next()
: $('.image:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 800, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});



/*JQUERY FOR NAV BAR*/


if ($("nav").is('*')) {
var elem = $('nav');
var offset = elem.offset();
var topValue =  offset.top + elem.height();
var width = elem.width();
$(window).scroll(function (event) {
  var y = $(this).scrollTop();
if (y >= topValue) {  
if (!$('nav').hasClass('follow')){	 
   $("nav").hide().addClass("follow").fadeIn(250);
}
} else {
  $(".follow").removeClass("follow");
}
 });
}

---

This awesome jQuery plugin is developed by Develonaut. For more Advanced Usages, please check the demo page or visit the official website.