barba README

The project's README from github.com/barbajs/barba. As one markdown file: README.md.

barba.js – Stability CircleCI Coverage Status Commitizen friendly Conventional Commits lerna License All Contributors Slack workspace

Create badass, fluid and smooth transitions between your website’s pages.

barbajs

Intro

Barba.js — aka Barba — is a small (7kb minified and compressed) and easy-to-use library that helps you create fluid and smooth transitions between your website's pages. It makes your website run like a SPA (Single Page Application) and help reduce the delay between your pages, minimize browser HTTP requests and enhance your user's web experience.

Features

Barba is user friendly, smart, extensible and futureproof. The library provides a bunch of useful features that will make your website shine like any other website, ever!

Documentation

Here you will find the documentation describing how to use the library.

  1. Website - official Barba website
  2. User guide - how to install and use the plugin
  3. Lessons, courses and videos - for in-depth learning
  4. Showcase - selected works made with Barba
  5. Developer API - by developers, for developers

[!NOTE] This guide assumes intermediate knowledge of HTML, CSS, and JavaScript. It is worth mentioning that all code examples use ES6+ syntax. If you are not comfortable with this syntax, we would encourage you to grasp the basics then come back.

In case of emergency, check the "legacy" code example.

Sponsor

If you like this library and want to give some recognition, it is now possible to become a Github sponsor and support this project by sponsoring BarbaJS maintainer on Github. Even if it's a small contribution, you participate in the effort of making open source projects maintained for anyone, and developers to be rewarded for their work/time.

Contribute

If you want to report a bug or request a new feature/improvement, please read the project contributors guidelines before.

Thanks for taking time to contribute to Barba :tada: :+1:

Contributors

Luigi De Rosa
Luigi De Rosa

🤔 💻 📖 💬 🐛 ⚠️ 👀 🚇
Thierry Michel
Thierry Michel

🤔 💻 📖 💬 🐛 ⚠️ 👀 🚇
Xavier Foucrier
Xavier Foucrier

🤔 💻 📖 💬 ⚠️ 👀 🐛 🚇
Marco Grimaldi
Marco Grimaldi

🎨
Petr TIchy
Petr TIchy

📝 ✅ 📹
Cody Marcoux
Cody Marcoux

💬
Phil.
Phil.

💬
Giorgio Finulli
Giorgio Finulli

💬
Wouter
Wouter

🐛 💬
Mike Wagz
Mike Wagz

🤔 💬 ⚠️
Red Stapler
Red Stapler

✅ 📹
Jérémy Levron
Jérémy Levron

💬
Nguyen Van Anh
Nguyen Van Anh

💻
Daniel Weber
Daniel Weber

💻
Jean-Marie Porchet
Jean-Marie Porchet

💻
James
James

💻
Nicholas
Nicholas

💻
Patrick Arminio
Patrick Arminio

💻
A (from Sicily)
A (from Sicily)

💻
Pavel Mazhuga
Pavel Mazhuga

💬
Daniele De Matteo
Daniele De Matteo

💬
aswinkumar863
aswinkumar863

💬
BounceIncHQ
BounceIncHQ

💬
gordonwes
gordonwes

💬
Evan Fleet
Evan Fleet

💬 🐛
Jörg
Jörg

💡
ZAAK
ZAAK

💡 💬
Masahiro Tonomura
Masahiro Tonomura

💡
CassiusHR
CassiusHR

💬
Shane Murphy
Shane Murphy

💬
Dylan Reeves
Dylan Reeves

💬 💡
Quentin Neyraud
Quentin Neyraud

💬
tortilaman
tortilaman

💬
psntr
psntr

💬
Kevin Clark
Kevin Clark

💬
Tadeas Kosek
Tadeas Kosek

💬
Gustavo de Andrade
Gustavo de Andrade

💬
Clinton
Clinton

💬

barba (barbajs/barba)

Searching Database…

13K ·GitHub
这是什么?Barba.js 是一个小型 JavaScript 库,可以在普通网站的页面之间实现流畅的类 SPA 页面切换效果,从而减少加载延迟和 HTTP 请求。
它是框架,还是只是个小型辅助库?它是一个轻量库(压缩后 7kb),而不是完整的框架。你只需把它加到现有网站上,就能拦截页面跳转并为页面切换添加动画。
我该怎么把它加到网站里?通过你常用的 JS 工具安装它,然后按照官方用户指南操作,指南中涵盖了该插件的安装和使用方法。
除了基础的 HTML/CSS/JS 知识,我还需要别的吗?你只需要中级水平的 HTML、CSS 和 JavaScript 知识,示例中全程使用的 ES6+ 语法也需要了解。
它能在老旧浏览器中运行吗?Barba 面向现代浏览器,采用渐进增强的方式。如果你需要支持不兼容 ES6 的环境,可以参考一个单独的旧版代码示例作为备选方案。
它适用于任何网站,还是只适用于特定的环境?它是与框架无关的客户端 JS,可以直接加入任意网站的页面中,支持自定义标记、命名空间和 data 属性结构等灵活配置。
我可以用插件扩展 Barba 吗?可以,它自带插件系统和内置工具,你可以添加页面预取等功能来进一步提速。
Barba 如何决定播放哪种过渡效果?它有一套过渡解析系统,通过一系列规则,让 Barba 能自动为某次页面切换选出合适的过渡效果。
“Sync mode”是什么?Sync mode 用于控制过渡的 leave 和 enter 钩子是同时播放,还是依次播放。
Barba 是用 TypeScript 编写的吗?是的,它提供了一套简化的 API,使用 TypeScript 编写,并通过 Promise 来处理过渡的生命周期。
Creator
barbajs
Size
30.5 MB
Stars
13K
Age
10y
Commits · 90 Days