スライド式ホームページの不具合

現在ホームページを作っています。
スライド式のページを作りたいなとおもっています。
最初は「fullPage.js」というプラグインを使っていたのですが、使いづらく(横フリックが過敏すぎる等)自作することにしました。
一応chromeを使いながらデバッグして完成したのですが、不具合が2点ほど見つかりました。
http://dossi.jp/
↑今その状態になっています。

・firefoxで切り替えたときにデザインがカクカクしたりなんかフチが微妙
・スマホで切り替えたときにアニメーションがダメダメ。

スライドの仕組みとしては、ボックスを横に並べて、アンカーにあわせてボックスを移動させていました。
ただ、それだと、左に隠されたのは見れませんが右に隠されているコンテンツはスクロールできてしまいます。
overflow-x:hiddenがうまく作用しなかったので、アニメーションのとき以外は見えないコンテンツはdisplay:noneで消すことにしました。
スマホで見ると、スライドして全てがinlineになり表示されたときに本来隠されているところも縮小表示されてしまいおかしく見えてしまいます。(viewportは設定しているのですが・・)

参考用にデータも以下に用意しました。
http://localhost/haihuyou.php

どうすればこの不具合を直す事ができるか、ご教授ください。

No.3 回答者： rukuku 回答日時： 2014/12/27 00:15

＞スクロールシステムをページの根幹にしたいがゆえに、コンテンツごとにアンカーをつけて、このURLにすれば、このコンテンツに飛べる。

といった風にできたほうがいいかなと思っているのですが、それがちょっと出来なさそう・・

検証はしていませんが、各画像を<a>タグでくくれば実現はできると思います。
ただ、スクロールとリンクの組み合わせはもしかしたら、うまくないのではという実験もありますのでこちらも参考にしてみてください。
http://www.e-agency.co.jp/column/20141212.html


スクロールはあくまで「イメージ的な存在」でその他のナビなどには使わない方法もあります。
以下は参考サイトです。
http://arc-hairsalon.com/
http://pros-per.jp/
http://sushi-kiraku.com/

この回答へのお礼

回答ありがとうございました。
とりあえずは、スクロールをページ根幹としないデザインで作っていこうと思います。

参考サイトを見たりしながら考えていきます。

お礼日時：2014/12/30 16:39

No.2 回答者： rukuku 回答日時： 2014/12/25 14:16

こんにちは

一案ですが、あえて自作しないで、目的にあったツールを探してみるという手もあります。
CarouFredSel　というツールを試してみてください。

・設定の方法は以下のサイトが一番詳しいと思います。
http://www.jquerystudy.info/plugins/carou/fred1. …

・配付元のサイトにコード付きでサンプルが掲載されています。
http://caroufredsel.dev7studios.com/

・こちらもコード付きのサンプルが豊富です。
http://coolcarousels.frebsite.nl/

この回答への補足

一通り軽く見てみました。
スクロールシステムをページの根幹にしたいがゆえに、コンテンツごとにアンカーをつけて、このURLにすれば、このコンテンツに飛べる。といった風にできたほうがいいかなと思っているのですが、それがちょっと出来なさそう・・。

また、自分の見たいコンテンツネームをクリックしてそのページに飛べる操作パネル（メニュー）の実装の仕方もちょっとぱっと見た感じ分かりませんでした・・。

何か方法はないのでしょうか。

補足日時：2014/12/26 00:02

No.1 回答者： Taiyonoshizuku 回答日時： 2014/12/25 13:01

ごめん、localhostのhaihuyou.phpをリンクされても見れないんだ。

この回答への補足

あ、申し訳ないです。リンクはり間違えました。
こちらです。
http://dossi.jp/haihuyou.php

補足日時：2014/12/25 13:44