質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4955閲覧

skrollrを使って縦にスクロールさせたい

退会済みユーザー

退会済みユーザー

総合スコア0

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/08/24 16:55

編集2017/08/25 04:31

http://prinzhorn.github.io/skrollr/

上記のサイトのskrollrを使ってスマホ用に縦にスクロールさせたいのですが、うまくいきません。

色々なサイトのサンプルを試すのですが、綺麗に動いた試しがありません。

skrollr使って簡単で簡潔にスクロールする方法はありますでしょうか?

1ページに背景画像1枚としてページ分スクロールさせたいです。

参考サイトをみて以下のように作りましたが、スムースに動きませんでした。

アドバイスを頂けると幸いです。

[html]

<!DOCTYPE HTML> <html class="fsvs"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/top_style.css"> <link rel="stylesheet" type="text/css" href="css/flow_style.css"> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/skrollr.js"></script> <title>TEST COMPANY</title> </head> <body> <header> <h1><a href="index.html"></a></h1> </header> <nav> <div id="ham-menu"> <ul> <li><a href="index.html" title="ホーム">ホーム</a></li> <li><a href="#" title="コンセプト">コンセプト</a></li> <li><a href="#" title="ギャラリー">ギャラリー</a></li> <li><a href="#" title="制作の流れ">制作の流れ</a></li> <li><a href="#" title="注文">注文</a></li> <li><a href="#" title="会社概要">会社概要</a></li> <li><a href="#" title="問い合わせ">問い合わせ</a></li> </ul> </div> <div id="menu-background"></div> </nav> <div id="content1" data-0="top:0%;opacity:1;" data-3000="top:100%;opacity:0.3;" > <!-- / .content1 --></div> <div id="content2" data-3000="opacity:1;" data-6000="opacity:0;"> <!-- / .content2 --></div> <div id="content3" data-6000="top:0%" data-9000="top:100%"> <!-- / .content3 --></div> <div id="content4" data-6000="background-position:0px 0px;" data-12500="background-position:0px -500px;"> <!-- / #content4 .content4 --></div> <p id="leftout" data-0="left:50%;" data-3000="left:-100%;">Left Out</p> <div id="transform" data-1000="top:100%;transform:scale(0) rotate(0deg);opacity:1;" data-3000="top:50%;transform:scale(4) rotate(360deg);" data-6000="opacity:0;"> <p>Transform</p> <!-- / #transform --></div> <div class="box" data-9000="top:10%;left:30%;" data-11000="top:-50%"> <p>テキストテキストテキストテキストテキストテキスト </p> <!-- / .box --></div> <div class="easing"> <p data-6500="left:50%;top[cubic]:100%;" data-9000="top:0%;">cubic</p> <p data-6500="left:30%;bottom[quadratic]:100%;" data-9000="bottom:0%;">quadratic</p> <p data-6500="left:70%;bottom[swing]:100%;" data-9000="bottom:0%;">swing</p> <!-- / .easing --></div> <p class="end" data-10000="opacity:0;left:50%;top:50%;" data-11000="opacity:1">end</p> </body> </html>

[CSS top_style]

