仕事でfullPage.jsを使用して全画面表示のスライドを作成したのですがライセンスエラーで少し困ったので無料で使用する方法を記載します。
と言っても3系をやめて2系にするだけですが。
公式サイト
https://alvarotrigo.com/fullPage/
github
https://github.com/alvarotrigo/fullPage.js
ライセンスエラー
Chromeに表示されるエラー文
fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a licenseKey
option. Read about it here:
fullPage.jsの最新ファイルは3.x系ですがgithubのライセンス項目にあるように1,000円位で購入するか、ソースコード全体をオープンソースライセンスにする必要があります。
クライアント案件なので勝手にオープンソースには出来ませんし、安いとはいえどうしたものかと思って調べたら2系はMITライセンスで無料で使える事がわかりました。
2系のgithub
https://github.com/aminta/fullPage.js-2.9.6
なので少し古い2系を使う事で解決します。
ページ一番下のライセンスのところにMITと書いてあります。
「jquery.fullpage.min.css」と「jquery.fullpage.min.js」に変えて上げれば完了です。
3系と2系の違い
普通に使う分には特に問題ないと思いますが、3系にあって2系にないメソッド等もあります。
例えば「getActiveSection()」などのget系は2系には無いようです。
動きをフェードに変更
こちらのサイトでフェードに切り替えるためのソースが公開されています。
上記サイトではSCSSで書かれていますが、コンパイルしたものが下記になります。
cssに追加してあげるだけでフェードに変わります。
.fullpage-wrapper {
width: 100% !important;
-webkit-transform: none !important;
transform: none !important;
}
.fullpage-wrapper .fp-section {
width: 100% !important;
position: absolute;
left: 0;
top: 0;
visibility: hidden;
opacity: 0;
z-index: 0;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.fullpage-wrapper .fp-section.active {
visibility: visible;
opacity: 1;
z-index: 1;
}
.fullpage-wrapper .fp-section .fp-slidesContainer {
width: 100% !important;
-webkit-transform: none !important;
transform: none !important;
}
.fullpage-wrapper .fp-section .fp-slidesContainer .fp-slide {
width: 100% !important;
position: absolute;
left: 0;
top: 0;
visibility: hidden;
opacity: 0;
z-index: 0;
-webkit-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.fullpage-wrapper .fp-section .fp-slidesContainer .fp-slide.active {
visibility: visible;
opacity: 1;
z-index: 1;
}