HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/6-2.css">body内にHTMLを記載します。
<div id="luxy"><!--時間差で重ねるエリア全体に id="luxy"と指定-->
<section class="area">
<!--動かしたい要素のclassにluxy-elと指定-->
<figure class="luxy-el" data-speed-y="8" data-offset="50"><img src="pict.jpg" alt=""></figure>
<div class="box luxy-el" data-horizontal="1" data-speed-x="-5">
<h2>Area1</h2>
<p>テキストが入ります。</p>
</div>
</section>
</div><!--/luxy-->
<!--動きの指定のクラス名
data-speed-y・・・縦方向のパララックス効果の速度を数字で指定（マイナスの値も利用可能）
data-horizontal・・・水平方向に移動する場合に指定
data-speed-x・・・水平方向の速度（マイナスの値も利用可能）
data-offset・・・表示位置を座標で指定（マイナスの値も利用可能）
-->
body 終了タグ直前に Luxy.js（https://github.com/min30327/luxy.jsからダウンロード）と、動きを制御する自作のJS の2 つを読み込みます。
<script src="js/luxy.js"></script>
<!--自作のJS-->
<script src="js/6-2.js"></script>
CSSの書き方
CSSを設定しなくても動きます。
【Footerを下付きにしたい場合】
絶対配置で下部配置し、z-indexの値を大きな数字にしてエリアの重なりの最前面に出してください。
footer{
position:absolute;
width:100%;
z-index: 999;
}
JSの書き方
luxy.init();【横幅が768px以上の場合のみ、時間差で重なる動きを実現したい場合】
JavaScriptファイル内で、768px以上の時に時間差で重なる動きを実行するように指定します。
※ウィンドウズサイズを狭めて検証したい場合は、ページの再読み込みが必要
if(matchMedia('(min-width: 768px)').matches){
luxy.init();
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/6-1.css">body内にHTMLを記載します。
<header id="header">
<h1>Header</h1>
</header>
<main>
<section id="box1" class="box" data-section-name="Area1"><!--data-section-nameはページネーションを表示させた際、現在地に現れるテキスト-->
<h2>Area1</h2>
<!--/box--></section>
<section id="box2" class="box" data-section-name="Area2">
<h2>Area2</h2>
<!--/box--></section>
<section id="box3" class="box" data-section-name="Area3">
<h2>Area3</h2>
<!--/box--></section>
</main>
<footer id="footer">
<small>© Copyright </small>
</footer>body 終了タグ直前に jQuery、scrollify.jsと、動きを制御する自作のJS の3 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script>
<!--自作のJS-->
<script src="js/6-1.js"></script>
CSSの書き方
CSSを設定しなくても1ページスクロールは動きます。
下記のCSSはscrollfy.jsのページナビゲーションを使用する際に追記するCSSです。
/*========= ページネーションCSS ===============*/
.pagination {
position:fixed;
right:20px;
top: 50%;
transform: translateY(-50%);
font-size:1em;
z-index: 10;
list-style: none;
}
.pagination a {
display:block;
height:20px;
margin-bottom:5px;
color:#fff;
position:relative;
padding:4px;
}
.pagination a.active:after {
box-shadow:inset 0 0 0 5px;
}
/*現在地表示のテキストの設定*/
.pagination a .hover-text {
position:absolute;
right:15px;
top:0;
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:3px;
bottom:0;
}
/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) {
.pagination a .hover-text{
display: none;
}
}
JSの書き方
$.scrollify({
section : ".box",//1ページスクロールさせたいエリアクラス名
scrollbars:"false",//スクロールバー表示・非表示設定
interstitialSection : "#header,#footer",//ヘッダーフッターを認識し、1ページスクロールさせず表示されるように設定
easing: "swing", // 他にもlinearやeaseOutExpoといったjQueryのeasing指定可能
scrollSpeed: 300, // スクロール時の速度
//以下、ページネーション設定
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 = "";
var activeClass = "";
$(".box").each(function(i) {//1ページスクロールさせたいエリアクラス名を指定
activeClass = "";
if(i===$.scrollify.currentIndex()) {
activeClass = "active";
}
pagination += "- " + $(this).attr("data-section-name").charAt(0).toUpperCase() + $(this).attr("data-section-name").slice(1) + "
";
});
pagination += "
";
$("#box1").append(pagination);//はじめのエリアにページネーションを表示
$(".pagination a").on("click",$.scrollify.move);
}
});