最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2016-01-19 20:42浏览(1597)

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

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

tiltedpage-scroll.js创建3D滚动倾斜效果
分类:3D > 页面滚动 难易:高级
查看演示

加我微信,拉你进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设置

参数 描述 默认值
sectionContainer 滚动区域目标 > section
angle 倾斜角度 50
opacity 透明度 true
outAnimation 动画效果 true
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/690.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    03-21 08:28
    ngu137
    效果看着炫酷啊,不错,留意下啦
1 2