Barba: Need basic help

Created on 13 Jul 2016  路  3Comments  路  Source: barbajs/barba

Hello
I am a beginner in HTML and CSS, but I do not understand Javascript, but I want to learn it.
I would like to use Barba.js, but I do not know what I have to do.
Can someone please tell what I have to add in my page to have a transition as on

http://magacom.fr/
http://www.poigneedemainvirile.com/
http://www.adrenalinmedia.com.au/
https://www.stanleystella.com/
http://www.budidiokojinedostaje.hr/

Thanks in advance.

Best regards
Isabell

question
Source
picture Mexikaner9

Most helpful comment

@Mexikaner9

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.

picture marcobiedermann on 13 Jul 2016
👍2

All 3 comments

@Mexikaner9

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.

marcobiedermann picture marcobiedermann on 13 Jul 2016
👍2

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.

luruke picture luruke on 13 Jul 2016

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

Mexikaner9 picture Mexikaner9 on 13 Jul 2016
Was this page helpful?
0 / 5 - 0 ratings

Related issues

luglio7 picture luglio7  路  4Comments
kram08980 picture kram08980  路  3Comments
ProdesignerAgency picture ProdesignerAgency  路  3Comments
EmilyChews picture EmilyChews  路  3Comments
hosxes picture hosxes  路  3Comments