jQuery Plugin for Single Page Websites - singlejs

jQuery Plugin for Single Page Websites - singlejs
File Size: 784 KB
Views Total: 1618
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

singlejs is a simple jQuery plugin that helps you to create single page websites with automatically images resizing.  Along with the jQuery Ease Plugin it offers beautiful animations to transition sections.

How to use it:

1. The HTML

<div id="single">
<div data-target="home" id="home">
<div class="content-resizer">
...
</div>
</div>
<div data-target="about" id="about">
<div class="content-resizer">
...
<a href="#" data-link="home" class="btn-normal">Back</a> <a href="#" data-link="examples" class="btn-normal">Next</a> </div>
</div>
<div data-target="examples" id="examples">
<div class="content-resizer">
...
<a href="#" data-link="about" class="btn-normal">Back</a> <a href="#" data-link="contact" class="btn-normal">Next</a> </div>
</div>
<div data-target="contact" id="contact">
<div class="content-resizer">
...
<a href="#" data-link="examples" class="btn-normal">Back</a> <a href="#" data-link="home" class="btn-normal">Back to top</a> </div>
</div>
</div>

2. Include jQuery library, jQuery ease plugin and singlejs on your web page

<script src="js/jquery-1.9.1.min.js"></script> 
<script src="js/jquery.easing.js"></script> 
<script src="js/single-0.1.0.js"></script> 

3. The javascript

<script type="text/javascript">
$(document).ready(function(){
$("#single").single({
speed: 1000
});

// Just a javascript alignment to the content
function alignContent() {
var windowHeight = $(window).height();

$('.content-resizer').each(function(){
contentHeight = $(this).height();
$(this).css('top', (windowHeight/2) - (contentHeight/2));
});

$('.alt-img').html($("#img-example").attr('src'));
}

// Execute the function
alignContent();

// Bind the function to the window.onresize
$(window).bind("resize", function(){  
alignContent();  
});
});
</script>

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