SingleJS – a jQuery plugin for single page websites

SingleJS is a small jQuery plugin, that helps to create single page websites with automatically images resizing. Commonly with the jQuery easing plugin it offers beautiful animations for transition between sections.

Single page websites jQuery plugin

SingleJS was made to help creating “slideable” single-page websites, with mobile integration.

Setup

bower install singlejs –save

or

npm install singlejs –save

Usage


<div class="single">
    <div id="home">

    </div>

    <div id="skills">
        <a href="#contact">Go To Contact</a>
    </div>

    <div id="portfolio">
        <img src="img/bar.jpg" alt="Foobar" 
            class="single-responsive" />
    </div>

    <div id="contact">

    </div>

</div>

And you can call the plugin like that:

$(".single").single();

Scroll effect on links

Using the href attribute specifying the ID of the element you want to go CSS Style, you can easily get a scroll effect to the targeted section of your website, see the example bellow:

<a href="#contact">Go To Contact</a>

E.g. this link is pointing at the contact section:

<div id="contact"></div>

Auto-resizing images

Using the single-responsive class on every image the plugin will automatically add a sufix to the name of the image as the window changes it’s size. You only need to have 4 different sizes of the same image available.

Plugin Defaults

$("#single").single({
    speed: 2000,
    animation: "easeOutExpo",
    sufixes: {
        smallest: "-xs",
        small   : "-sm",
        medium  : "-md"
    }
});

Sample:

Single page apps with SingleJS plugin
Single page apps with SingleJS plugin

More info and download (GitHub):

https://github.com/rafaelfragosom/singlejs

Enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest2