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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入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.erdangjiade.com/js/571.html' target='_blank'>jquery仿美丽说瀑布流效果</a></h1>
        </div>
    </section>
    <section class="page2">
        <div class="page_container">
            <h1><a href='http://www.erdangjiade.com/js/572.html' target='_blank'>jQuery指针不动转盘动的Rotate转盘插件</a></h1>
        </div>
    </section>
    <section class="page3">
        <div class="page_container">
            <h1><a href='http://www.erdangjiade.com/js/573.html' target='_blank'>jQuery省市区三级和四级联动演示</a></h1>
        </div>
    </section>
</div>

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

tiltedpage-scroll.js相关API设置