Barba Js不能正常工作

好的，最近我問了一個關於HTML頁面間轉換的問題（HTML How to Transition Between Pages）。所以我發現了這個叫做barba.js的東西，所以我得到了它，並且它不起作用。我搜索了一段時間，實際上不容易遵循或清除文檔或說明。Barba Js不能正常工作

這裏是我的網頁代碼（所有頁面的代碼是相同的）

<DOCTYPE html> 
<div id="barba-wrapper"> 
<div class="barba-container"> 
<html lang="en"> 

    <body background="Img1.png"> 
    <link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/> 
    <link rel="stylesheet" href="css.css" type="text/css"/> 
    <script src="barba.js"></script> 
    <script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://d36mw5gp02ykm5.cloudfront.net/yc/adrns_y.js?v=6.10.505#p=wdcxwd5000bevt-22a0rt0_wd-wx21a706024960249";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script></head> 
    <script src="nextprev.js"></script> 
    <script src="TweenMax.min.js"></script> 
    <title>Page 1</title> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <center><big><font size="15">A Beach Somewhere</font></big></center> 
    <center><h3><b><a href="Page2.html">Next&#10140;</a></b></h3></center> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 

    <br> 
    <br> 

    </body> 

</html> 
</div> 
</div>

我想用barba.js因爲它聽起來正是我想要的網站上的描述，但如果有更好的替代方案會很好，但我最好喜歡解決我的問題

- 謝謝！

UPDATE 所以我現在改變了一些我的代碼，但它仍然不工作。 HTML：

<DOCTYPE html> 
<html lang="en"> 

    <body background="Img1.png"> 
    <main id="barba-wrapper" data-prev="" data-next="Page2.html"> 
    <div class="barba-container"> 
    <link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/> 
    <link rel="stylesheet" href="css.css" type="text/css"/> 
    <title>Page 1</title> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <center><big><font size="15">A Beach Somewhere</font></big></center> 
    <center><h3><b><a href="Page2.html" class="nav next">Next&#10140;</a></b></h3></center> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 


    </div> 
    </main> 

    </body> 

</html> 

<script src="barba.js"></script> 
<script src="nextprev.js"></script> 
<script src="TweenMax.min.js"></script> 

<script> 
    document.addEventListener("DOMContentLoaded", function(event) { 
     Barba.Pjax.start(); 
     }); 
</script>

CSS.css：

font{ 
    size:25; 
    color:#FFFFFF; 
    } 

body { 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 

html, body { 
    overflow-x: hidden; 
    margin: 0; 
    padding: 0; 
    color: #555; 
} 


.barba-container { 
    position: relative; 
}

nextprev.js：

document.addEventListener("DOMContentLoaded", function() { 
    var lastElementClicked; 
    var PrevLink = document.querySelector('a.prev'); 
    var NextLink = document.querySelector('a.next'); 

    Barba.Pjax.init(); 
    Barba.Prefetch.init(); 

    Barba.Dispatcher.on('linkClicked', function(el) { 
    lastElementClicked = el; 
    }); 

    var MovePage = Barba.BaseTransition.extend({ 
    start: function() { 
     this.originalThumb = lastElementClicked; 

     Promise 
     .all([this.newContainerLoading, this.scrollTop()]) 
     .then(this.movePages.bind(this)); 
    }, 

    scrollTop: function() { 
     var deferred = Barba.Utils.deferred(); 
     var obj = { y: window.pageYOffset }; 

     TweenLite.to(obj, 0.4, { 
     y: 0, 
     onUpdate: function() { 
      if (obj.y === 0) { 
      deferred.resolve(); 
      } 

      window.scroll(0, obj.y); 
     }, 
     onComplete: function() { 
      deferred.resolve(); 
     } 
     }); 

     return deferred.promise; 
    }, 

    movePages: function() { 
     var _this = this; 
     var goingForward = true; 
     this.updateLinks(); 

     if (this.getNewPageFile() === this.oldContainer.dataset.prev) { 
     goingForward = false; 
     } 

     TweenLite.set(this.newContainer, { 
     visibility: 'visible', 
     xPercent: goingForward ? 100 : -100, 
     position: 'fixed', 
     left: 0, 
     top: 0, 
     right: 0 
     }); 

     TweenLite.to(this.oldContainer, 0.6, { xPercent: goingForward ? -100 : 100 }); 
     TweenLite.to(this.newContainer, 0.6, { xPercent: 0, onComplete: function() { 
     TweenLite.set(_this.newContainer, { clearProps: 'all' }); 
     _this.done(); 
     }}); 
    }, 

    updateLinks: function() { 
     PrevLink.href = this.newContainer.dataset.prev; 
     NextLink.href = this.newContainer.dataset.next; 
    }, 

    getNewPageFile: function() { 
     return Barba.HistoryManager.currentStatus().url.split('/').pop(); 
    } 
    }); 

    Barba.Pjax.getTransition = function() { 
    return MovePage; 
    }; 
});

Tweenmax.min.js：https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js

Bootstrap.css：getbootstrap.com

我從barba頁面上的一個例子中得到了大部分代碼（[barbajs.org/demo/nextprev/index.html]）

我真的很不熟悉javascript和類似的東西，所以任何幫助都會非常感謝！

來源

2017-02-11 CianB