January 7, 2018
Barba-js | jQuery plugin to create badass, fluid and smooth transition between your website’s pages.
Created by Luigi De Rosa
barba.js is a small (4kb minified and gzipped), flexible and dependency free library that helps you creating fluid and smooth transitions between your website's pages.
It helps reducing the delay between your pages, minimizing browser HTTP requests and enhancing your user's web experience.
Barba.js uses PJAX (aka push state ajax) to enhance the user's experience.
This technique consist in preventing the normal link behavior, changing manually the browser url, and injecting manually the new content in the page. In this way there will be no browser "hard refresh".
Here is a walkthrough of what happens when the user clicks a link:
.barba-container) and puts the new content on the DOM inside
Please note, on server side, your pages will need to be served normally.
In order to have a better understanding on how Barba.js works I suggest you to read this article I wrote for Smashing Magazine.
Using this technique will bring numerous benefits:
barba.js supports AMD, CommonJS and Browser global (using UMD).
You can install it using npm:
npm install barba.js --save-dev
or just including the script in your page:
or you can use cdnjs:
barba.js needs to know a little bit about your DOM structure. By default uses this markup structure in your pages:
<div id="barba-wrapper"> <div class="barba-container"> ...Put here the content you wish to change between pages... </div> </div>
Please note, all the selector (#barba-wrapper, .barba-container) are easily editable, see the API section.
After you've included barba.js in your project it's time to initialize it
// Please note, the DOM should be ready Barba.Pjax.start();
Barba.js is created in the spare time by Luigi De Rosa and released under MIT licence.
Any help on the project is more than welcomed.
For any problem/question do not hesitate to open an issue.
For any other information, please visit the websitebarba.js
© 2013 jquer.in
Curated By Jay Kanakiya