[この記事は2018年6月13日に更新されました]
紙芝居を見せるように印象的なサイトを作りたくて調べていたらいい感じのjQueryを発見。
実装はできたけどある点ですごく引っかかったので書き留めておきます。
fullPage.jsとは
百聞は一見に如かず、ということで公式のデモサイトを実際に見ていただきましょう。
通常のサイトとは違って1ページ(フルスクリーン)ごとにバスンッとスクロールされますね。
そう、まるで紙芝居！
横スクロールにしたり途中でスライドショーを入れたり、オプションが豊富なのでカスタマイズ次第でさらに広がりそうです。
実装方法
先ほどのfullPage.js公式デモサイトのDownloadをクリックするとZIPファイルがダウンロードできます。
ここから先は素敵な実例を提示している方がいらっしゃいますので割愛します。
今回引っかかった点
レスポンシブ対応にした時、どうしても1ページ(画面)におさまらない場合があります。
親切なことにオプションで「scrollOverFlow」というものがあるのですが、
こちらをTrueにするにはもう一つファイルが必要になります。
scrollOverFlow.jsを忘れずに
インストールしたファイルの「vendors」フォルダの中に入っています。
htmlの書き方は以下の通り。必ずfullPage.jsの上に書きましょう。
※ディレクトリは自分に合ったものにしてください
※通常サイズと縮小版(min.js)があるので気を付けてください
<script type="text/javascript" src="js/scrollOverFlow.min.js"></script> <script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
「scrollOverFlow」で検索していると「slimscroll.js」というファイル名が出てきます。
どうやらこちらから変更されたようなんですよね。
公式のオプション説明を見ていればわかったことですが、英語が読めないもので避けていました(汗)
「scrollOverFlow」をTrueにするには「scrollOverFlow.js」が必要
こちらを覚えておきましょう！
さらなる問題が・・・
現在進行形で困ってます。→一応、解決しました
そもそもそんなデザインにするなよ、と言われたら元も子もないですが、ご存知の方がいらっしゃったら教えていただけますと幸いです。
scrollOverFlow.jsによりコンテンツは見えるようになったのですが、問い合わせフォームの送信ボタンがなぜか押せないんです。
正確にはボタン自体は押せるけどformのsubmitが実行されないんです。
【状況】
・対象は問い合わせフォーム
・スマホで見た場合、1ページにおさまらない
・scrollOverFlow.jsにより内容は確認できる
・テキストボックスおよびテキストエリアは書き込める
・submitが実行できない
・送信ボタンにかけたcss(hoverやaction)は動く
・1ページにおさまっているパソコンやタブレットでは実行できる
position指定しているからz-indexやれば直るかと思ったけどどうやら違うみたいです。
よろしくお願い致します。
【2017-02-22追記】
一応、解決しました。とはいえ、原因はよくわからず、
cssでボタンの色などいじっていたので、jQueryとの相性が悪かったんだと思ってます（笑）
inputタグをbottunタグに変えることで解決しました。
<input type="submit" value="送信" >
を
<button type="submit">送信</button>
で無事送信できました。
問題完全解決
【2018-06-13追記】
この記事を読んでくださった方から解決方法を教えていただきました！
問題が起きていたサイトで試したところ、inputのままでも動くようになりました。
＜解決方法＞
fullPage.jsにオプションを追記します。
scrollOverflowOptions: null,
↓
scrollOverflowOptions: {
click:false,
preventDefaultException: {tagName: /.*/}
}
ありがとうございました！