基于jQuery倾斜分割鼠标滚动切换代码

分享一款基于jQuery倾斜分割鼠标滚动切换代码。这是一款非常有创意的jQuery和CSS3单页倾斜分割布局幻灯片特效。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<div class="skw-pages">    <div class="skw-page skw-page-1 active">      <div class="skw-page__half skw-page__half--left">        <div class="skw-page__skewed">          <div class="skw-page__content"></div>        </div>      </div>      <div class="skw-page__half skw-page__half--right">        <div class="skw-page__skewed">          <div class="skw-page__content">            <h2 class="skw-page__heading">jQuery倾斜分割鼠标滚动切换代码</h2>            <script src='/images/loading.gif' data-original="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>          </div>        </div>      </div>    </div>    <div class="skw-page skw-page-2">      <div class="skw-page__half skw-page__half--left">        <div class="skw-page__skewed">          <div class="skw-page__content">            <h2 class="skw-page__heading">Page 2</h2>            <script src='/images/loading.gif' data-original="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>            <p class="skw-page__description">Nothing to do here, continue scrolling.</p>          </div>        </div>      </div>      <div class="skw-page__half skw-page__half--right">        <div class="skw-page__skewed">          <div class="skw-page__content"></div>        </div>      </div>    </div>    <div class="skw-page skw-page-3">      <div class="skw-page__half skw-page__half--left">        <div class="skw-page__skewed">          <div class="skw-page__content"></div>        </div>      </div>      <div class="skw-page__half skw-page__half--right">        <div class="skw-page__skewed">          <div class="skw-page__content">            <h2 class="skw-page__heading">Page 3</h2>            <script src='/images/loading.gif' data-original="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>            <p class="skw-page__description">The end is near, I promise!</p>          </div>        </div>      </div>    </div>    <div class="skw-page skw-page-4">      <div class="skw-page__half skw-page__half--left">        <div class="skw-page__skewed">          <div class="skw-page__content">            <h2 class="skw-page__heading">Page 4</h2>            <script src='/images/loading.gif' data-original="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>            <p class="skw-page__description">Ok, ok, just one more scroll!</p>          </div>        </div>      </div>      <div class="skw-page__half skw-page__half--right">        <div class="skw-page__skewed">          <div class="skw-page__content"></div>        </div>      </div>    </div>    <div class="skw-page skw-page-5">      <div class="skw-page__half skw-page__half--left">        <div class="skw-page__skewed">          <div class="skw-page__content"></div>        </div>      </div>      <div class="skw-page__half skw-page__half--right">        <div class="skw-page__skewed">          <div class="skw-page__content">            <h2 class="skw-page__heading">Epic finale</h2>            <p class="skw-page__description">story the end!</p>          </div>        </div>      </div>    </div>  </div>

via：http://www.w2bc.com/article/2015-11-26-jquery-page-full-change

原标题：基于jQuery倾斜分割鼠标滚动切换代码

关键词：jquery