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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

CSS

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

Q&A

解決済

3回答

3190閲覧

パララックスの実装で困っています。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

CSS

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

0グッド

0クリップ

投稿2016/10/24 04:16

編集2016/10/25 02:15

パララックスのことでお聞きしたいことがあります。
下記のURL先のような、スクロール時に、次の要素が見えたらその要素をブラウザの上までもってくるをしたいのですが、まくいかなくて困っております。
.on(’inview’, function(event, isInView, visiblePartX, visiblePartY) {
を使用したらいけるかもと思っているのですが、これで実装はできるのでしょうか?

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

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

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

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

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

guest

回答3

0

ベストアンサー

パララックスではなくセクションスクロールのことですかね?
これとかどうでしょう?

Webページにセクションスクロールをかんたんに実装できるjQueryプラグイン「smartscroll」

投稿2016/10/24 07:26

gin

総合スコア2722

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

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

退会済みユーザー

退会済みユーザー

2016/10/25 00:02

解答ありがとうございます。 セクションスクロールのことでした! さっそく「smartscroll」を使用しているのですが、そのまま使うとブラウザの高さごとに「section」クラスがついている要素をスクロールしてしまい、ある要素がブラウザの高さを超えると下が切れてしまいすべて見ることができません。 この機能で要素の高さごとにセクションスクロールするにはどうしたらいいのでしょうか? 「smartscroll」についていろいろ調べたのですが、あまり使い方など乗っているサイトが見当たらず・・・ もしよろしければよろしくお願いいたします。
gin

2016/10/25 01:37

「sectionClass: "section",」のところで変更できそうですけどダメでした? 別に簡単そうなものがあったのではっておきますね。 画面ごとにスクロールができるjQueryのプラグイン「jQuery Scrollify」 http://www.dataplan.jp/blog/jquery/210
退会済みユーザー

退会済みユーザー

2016/10/25 02:12

ありがとうございます。 無事できました。
guest

0

jQueryのプラグイン「jQuery Scrollify」を使用しました。
対応する要素に来たらメニューの色を変えるということもしています。
画像をしようしているので、下記のコードではうまくいかないかもしれないです。

<!doctype html> <html id="html" lang="ja"> <head> <meta charset="utf-8"> <title>テスト養命酒</title> <link rel="stylesheet" href="css/jquery.fullPage.css" media="all"> <style type="text/css"> .sample { background-color: #FFFFFF; } .sample1 { background-color: #30BFFA; } .sample2 { background-color: #8CDE16; } .sample3 { background-color: #FFE508; } .sample4 { background-color: #FF7995; } .sample5 { background-color: #AC5FE1; } section { height: 1000px!important; } /** 各要素ごとの設定はここまで **/ /** これはメニューの設定になります **/ #side { position: fixed; top: 0; left: 0; width: 300px; } #nav { position: fixed; top:20%; left:30px; z-index:5000; height:100%; width:30px; background:url('img/nav_bg.png') 0 0 no-repeat; } #nav li { list-style-type: none; text-align: center; } #nav li.on a{ background:url('img/nav_pt.png') 0 0 no-repeat; } #nav li a { display: block; text-decoration: none; } .box { float: right; width: 740px; margin-bottom: 30px; padding: 20px; background: #2d3e50; height: 500px; } #footer { clear: both; height: 100px; background: #19bd9b; text-align: center; } .first{ position: absolute; top:23px; left:3px; width:20px; height:20px; } .second{ position: absolute; top:64px; left:3px; width:20px; height:20px; } .third{ position: absolute; top:105px; left:3px; width:20px; height:20px; } .forth{ position: absolute; top:148px; left:3px; width:20px; height:20px; } .five{ position: absolute; top:193px; left:3px; width:20px; height:20px; } .six{ position: absolute; top:233px; left:3px; width:20px; height:20px; } </style> </head> <body> <ul id="nav"> <li><a href="#section01" class="first"></a></li> <li><a href="#section02" class="second"></a></li> <li><a href="#section03" class="third"></a></li> <li><a href="#section04" class="forth"></a></li> <li><a href="#section05" class="five"></a></li> <li><a href="#section06" class="six"></a></li> </ul> <section id="section01" class="panel sample" data-section-name="sample"> 表示する内容 </section> <section id="section02" class="panel sample1" data-section-name="sample1"> 表示する内容 </section> <section id="section03" class="panel sample2" data-section-name="sample2"> 表示する内容 </section> <section id="section04" class="panel sample3" data-section-name="sample3"> 表示する内容 </section> <section id="section05" class="panel sample4" data-section-name="sample4"> 表示する内容 </section> <section id="section06" class="panel sample5" data-section-name="sample5"> 表示する内容 </section> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.scrollify.js"></script> <script type="text/javascript"> $(function() { $.scrollify({ section:"section" }); var set = 300;//ウインドウ上部からどれぐらいの位置で変化させるか var boxTop = new Array; var current = -1; //各要素の位置 $('.panel').each(function(i) { boxTop[i] = $(this).offset().top; }); //最初の要素にclass="on"をつける changeBox(0); //スクロールした時の処理 $(window).scroll(function(){ scrollPosition = $(window).scrollTop(); for (var i = boxTop.length - 1 ; i >= 0; i--) { if ($(window).scrollTop() > boxTop[i] - set) { changeBox(i); break; } }; }); //ナビの処理 function changeBox(secNum) { if (secNum != current) { current = secNum; secNum2 = secNum + 1;//HTML順序用 $('#nav li').removeClass('on'); $('#nav li:nth-child(' + secNum2 +')').addClass('on'); } }; }); </script> </body> </html>

投稿2016/10/25 02:15

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

そのサイトを動くようにしてみたのですが、
http://www.yomeishu.co.jp/yomeishu/collection/resources/js/top.js
をほとんど手作りだったので、ちょっと参考にしにくい
いろいろ探してまずできそうなプラグインを見つけてみてはどうでしょうか、そのうえで損プラグインを使って再度質問をするなどどうでしょうか?
簡単にパララックスサイトが作れるjQueryプラグイン17選

投稿2016/10/24 07:47

date

総合スコア1820

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問