js常用插件(十四)之视差效果stellar.js

最新推荐文章于 2024-08-24 08:14:20 发布

web前端小龚

最新推荐文章于 2024-08-24 08:14:20 发布

阅读量1k

点赞数

分类专栏： js插件文章标签： jquery css 前端 javascript 经验分享

本文链接：https://blog.csdn.net/qq_41560520/article/details/114063250

版权

js插件专栏收录该内容

20 篇文章 0 订阅

订阅专栏

js常用插件(十四)之视差效果stellar.js

欢迎点击: 个人官网博客

先上效果图:
在这里插入图片描述
代码可直接复制查看:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-size: 100px;
            color: white;
            text-shadow: 0 1px 0 black, 0 0 5px black;
            text-align: center;
            line-height: 600px;
        }

        p {
            padding: 0 0.5em;
            margin: 0;
        }

        .content {
            background-attachment: fixed;

        }

        #content1 {
            background-image: url("images/1.jpg");
        }

        #content2 {
            background-image: url("images/2.jpg");
        }

        #content3 {
            background-image: url("images/3.jpg");
            /* height: 100vh; */
        }

        #content4 {
            background-image: url("images/4.jpg");
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
</head>

<body>
    <div class="content" id="content1">
        <p>DEMO PAGE </p>
    </div>
    <div class="content" id="content2">
        <p>DEMO PAGE </p>
    </div>
    <div class="content" id="content3"  data-stellar-background-ratio="0.5">
        <p>DEMO PAGE </p>
    </div>
    <div class="content" id="content4" data-stellar-background-ratio="0.5">
        <p>DEMO PAGE </p>
    </div>
    <script>
        $.stellar({
            horizontalScrolling: false, //设置垂直滚动视差效果
            responsive: true
        });
    </script>
</body>

</html>