QQTIM首页视差滚动效果案例

最新推荐文章于 2022-11-23 19:45:29 发布

一只大海

最新推荐文章于 2022-11-23 19:45:29 发布

阅读量643

点赞数 1

分类专栏： CSS3&amp;html5

本文链接：https://blog.csdn.net/weixin_44392418/article/details/88142439

版权

QQ TIM案例中采用了视差滚动效果，通过Stellar插件实现。视差滚动是一种网页展示技术，使得多层次元素在滚动时以不同速度移动，营造立体感。这种效果酷炫，适用于个性化展示，但可能造成导航困扰，需配合强导航功能。其原理是通过调整内容和背景的滚动速度及方向，有时辅以透明度和大小动画，通常借助background-attachment属性完成。

摘要由CSDN通过智能技术生成

《QQ TIM》案例

html
在头部引入html5shiv.min.js文件，此处作用是判断浏览器是否是IE9以下版本的，
如果是，则执行兼容性文件，不是的话就跳过

    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <![endif]-->

<body>
<div class="all">
    <!--第一页-->
    <div class="banner">
        <!--导航-->
        <nav class="navv">
            <div class="nav_brand"><img src="../QQTIM/images/nav_brand.png" alt=""></div>
            <ul class="sul">
                <li><a href="https://office.qq.com/">首页</a></li>
                <li><a href="https://office.qq.com/download.html">下载</a></li>
                <li><a href="">动态</a></li>
            </ul>
            <span class="zhuce"><a href="">注册</a></span>
            <ul class="login">
                <li><a href="">登录</a></li>
                <li><a href="">QQ会员</a></li>
                <li><a href="">QQ安全</a></li>
            </ul>
            <span class="nowMan">当前在线人数：227,333,246</span>
        </nav>
        <!--宣传页-->
        <div class="banner-logo"><img src="../QQTIM/images/banner-logo.png" alt=""></div>
        <div class="download"><img src="../QQTIM/images/banner-download.png" alt=""></div>
        <div class="banner-list"><img src="../QQTIM/images/banner-list.png" alt=""></div>
        <div class="banner-product"></div>
    </div>
    <!--第二页-->
    <div class="sound">
        <div class="sound-text"></div>
          <!--此处页面需要实现视察滚动的效果 所以我们需要用到data-stellar-background-ratio="0.5"的属性  0.5为默认滚动速度的一半-->
        <div class="sound-bg" data-stellar-background-ratio="0.5"></div>
        <div class="goutong">
            <div class="sound-phone"><img src="../QQTI