分享一款基于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="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="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="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="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

在线预览    源码下载