Barba Js Not Working

最近、私はHTML（HTML How to Transition Between Pages）のページ間の移行に関する質問をしました。だから私はbarba.jsと呼ばれるものを見つけたので、それを得ました...それはうまくいきませんでした。私はしばらくの間探しましたが、文書や指示に従うのは簡単ではありませんでした。ここでBarba Js Not Working

は、私はそれは私が望んでいたまさに響きのウェブサイトにあるため説明から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>

ですが、偉大なより良い選択肢があれば、私は好ましくは私の問題の解決策を好むだろう

- おかげです！

更新日 私はコードの一部を変更しましたが、まだ動作していません。 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]）の例の1つからこのコードの大半を得ています

私は本当にこのようなjavascriptやものと悪いです大変感謝しています！

出典

2017-02-11 CianB