簡単!スクロールでカーテンの様に要素をスライド切替する【CurtainJS】& IE7で動作させるメモ

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。本日は連投です。今回のtpsは【スクロールでカーテンの様に要素をスライド切替する【CurtainJS】& IE7で動作させる方法 – How to work in IE7】です。フルスクリーンコンテンツをカーテンのように動かすとても素敵なプラグインですので活用してみても良いかもしれませんね。公式の方ではSafari,Firefox,Chrome,IE8/IE9ですが、IE7で動作する方法も出ていましたので追記しておきます。

実装 > Download > Demo

CurtainJS
読み込みファイル

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/curtain.js"></script>
JS

<script>
$(function(){
$(‘.curtains’).curtain({
scrollSpeed: 300,
controls: ‘.menu’,
curtainLinks: ‘.curtain-links’
});
});
</script>
基本HTML


<ul id="sidenav">
<li><a class="curtain-links" href="#section-1">section1</a></li>
<li><a class="curtain-links" href="#section-2">section2</a></li>
<li><a class="curtain-links" href="#section-3">section3</a></li>
<li>
<ul class="menu">
<li><a href="#up">↑</a></li>
<li><a href="#down">↓</a></li>
</ul>
</li>
</ul>
<ol class="curtains">
<li id="section-1" class="cover">
<header data-fade="550" data-slow-scroll="3">
スクロールでフェードアウトさせたいコンテンツ
</header>
</li>
<li id="section-2">
<div class="fixed">
Fix(固定)させたいコンテンツ
</div>

</li>
<li id="section-3">

</li>
<li id="section-4" style="height:200%;">
フルスクリーンより大きなコンテンツ
</li>
</ol>

設定は以上になります。上記の設定でキーボードによる上下スライドやクリックによる上下スライドまで自動で動作するようになっています。またIE7で実装する場合は以下をご参照ください。

IE7に対応する場合 – リンク

リンク先をチェックして頂ければ解るのですが、プラグイン内のL153 – L160およびL468 – L473の赤色になっている箇所を黄緑色のコードに差し替えるだけです。本当に便利なプラグインを公開していただき感謝です。

以上になります。

参照:CurtainJS