jQuery Plugin for Single Page Websites - singlejs

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

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.