Barba.jsの横移動画面遷移を実装する
最近ウェブサイト作りにはまっています。以前学んだときは、目的意識も低くやる気もなかったが、今はポートフォリオ作りとして結構気合を入れて学んでいます。
初心者でウェブサイト制作に興味のある人は手始めにドットインストールとかでざっくりと学んでから無料のウェブサーバーを利用して自分のサイトを立ち上げてみることをお勧めする。
机上の学習よりも実際に制作してみて、足りないところ、忘れたところ、応用させたいことなどを学んでいく方がモチベーションも続くし着実に力が付くと思う。
今回気になったのは以下のデモサイトで実装されている横移動画面遷移である。
http://barbajs.org/demo/nextprev/index.html
一回ローカル環境に落としてみて、ファイルを編集しながら気づいたのは、TweenMaxのJavaScriptを削除したら横移動しなくなったことである。
初めてTweenMaxの存在を知ったのだが、このJavaScriptによって画面遷移のアニメーション実装がなされていたことがわかった。
私の場合、navで複数のリンクを所持しているのでnext prevに関する記述を削除したら思うような挙動が得られた。
//Transition setting for Barba.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;
};
});
もしnext prevを実装したいならhtmlにdata-prev="4.html" data-next="2.html や next, prev クラスを追加する必要がある。
ソースコードを参照すればわかると思う。
0 件のコメント :
コメントを投稿