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

質問

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

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

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

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

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

回答No.3

rukuku

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

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

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

お礼

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

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

回答No.2

rukuku

こんにちは

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

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

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

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

補足

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

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

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

回答No.1

Taiyonoshizuku

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

補足

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