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

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

sponsors

使用方法

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 {
      padding: 0;
      text-align: center;
      font-family: 'open sans';
      position: relative;
      margin: 0;
      height: 100%;
    }
    .tps-section {
      width: 100% !important;
      max-width: 1000px;
      margin: 0 auto;
      height: 400px;
      position: relative;
    }

サンプル

Javascriptサンプルページ一覧
skuare.net

sponsors