神刀安全网

Barba.js – Create smooth transition between your website's pages using pushState

barba.js is a small (4.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.

Websites using Barba.js

Barba.js – Create smooth transition between your website's pages using pushState Barba.js – Create smooth transition between your website's pages using pushState Barba.js – Create smooth transition between your website's pages using pushState

View demos

Features

Installation

barba.jssupports 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:

<script src="barba.min.js" type="text/javascript"></script>

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();

Contribute

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.

Other

For any other information, please visit the website

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Barba.js – Create smooth transition between your website's pages using pushState

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址