仿QQ TIM官网视差滚动效果

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

一只前端小白

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

阅读量1k

点赞数

分类专栏：日志文章标签： javascript

本文链接：https://blog.csdn.net/qq_38944959/article/details/88143267

版权

日志专栏收录该内容

51 篇文章 2 订阅

订阅专栏

理论基础：
实现视差滚动，主要需要用到一个视差滚动的插件stellar.js，其次就是常规的布局，stellar.js是基于jq的插件，所以我们在使用之前需要提前导入jq文件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>I'm QQ - 每一天，乐在沟通</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
	<![endif]-->
	<script src="js/jquery.stellar.js"></script>
<script>
    $(function () {
    	//初始化
        $.stellar({
                horizontalScrolling: false, //设置垂直滚动视差效果
                responsive: true
           });
    });
</script>
</head>
<body id="bd">
    <div class="banner">
        <div class="tim-logo"></div>
        <div class="tim-download">
            <a href="javascript:;">立即下载</a>
        </div>
        <div class="tim-list"></div>
        <div class="banner-product"></div>
        <div class="sound"></div>

    </div>
    <div class="content" id="content1" data-stellar-background-ratio="0.5">
        <p>TEXT HERE</p>
    </div>
    <section>
        <div class="banner-bg bg1">
            <div class="bg1-img"></div>
            <div class="bg-text text1">
                <p class="bg-title">沟通，是跨越千山万水的亲切声音</p>
                <p class="bg-content">
                    无论何时何地，你都能自由享受QQ在各类终端
                上带来的高清通话，与好友一起想聊多久聊多久</p>
            </div>
        </div>
    </section>
    <div class="content" id="content2" data-stellar-background-ratio="0.5">
        <p>TEXT HERE</p>
    </div>
    <section>
        <div class="banner-bg bg2">
            <div class="bg2-img"></div>
            <div class="bg-text text2">
                <p class="bg-title">沟通，是随时随地爽快收发</p>
                <p class="bg-content">
                    通过QQ,电脑和手机上的文件都能收发自如，
                更有手机在线查阅，轻松你的工作和生活。</p>
            </div>
        </div>
    </section>
    <div class="content" id="content3" data-stellar-background-ratio="0.5">
        <p>TEXT HERE</p>
    </div>
    <section>
        <div class="banner-bg bg3">
            <div class="bg3-img"></div>
            <div class="bg-text text3">
                <p class="bg-title">沟通，是志同道合的他们放肆青春</p>
                <p class="bg-content">
                    即使世界很大，你也不会孤单，在兴趣部落
                有和你一样的人，期待着和你一起发现精彩</p>
            </div>
        </div>
    </section>
    <footer>
        <div class="foot-bg">
            <ul>
                <li><a href="javascript:;">QQ 手机版</a></li>
                <li><a href="javascript:;">QQ Pc版</a></li>
                <li><a href="javascript:;">QQ Mac版</a></li>
                <li><a href="javascript:;">QQ Pad版</a></li>
            </ul>
            <div class="footer-info">
                <p>Copyright © 1998-2019 Tencent. All Rights Reserved.</p>
                <p>腾讯公司 版权所有</p>
            </div>
        </div>
    </footer>
    <nav class="nav">
        <div class="nav-content">
            <div class="nav-left f-l">
                <div class="brand"><img src="images/nav_brand.png" alt=""></div>
                <a href="javascript:;">首页</a>
                <a href="javascript:;">下载</a>
                <a href="javascript:;">动态</a>
            </div>
            <div class="nav-right f-r">
                <a class="register" href="javascript:;">注册</a>
                <div class="about-qq">
                    <p>
                        <a href="javascript:;">登录</a>
                        <a href="javascript:;">qq会员</a>
                        <a href="javascript:;">qq安全</a>
                    </p>
                    <p>当前在线人数：227,763,015</p>
                </div>
            </div>
        </div>
    </nav>
</body>
</html>

最终页面效果?
在这里插入图片描述

一只前端小白

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
仿QQ TIM官网视差滚动效果

理论基础：实现视差滚动，主要需要用到一个视差滚动的插件stellar.js，其次就是常规的布局，stellar.js是基于jq的插件，所以我们在使用之前需要提前导入jq文件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&g
复制链接

扫一扫