@charset "UTF-8"; /* CSS Document */ * { margin:0 auto; padding:0; } body { width:100%; color:#333; font-size:14px; } header { width:100%; margin-top:20px; margin-bottom:20px; } h1 { display:block; width:80px; height:80px; background-image:url("../img/icon.png"); background-repeat:no-repeat; text-align:center; } h1 span { display:none; } h1 a { display:block; width:100px; height:100px; } .header_p1 { padding-left:20px; font-weight:bold; padding-top:25px; text-align:center; } a:link { color:#333; text-decoration:none } a:visited { color:#333; text-decoration:none } a:hover { color:#333; text-decoration:none } a:active { color:#333; text-decoration:none } a:hover { opacity: 0.5; } ul { list-style:none; line-height:2.5em; } /*メニュー部分*/ #ham-menu { background-color: #fff; /*メニュー背景色*/ box-sizing: border-box; height: 100%; padding: 10px 40px; /*メニュー内部上下左右余白*/ position: fixed; right: -300px; /*メニュー横幅①と合わせる*/ top: 0; transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/ width: 300px; /*メニュー横幅①*/ z-index: 1000; } /*メニューアイコン部分は疑似要素で*/ #ham-menu::before { background-color: #fff; /*ボタン部分背景色*/ border-radius: 0 0 0 10px; /*左下角丸*/ color: #333; /*アイコン(フォント)色*/ content: "≡"; /*メニューアイコン*/ display: block; font-size: 50px; /*アイコン(フォント)サイズ*/ height: 50px; line-height: 50px; /*縦位置中央化*/ position: absolute; right: 100%; text-align: center; top: 0; width: 50px; } /*透過背景部分*/ #menu-background { background-color: #333; /*黒背景部分背景色*/ display: block; height: 100%; opacity: 0; position: fixed; right: 0; top: 0; transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/ width: 100%; z-index: -1; } /*hover 時の処理*/ #ham-menu:hover { transform: translate(-300px); /*メニュー横幅①と合わせる*/ } #ham-menu:hover + #menu-background { opacity: 0.5; /*黒背景部分透過度*/ z-index: 999; } img { max-width:100%; height:auto; vertical-align:bottom; } .clearfix { *zoom: 1; } .clearfix:after { content: ''; display: table; clear: both; }

[CSS flow_style]

@charset "UTF-8"; /* CSS Document */ html, body { width:100%; height:100%; padding:0; margin:0; overflow-x:hidden; } .skrollable { /* * First-level skrollables are positioned relative to window */ position:fixed; /* * Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable */ z-index:100; /* * Use with caution */ transition: all .3s; /*-o-transition: all .3s;*/ -ms-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; } .skrollable.notransition, .notransition .skrollable { transition: none; -o-transition: none; -ms-transition: none; -moz-transition: none; -webkit-transition: none; } .skrollable.hidden { display:none !important; } .skrollable .skrollable { /* * Second-level skrollables are positioned relative their parent skrollable */ position:absolute; } .skrollable .skrollable .skrollable { /* * Third-level (and below) skrollables are positioned static */ position:static; } html, body { width:100%; height:100%; padding:0; margin:0; overflow-x:hidden; font-size:14px; } .nav { width:100%; z-index:101; position:fixed; background:#000; overflow:hidden; height:50px; color:#fff; } #interval { text-align:right; margin:0 10px 0 0; } .nav li { float:left; list-style:none; margin: 0 10px 0 0; } .nav li a { color:#FFFFFF; } #wrap { position:relative; } #content1 , #content2 , #content3,#content4{ height:3000px; width:100%; position:fixed; left:0; top:0; } #content1 { z-index:99; background:url(img/01.jpg) no-repeat; } #content2 { z-index:98; background:url(img/02.jpg) no-repeat; } #content3 { z-index:97; background:url(img/03.jpg) no-repeat; } #content4 { z-index:95; background:url(img/04.jpg) no-repeat; } .box { z-index:96; width:500px; } #leftout { margin-top:400px; color:#fff; font-size:30px; } #transform { width:100%; text-align:center; } #transform p { color:#1641a3; } .easing p { font-size:18px; background:#39F; color:#fff; margin:0; padding:10px 20px; } .end { font-size:22px; } /* page-top */ #page-top { z-index:100; position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #000; text-decoration: none; color: #fff; padding: 20px; text-align: center; display: block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #page-top a:hover { text-decoration: none; background: #333; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/08/25 00:31

今現在作成されているソースをご提示願います。「サンプルソースが欲しい」だけでは丸投げです。途中まで、自分が出来る範囲までやったソースでじゅうぶんです。
m.ts10806

2017/08/25 00:32

また「綺麗に動く」は個人的な感覚によってしまいます。具体的なゴールを記述願います。
退会済みユーザー

退会済みユーザー

2017/08/25 04:14

承知しました。修正または削除して投稿し直します。
m.ts10806

2017/08/25 04:38

ソースありがとうございます。まだ動作検証してないのですが、「PCでは思ったとおりだけどスマホでは動かない」「どの環境(ブラウザ、PC、スマホ含めて全て)でも想定どおりにならない」など、確認状況も追記していただけると助かります。
退会済みユーザー

退会済みユーザー

2017/08/25 04:47

ありがとうございます。iPhone 6 plus でsafariで動かしています。PCはMac Book ProでChromeで動かしています。PCは正常に動きましたがスマホはスムースにスクロールしませんでした。全くスクロールしないわけではないです。
guest

回答1

0

ベストアンサー

ドキュメントは読みましたか?

https://github.com/Prinzhorn/skrollr/blob/master/README.md#the-problem-with-mobile-and-the-solution

When using skrollr on mobile you don't actually scroll. When detecting a mobile browser, skrollr disables native scrolling and instead listens for touch events and moves the content (more specific the #skrollr-body element) using CSS transforms.

モバイルでskrollrを使用すると、実際にはスクロールしません。モバイルブラウザを検出すると、skrollrはネイティブスクロールを無効にし、代わりにタッチイベントをリッスンし、CSSトランスフォームを使用してコンテンツ(より具体的には#skrollr-body要素)を移動します。

続いてWhat you need in order to support mobile browsers(モバイルブラウザをサポートするために必要なもの)とあり、id skrollr-bodyをつけてください云々書いてあります。

投稿2017/08/25 04:44

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/08/25 06:19

ありがとうございます。読んだのですが、まだ初心者ゆえ、コードの多さに頭がショートしておりました…。頭を冷やしてじっくり読もうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問