画像を3D風に切り替えながらスクロールさせるJavaScript「jQuery Tilted Page Scroll」

画像を3D風に切り替えながらスクロールさせるJavaScript「jQuery Tilted Page Scroll」サンプル
画像の切り替え方に飽きがきた方には、jQueryプラグインjQuery Tilted Page Scrollが良いかもしれません。
スクロールしていくと、3D風に折りたたんで、画像が切り替わっていきます。

使用方法
jQuery Tilted Page Scrollからファイル一式をダウンロード。
<link rel="stylesheet" type="text/css" href="tiltedpage-scroll.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tiltedpage-scroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".main").tiltedpage_scroll({
sectionContainer: "> section", //対象の要素
angle: 70, //角度(デフォルトは50)
opacity: true, //透過
scale: true, //拡大
outAnimation: true //アニメーション
});
});
</script>

あとは対象の要素を上記の記述に基づいて書いていきます。
<div class="main">
<section>
<img src="画像パス">
</section>
<!-- 以下要素分 -->
</div>

※切り替わりが明示的にわかるように、枠線や角版の画像が良いと思います(あるいは背景画像を入れる)。
最後にCSSで見た目を整えます。
下記はサンプルです。
html {
height: 100%;
}
body {
position: relative;
height: 100%;
}
.tps-section {
width: 100% !important;
max-width: 1000px;
margin: 0 auto;
height: 400px;
position: relative;
}

画像を3D風に切り替えながらスクロールさせるJavaScript「jQuery Tilted Page Scroll」サンプル

sponsors

「画像を3D風に切り替えながらスクロールさせるJavaScript「jQuery Tilted Page Scroll」」をシェアする

記事作成:
記事URL:

TOP > > > 画像を3D風に切り替えながらスクロールさせるJavaScript「jQuery Tilted Page Scroll」