スクロール時に画像を3Dで折りたたむjQueryプラグイン「responsive_3dfoldscroll」

スクロールしていくとフェードやスクロールインしてくるような効果を与えるサイトが多くなっています。
jQueryプラグインのnickavignone/responsive_3dfoldscrollを使用すると3Dで折りたたんだ感じの効果を与えられ、印象的なものとなります。
スクロール時に画像を3Dで折りたたむjQueryプラグイン「responsive_3dfoldscroll」

使用方法 nickavignone/responsive_3dfoldscrollからファイルをダウンロードします。


<link href="global.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="/test/js/responsive_3dfoldscroll.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
window.onload=function(){
var fold = $.fn.responsive_3dfoldscroll();
};
});
</script>
※responsive_3dfoldscroll.jsはgitのでは動作しないこともあるので、デモ画面の下記JSをダウンロードしてください。
http://nickavi.com/responsive_3dfoldscroll/includes/js/responsive_3dfoldscroll.js?v=1
上記記載後は、動く部分を以下のように記述します。

    <div id="page">
<div id="container">
<div class="foldWrapper clearfix">
<img src="画像パス" />
</div>
</div>
</div>

スクロール時に画像を3Dで折りたたむjQueryプラグイン「responsive_3dfoldscroll」サンプル
※一部ブラウザで動作しません。

sponsors

「スクロール時に画像を3Dで折りたたむjQueryプラグイン「responsive_3dfoldscroll」」をシェアする

記事作成:
記事URL:

TOP > > > スクロール時に画像を3Dで折りたたむjQueryプラグイン「responsive_3dfoldscroll」