先日こちらで「scrollify.jsのページャーを1ページ目だけ消したいのですが」と質問させていただいた者です。
https://teratail.com/questions/169717
一旦は解決したのですが、作り直しを行ったため、再度同じ質問をさせていただくことをお許しください。
前回のページャーのJavascriptは別の参考サイトから引用させていただいたものでしたが、
今回は本家のデモサイトに使用されていたJavascriptとCSSを使用し、正常に動作が確認出来ました。
本題の質問ですが、以下の通りです。
jQueryのscrollifyを導入しています。
ページャーを以下のように設定しているとすると、4ページあるうち、1ページ目のページャーだけ非表示にするにはどのように記述したらよいでしょうか。
(通常時の動作確認は完了しています)
ボタン等で取得する形ではなく、スクロールする前の最初のページだけページャーが見えない感じです。
【↓ Javascript ↓】
$(function() { $.scrollify({ section:".panel", scrollbars:false, before:function(i,panels) { var ref = panels[i].attr("data-section-name"); $(".pagination .active").removeClass("active"); $(".pagination").find("a[href=\"#" + ref + "\"]").addClass("active"); }, afterRender:function() { var pagination = "<ul class=\"pagination\">"; var activeClass = ""; $(".panel").each(function(i) { activeClass = ""; if(i===0) { activeClass = "active"; } pagination += "<li><a class=\"" + activeClass + "\" href=\"#" + $(this).attr("data-section-name") + "\"><span class=\"hover-text\">" + $(this).attr("data-section-name").charAt(0).toUpperCase() + $(this).attr("data-section-name").slice(1) + "</span></a></li>"; }); pagination += "</ul>"; $(".home").append(pagination); $(".pagination a").on("click",$.scrollify.move); } }); });
【↓ HTML ↓】
<section class="panel home" data-section-name="home"> <div class="inner"> <div class="vertical-center"> <h1>Pagination</h1> <p>Simple navigation for Scrollify sections.</p> </div> </div> </section> <section class="panel panel1" data-section-name="second"> <div class="inner"> <div class="vertical-center"> <h2>afterRender()</h2> <p>Use Scrollify's <span class="code">afterRender()</span> callback to build your pagination links.</p> </div> </div> </section> <section class="panel panel2" data-section-name="third"> <div class="inner"> <div class="vertical-center"> <h2>before()</h2> <p>Apply an active class with the <span class="code">before()</span> callback.</p> </div> </div> </section> <section class="panel panel3" data-section-name="fourth"> <div class="inner"> <div class="vertical-center"> <h2>move()</h2> <p>Call <span class="code">$.scrollify.move()</span> in a click event to navigate to sections.</p> </div> </div> </section>
【↓ CSS ↓】
.vertical-center { text-align:center; width:100%; position: absolute; top: 47%; transform: translateY(-47%); } .vertical-center p { margin-top:23px; } .inner { position: relative; height:100%; width:80%; margin:0 auto; } .home { background:#6dcb94; background:hsl(158,58%,52%); } .panel1 { background:#ec8200; background:hsl(28,100%,52%); } .panel2 { background:#64a0d4; background:hsl(200,60%,55%); } .panel3 { background:#e14456; background:hsl(350,92%,59%); } .code { background:rgba(0,0,0,0.2); } .pagination { position:fixed; right:20px; top: 50%; transform: translateY(-50%); font-size:1.4em; z-index: 10; } .pagination a { display:block; height:20px; margin-bottom:5px; color:white; position:relative; padding:4px; } .pagination a.active:after { box-shadow:inset 0 0 0 5px; } .pagination a .hover-text { position:absolute; right:15px; top:7px; opacity:0; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; padding-right: 15px; } .pagination a:hover .hover-text { opacity: 1; } .pagination a:after { -webkit-transition:box-shadow 0.5s ease; transition:box-shadow 0.5s ease; width:10px; height:10px; display: block; border:1px solid; border-radius:50%; content:''; position: absolute; margin:auto; top:0; right:4px; bottom:0; }
あなたの回答
tips
プレビュー