パララックスのことでお聞きしたいことがあります。
下記のURL先のような、スクロール時に、次の要素が見えたらその要素をブラウザの上までもってくるをしたいのですが、まくいかなくて困っております。
.on(’inview’, function(event, isInView, visiblePartX, visiblePartY) {
を使用したらいけるかもと思っているのですが、これで実装はできるのでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
ベストアンサー
パララックスではなくセクションスクロールのことですかね?
これとかどうでしょう?
投稿2016/10/24 07:26
総合スコア2722
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
総合スコア1820
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/10/25 00:02
2016/10/25 01:37
退会済みユーザー
2016/10/25 02:12