tiltedpage-scroll.js创建3D滚动倾斜效果

tiltedpage_scroll.js是一款支持鼠标滚动、设置图片角度的一款插件。当页面滚动的时候，图片会有倾斜3D的效果，作为产品展示是个不错的选择。

分类：3D > 页面滚动难易：高级

查看演示下载资源下载积分： 20 积分

引入tiltedpage-scroll插件

<link href='tiltedpage-scroll.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="jquery.tiltedpage-scroll.js"></script>

3D区域html代码

<div class="main">
    <div class="header">
        <h1>jQuery Tilted Page Scroll</h1>
        <h2>Create a 3D Tilted Scroll Effect with jQuery Tilted Page Scroll Plugin</h2>
    </div>
    <section class="page1">
        <div class="page_container">
            <h1><a href='http://www.sucaihuo.com/js/571.html' target='_blank'>jquery仿美丽说瀑布流效果</a></h1>
        </div>
    </section>
    <section class="page2">
        <div class="page_container">
            <h1><a href='http://www.sucaihuo.com/js/572.html' target='_blank'>jQuery指针不动转盘动的Rotate转盘插件</a></h1>
        </div>
    </section>
    <section class="page3">
        <div class="page_container">
            <h1><a href='http://www.sucaihuo.com/js/573.html' target='_blank'>jQuery省市区三级和四级联动演示</a></h1>
        </div>
    </section>
</div>

$(function() {
    $(".main").tiltedpage_scroll({
        angle: 20 //倾斜角度
    });
});

tiltedpage-scroll.js相关API设置

参数	描述	默认值
sectionContainer	滚动区域目标	> section
angle	倾斜角度	50
opacity	透明度	true
outAnimation	动画效果	true