Суть работы Barba.js очень проста - она перехватывает ссылки на страницы текущего сайта, загружает их в память, выделяет контейнер с контентом и заменяет его на странице. Все это может сопровождаться анимацией.
Хороший пример использования, на мой взгляд, можно посмотреть на странице документации.
Ссылка на сайт проекта barba.js
Из минусов, могу отметить:
Мало готовых красивых примеров. Простое изменение opacity, которое есть в примерах, выглядит не очень интересно.
Т.к. подгружается не вся страница, то активные пункты меню нужно подсвечивать "руками". Также интерактивные элементы, например, кнопки "в корзину", могут не работать. Нужно на них повесить события, после загрузки контента.
Конечно можно и всю страницу перезагружать, но нужно будет проверить производительность и как сработает javascript.
Простенький пример:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>barba</title>
<style type="text/css">
ul {
display: flex;
gap: 12px;
}
ul li {
list-style: none;
}
.active {
color: red;
}
</style>
</head>
<body data-barba="wrapper">
<?
$iPage = isset($_REQUEST['page'])?(int) $_REQUEST['page']:0;
?>
<ul>
<?
for($i = 0; $i < 4; $i++) {
$sClass = $iPage==$i?'active':'';
?>
<li>
<a class="<?=$sClass?>" href="/?page=<?=$i?>">
Page <?=$i?>
</a>
</li>
<?
}
?>
</ul>
<main data-barba="container" data-barba-namespace="home">
<?='<h1>Page '.$iPage.'</h1>'?>
</main>
<script src="https://unpkg.com/@barba/core"></script>
<script src="https://unpkg.com/gsap@latest/dist/gsap.min.js"></script>
<script type="text/javascript">
barba.init({
transitions: [{
name: 'opacity-transition',
leave(data) {
return gsap.to(data.current.container, {
opacity: 0,
});
},
enter(data) {
return gsap.from(data.next.container, {
opacity: 0
});
}
}]
});
</script>
</body>
</html>