skuare.net

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

使用方法 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」サンプル
※一部ブラウザで動作しません。