视差原理与切割轮播

其他 2018-11-06 14:51:06 阅读次数: 0

视差原理：

视差滚动指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。主要核心就是前景和背景以不同速度移动，从而创造出3D效果。利用background-attachment属性实现。stellar.js是一个jQuery插件，能很容易地给网站添加视差滚动效果。
stellar的使用：

1.先引入插件

<script src="js/jquery.min.js"></script>
<script src="jquery.stellar.js"></script> 
$(function () {
    /*1.引入*/
    /*2.结构   data-stellar-background-ratio="0.3"  样式 bg 需要 background-attachment: fixed;*/
    /*3.初始化插件*/
    $.stellar({
        horizontalScrolling: false,
        responsive: true
    });
});

2.详细参数

  horizontalScrolling 和 verticalScrolling
  该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向， 为布尔值，默认为true

  responsive
  该配置项用来制定load或者resize时间触发时是否刷新页面，其值为布尔值，默认为false

  hideDistantElements
  该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false`

  data-stellar-ratio=”2”
  定义了此元素针对页面滚动的速度比率，比如，0.5为页面滚动的50%，2为页面滚动的200%，所以数值越大，你可以看到页面元素滚动速度越快。

  data-stellar-background-ratio
  该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。 例如 值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置

案例：QQTIM

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQTIM</title>
    <link rel="stylesheet" href="css/index.css">
    <!--[if lte IE 8]>
    <script src="js/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<!--导航-->
<nav class="qq_nav">
    <div class="wrapper">
        <a href="#" class="logo"></a>
        <ul class="nav">
            <li><a class="active" href="#">首页</a></li>
            <li><a href="#">下载</a></li>
            <li><a href="#">动态</a></li>
        </ul>
        <div class="other">
            <ul>
                <li><a href="#">qq安全</a></li>
                <li><a href="#">qq会员</a></li>
                <li><a href="#">登录</a></li>
            </ul>
            <span>当前在线人数：227,763,015</span>
        </div>
        <a href="#" class="register">注册</a>
    </div>
</nav>
<!--展示-->
<section class="qq_banner">
    <img src="images/banner-logo.png" alt="">
    <img src="images/banner-download.png" alt="">
    <img src="images/banner-list.png" alt="">
    <img src="images/banner-product.png" alt="">
</section>
<!--语音-->
<section class="qq_sound">
    <!--seo优化-->
    <h1>I'm QQ - 每一天，乐在沟通</h1>
    <div class="bg" data-stellar-background-ratio="0.3"></div>
    <div class="content">
        <div class="iphone"></div>
        <h2>沟通，是跨越<br>千山万水的亲切声音</h2>
        <p>无论何时何地，你都能自由享受QQ在各类<br>终端上带来的高清通话，与好友一起想聊多久聊多久</p>
    </div>
</section>
<!--文件-->
<section class="qq_file">
    <div class="bg" data-stellar-background-ratio="0.3"></div>
    <div class="content">
        <h2>沟通，是随时随地<br>爽快收发</h2>
        <p>通过QQ,电脑和手机上的文件都能收发自如，<br>更有手机在线查阅，轻松你的工作和生活。</p>
        <div class="mac"></div>
    </div>
</section>
<!--兴趣-->
<section class="qq_interest">
    <div class="bg"  data-stellar-background-ratio="0.3"></div>
    <div class="content">
        <div class="phone"></div>
        <h2>沟通，是志同道合<br>的他们放肆青春</h2>
        <p>即使世界很大，你也不会孤单，在兴趣部落<br>有和你一样的人，期待着和你一起发现精彩。</p>
    </div>
</section>
<!--底部-->
<footer class="qq_footer">
    <div class="content">
        <div class="plats">
            <a class="plmb" href="#" target="_blank">QQ 手机版</a>
            <a class="plpc" href="#" target="_blank">QQ PC版</a>
            <a class="plmac" href="#" target="_blank">QQ Mac版</a>
            <a class="plpad" href="#" target="_blank">QQ Pad版</a>
        </div>
        <p>Copyright © 1998- 2017 Tencent. All Rights Reserved.</p>
        <p>腾讯公司 版权所有</p>
    </div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.stellar.js"></script>
<script src="js/index.js"></script>
</body>
</html

css代码：

* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 14px;
    font-family: "Microsoft YaHei", sans-serif;
    color: #333;
}
ul{
    list-style: none;
}
a{
    color: #333;
    text-decoration: none;
}
/*============model css===========*/
.qq_nav{
    height: 150px;
    background: url("../images/nav_bg.png") repeat-x;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.qq_nav .wrapper{
    width: 1080px;
    height: 75px;
    margin: 0 auto;
}
.qq_nav .wrapper .logo{
    width: 100px;
    height: 75px;
    background: url("../images/nav_brand.png") no-repeat center;
    float: left;
}
.qq_nav .wrapper .nav{
    float: left;
}
.qq_nav .wrapper .nav li{
    float: left;
    font-size: 18px;
    line-height: 75px;
    margin-left: 20px;
}
.qq_nav .wrapper .nav li a{
    display: block;
    padding: 0 20px;
}
.qq_nav .wrapper .nav li a.active,
.qq_nav .wrapper .nav li a:hover{
    background: #12b7f5;
}
.qq_nav .wrapper .register{
    float: right;
    height: 36px;
    width: 96px;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    background: #12b7f5;
    color: #fff;
    border-radius: 18px;
    margin-top:19px;
}
.qq_nav .wrapper .other{
    float: right;
    width: 250px;
    height: 75px;
}
.qq_nav .wrapper .other ul {
    width: 250px;
}
.qq_nav .wrapper .other ul li{
    float: right;
    margin-left:40px;
}
.qq_nav .wrapper .other ul li a{
    font-size: 14px;
    text-shadow: 0 0 2px #333;
    height: 50px;
    line-height: 50px;
}
.qq_nav .wrapper .other span{
    float: right;
}
.qq_banner{
    height: 880px;
    background: url("../images/banner-bg.jpg") no-repeat center top;
    padding-top: 150px;
}

.qq_banner img{
    display: block;
    margin: 20px auto 0;
}
.qq_banner img:last-child{
    width: 100%;
    /*自适应  等比例缩放  图片有这个特殊效果  */
}
.qq_sound{

}
.qq_sound h1{
    height: 300px;
    background: url("../images/sound-text.png") no-repeat center/cover;
    font-size: 0;
}
.qq_sound .bg{
    height: 500px;
    background: url("../images/sound-bg.jpg") no-repeat center/cover;
}
.qq_sound .content{
    height: 500px;
    width: 980px;
    margin: 0 auto;
    position: relative;
}
.qq_sound .content .iphone{
    position: absolute;
    left: 0;
    top: -200px;
    width: 700px;
    height: 700px;
    background: url("../images/sound-phone.png") no-repeat center top/cover;
}
.qq_sound .content h2{
    float: right;
    padding-top: 100px;
    width: 500px;
    text-align: right;
    font-size: 40px;
}
.qq_sound .content p{
    padding-top: 50px;
    float: right;
    width: 500px;
    text-align: right;
    font-size: 18px;
    text-shadow: 0 0 2px #333;
}
.qq_file{}
.qq_file .bg{
    height: 500px;
    background: url("../images/file-bg.jpg") no-repeat center/cover;
}
.qq_file .content{
    height: 500px;
    width: 980px;
    margin:  0 auto;
    position: relative;
}
.qq_file .content .mac{
    width: 600px;
    height: 340px;
    background: url("../images/file-mac.png") no-repeat center/cover;
    position: absolute;
    right: -60px;
    top: 100px;
}
.qq_file .content h2{
    float: left;
    padding-top: 100px;
    width: 500px;
    text-align: left;
    font-size: 40px;
}
.qq_file .content p{
    padding-top: 50px;
    float: left;
    width: 500px;
    text-align: left;
    font-size: 18px;
    text-shadow: 0 0 2px #333;
}
.qq_interest{}
.qq_interest .bg{
    height: 500px;
    background: url("../images/interest-bg.jpg") no-repeat center/cover;
}
.qq_interest .content{
    height: 500px;
    width: 980px;
    margin: 0 auto;
    position: relative;
}
.qq_interest .content .phone{
    position: absolute;
    left: 0;
    top: 0;
    width: 350px;
    height: 500px;
    background: url("../images/interest-phone.png") no-repeat center top/cover;
}
.qq_interest .content h2{
    float: right;
    padding-top: 100px;
    width: 500px;
    text-align: right;
    font-size: 40px;
}
.qq_interest .content p{
    padding-top: 50px;
    float: right;
    width: 500px;
    text-align: right;
    font-size: 18px;
    text-shadow: 0 0 2px #333;
}
.qq_footer{
    height: 250px;
    background: #2a2a2a;
    font-size: 12px;
    text-align: center;
    padding-top: 50px;
    color: #666;
}
.plats{
    width: 800px;
    height: 150px;
    margin: 0 auto;
    display: block;
}
.plats a {
    float: left;
    background: transparent url(../images/footer.png) no-repeat 10px 0;
    text-align: center;
    font-size: 12px;
    color: #666;
    padding-top: 50px;
    width: 80px;
    margin: 0 60px;
}
.plats a:hover {
    color: #12b7f5;
}
.plats a.plmb {
    background-position: 0 0;
}
.plats a.plmb:hover {
    background-position: 0 -93px;
}
.plats a.plpc {
    background-position: -105px 0;
}
.plats a.plpc:hover {
    background-position: -105px -93px;
}
.plats a.plmac {
    background-position: -210px 0;
}
.plats a.plmac:hover {
    background-position: -210px -93px;
}
.plats a.plpad {
    background-position: -326px 0;
}
.plats a.plpad:hover {
    background-position: -326px -93px;
}

.qq_sound .bg,.qq_file .bg,.qq_interest .bg{
    background-attachment: fixed;
}

js代码就是引入上面的视差插件

3D轮播图

原理通过吧一张图分成多个等份（li），然后多个等份装多个图（span）， 然后通过给li绝对定位，span绝对定位

ul li:frist-child（1）span 

通过拼接每一个li里面的span

  background-position：0，0    background-position：112px，0   background-position：224px，0

切割轮播图代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 560px;
            height: 300px;
            margin: 100px auto 0;
            border: 1px solid #ccc;
            position: relative;
        }

        .box .imageBox {
            list-style: none;
            width: 100%;
            height: 100%;
            /*overflow: hidden;*/
            /*视距：呈现近大远小效果 */
            /*perspective: 500px;*/
            /*3d呈现*/
            transform-style: preserve-3d;
        }

        .box .imageBox li {
           /* width: 100%;
            height: 100%;
            float: left;*/
            width: 112px;
            height: 100%;
            float: left;
            position: relative;
            /*视距：呈现近大远小效果 */
            /*perspective: 500px;*/
            /*3d呈现*/
            transform-style: preserve-3d;
            /*加过渡*/
            transition:all 1s;
        }
        .box .imageBox li span{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /*background: url("images/1.jpg") no-repeat;*/
        }

        /*拼接立体容器*/
        /*1.立体容器旋转中心要在电脑平面上*/
        /*2.立体容器每一个面的图片正面朝外*/
        .box .imageBox li span:nth-child(1){
            background-image: url("images/1.jpg");
            transform: translateZ(150px);
        }
        .box .imageBox li span:nth-child(2){
            background-image: url("images/2.jpg");
            /*旋转过后轴也会旋转：：：：：：*/
            transform: rotateX(90deg) translateZ(150px);
        }
        .box .imageBox li span:nth-child(3){
            background-image: url("images/3.jpg");
            transform: rotateX(180deg) translateZ(150px);
        }
        .box .imageBox li span:nth-child(4){
            background-image: url("images/4.jpg");
            transform: rotateX(270deg) translateZ(150px);
        }

        /*拼接背景*/
        .box .imageBox li:nth-child(1) span{
            background-position: 0 0;
        }
        .box .imageBox li:nth-child(2) span{
            background-position: -112px 0;
        }
        .box .imageBox li:nth-child(3) span{
            background-position: -224px 0;
        }
        .box .imageBox li:nth-child(4) span{
            background-position: -336px 0;
        }
        .box .imageBox li:nth-child(5) span{
            background-position: -448px 0;
        }
        /*.box .imageBox li img{
            display: block;
            width: 100%;
            height: 100%;
        }*/
        .box .left,
        .box .right{
            position: absolute;
            width: 50px;
            height: 70px;
            background: rgba(0,0,0,.2);
            top:115px;
            text-align: center;
            line-height: 70px;
            font-size: 20px;
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }
        .box .right{
            right: 0;
        }
    </style>
</head>
<body>
<!--1.完成这个例子要用到什么知识-->
<!--2.回顾一下3d转换-->
<!--3.轴的正方向，translate rotate 3d转换属性-->
<!--4.rotateX rotateY rotateZ 旋转方向  方法方式套路-->
<!--4.1 顺着轴的正方向看  顺时针旋转是负角度  逆时针旋转是正角度-->
<!--5.过渡完成动画-->
<!--6.通过jquery辅助操作-->
<div class="box">
    <ul class="imageBox">
        <li>
            <span></span>   <!--第一张-->
            <span></span>   <!--第二章-->
            <span></span>   <!--第三章-->
            <span></span>   <!--第四章-->
        </li>
        <li>
            <span></span>    第一张
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>    第一张
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>   第一张
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
    </ul>
    <!-- 转义符 \  实体 &lt; -->
    <a class="left" href="javascript:;">&lt;</a>
    <a class="right" href="javascript:;">&gt;</a>
</div>
<script src="jquery.min.js"></script>
<script>
    $(function () {
        /*1.点击切换图片*/
        /*定义一个索引*/
        /*看第2张图 -90deg  看第4张图 90deg */
        var index = 0;
        /*开关*/
        var flag = true;
        /*2.点击左边的按钮 上一张*/
        $('.left').on('click',function () {

            if(!flag) return false;
            flag = false;

            index --;
            console.log(index);
            var angle = - index * 90;
            $('li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
                /*设置不同的延时*/
                $(this).css('transition-delay',i*0.25+'s');
            });
        });
        /*3.点击右边的按钮 下一张*/
        $('.right').on('click',function () {

            if(!flag) return false;
            flag = false;

            index ++;
            console.log(index);
            var angle = - index * 90;
            $('li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
                /*设置不同的延时*/
                $(this).css('transition-delay',i*0.25+'s');
            });
        });
        /*4.优化 重复点击的时候动画会层叠的执行  节流阀 */
        $('li:last').on('transitionend',function () {
            /*最后一部分张图片旋转完毕*/
            flag = true;
        });

    });
</script>
</body>
</html>


 

猜你喜欢

转载自blog.csdn.net/qq_40281275/article/details/83067749
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022