Comments (3)
Hi Isabell,
here is a small example, how to set it up:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="about">About</a></li>
</ul>
</nav>
</header>
<main>
<div id="barba-wrapper">
<div class="barba-container">
...Put here the content you wish to change between pages...
</div>
</div>
</main>
<footer>
FOOTER
</footer>
<script src="path/to/barba.min.js"></script>
<script>
// Barba.js
Barba.Pjax.start();
Barba.Prefetch.init();
</script>
</body>
</html>
Of course the script should be saved in an external JavaScript file.
After this basic setup, you can add your custom transition to it.
from barba.
Hello @Mexikaner9 ,
In any case Barba.js is not really a ready-to-use library/plugin.
You must write your own Transition based on your site so some basic JS knowledge is required.
from barba.
Hello marcobiedermann,
Thank you for your help!
hello luruke
It would be great for people like me, if Barba.js a ready-to-use library/plugin.
I have to learn Javascript
have a nice day
best regards
Isabell
from barba.
Related Issues (20)
- Source map failed to load HOT 3
- Compiling error HOT 1
- Disable `prefetch` on specific links HOT 1
- Maintain element on transition HOT 1
- Typescript issue with documentation example HOT 1
- Page content is duplicated when opened HOT 1
- CSP violation from parseFromString HOT 1
- Back button not working as intended after clicking anywhere on the page HOT 7
- Improve Google Analytics guide in the documentation
- Change the wrapper/container on the fly? HOT 3
- Typescript can't find declaration folder because the name is wrong HOT 5
- Remove polyfill.io from documentation HOT 1
- When linking to pages with hashes, hash does not appear in final URL HOT 2
- OWL Carousel doesn't work HOT 1
- Improve documentation on options to barba.init HOT 4
- External links, checkboxes and radio buttons are not working anymore HOT 12
- Checkboxes not working, and external links are not redirected HOT 3
- Form submissions broken since 2.10.2 HOT 3
- Help! All of my a href https link won't open HOT 5
- Barba breaks when route contains colon and number HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from barba.