scrollify.jsにヘッダーフッター付けるメモ
やっとAboutが見れるようになりました！
なるほどね、そういう事なので…思いっきり注意書き書いてましたね。
とりあえず生い立ち書いておきました。
そんなおんた、最近は暇で睡魔と戦ってます。
Twitterで毎日眠い眠い言っててすみません…
よく学校とかではめっちゃ寒いのに窓開けられますよね。
空気の入れ替えって眠気にいいらしいですよ。
今の会社は窓開けられないので寝てくださいと言ってるようなものですね。
うーん忙しいと全く眠くないんですが…
もっと仕事したい…そんなこと思ってたら週末からスケジュールが真っ赤でした。
そんな暇な間にそういえば使ったことなかったなーとか色々コード試してました。
今回はスクロールした時にセクションごとにピタって止まる気持ちいいあれを試します。
（付けても結構邪魔と言われて外されます）
まぁまぁ趣味の範囲でもできると楽しいのでぜひ。
今回は『scrollify.js』というのを使っていきます！
FullPage.jsとかもありますがとりあえずピタってしたいんじゃ…ぐらいだったので今回はこっち試します。
まずは『scrollify.js』を以下よりダウンロード。
『scrollify.js』サンプル
HTMLをガツガツと。
【html】
<html>
<head>
<link rel="stylesheet" href="common/css/common.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="common/js/jquery.scrollify.js"></script>
<script src="common/js/common.js"></script>
</head>
<body>
<header>
<h1>Logo</h1>
</header>
<div id="wrap">
<section class="panel home" data-section-name="home">
<video controls="false" autoplay loop muted>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
<div class="inner">
<div class="vertical-center">
<h2>Test01</h2>
</div>
</div>
</section>
<section class="panel panel1" data-section-name="second">
<div class="inner">
<div class="vertical-center">
<h2>test02</h2>
</div>
</div>
</section>
<section class="panel panel2" data-section-name="second">
<div class="inner">
<div class="vertical-center">
<h2>test03</h2>
<p>わははーい！</p>
</div>
</div>
</section>
<footer>
<p class="src">test</p>
</footer>
</div>
</body>
</html>今回はヘッダーとフッターも付けています。
よくヘッダーフッターなしの解説はあるんですけど、自分バカすぎて「うおおおフッターが切られて見えない！」とか、「フッターが一瞬しか見れない！スクロールバーロックしたい…！」みたいな事がよくありました。
そんな人にも…
とりあえず３つ程ページ付けました。
.panelが対象のブロックになってます。
クラス名変更する場合はcss、jsも書き直します。
「わははーい」のとことかも長文になっても途中で切り取られないようにcss書いていきます！
とりあえず形を整えていく。
【common.css】
body {
color #fff;
}
header {
position: relative;
width: 100%;
height: 100px;
background: #fff;
z-index: 9999;
}
#headbord {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background: #fff;
z-index: 99999;
}
h1 {
position: absolute;
top:50%;
width: auto;
font-size: 20px;
margin: 20px 0 20px 20px;
color: #333;
}
section {
position: relative;
}
h2 {
font-size:8em;
text-shadow:0 0 6px rgba(0,0,0,0.4);
}
p {
font-size: 16px;
line-height:1.3;
}
h2 + p {
font-size:14px;
}
.vertical-center {
margin: 100px auto;
padding: 40px 60px;
text-align: center;
}
.vertical-center p {
margin-top:23px;
}
.inner {
position: relative;
height:100%;
width:80%;
margin:0 auto;
overflow: hidden;
}
.home {
background:#000;
}
.panel1 {
background:#9de241;
}
.panel2 {
background:#666;
}
footer {
width: 100%;
height: 200px;
background: #333;
z-index: 9999;
}
footer p {
color: #fff;
font-size: 20px;
}
#wrap {
overflow: hidden;
}
@media (max-width:800px) {
h1 {
font-size:15vw;
}
h2 {
font-size:12vw;
}
.inner {
width:70%;
}
}リセットとかも書いてましたが省かせていただきますよ…
アニメーション付け
【common.js】
$(function() {
$.scrollify({
section:".panel",//クラス名を指定
scrollbars: true,
easing: "swing", // アニメーション
scrollSpeed: 600, // スクロール時の速度
sectionName:false,
interstitialSection:"header,footer"
});
});
$(document).on('turbolinks:load', function() {
if ($(".panel").length) {
$.scrollify.enable();
$.scrollify({
section: ".panel"
});
} else {
$.scrollify.disable();
}
});サンプルで作ってたページ他にも色々実装してたので大事なところ消してたらすみません。
とりあえずヘッダーフッターが欲しいとなった結果です。
ヘッダーは大丈夫でもフッターがいつも見えなくて嫌いでした。
なんとか見えるようになったのでメモとして残しておきます〜〜〜〜
ではでは。
