Create A Responsive One Page Website with jQuery and CSS3 - Full Page Slider
File Size: | 654 KB |
---|---|
Views Total: | 1278 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.