[学习交流] 【广州前端】- 视差滚动插件Stellar.js

本帖最后由 AngularBaby 于 2018-4-12 16:21 编辑

Stellar.js是依赖 JQuery 的一款视差滚动插件。

视差滚动，是指当用户滚动页面时，前景和背景以不同的速度移动，从而创造出3D效果。

如下图所示：

举个例子：

1. 引入 JS 文件

[JavaScript] 纯文本查看 复制代码

    <script src="./js/jquery.js"></script>
    <script src="./js/jquery.stellar.js"></script>

2. 在 body 中添加如下代码

[HTML] 纯文本查看 复制代码

<div class="content" id="content1" data-stellar-background-ratio="0.1">
        <p>第一页</p>
    </div>
    <div class="content" id="content2" data-stellar-background-ratio="0.1">
        <p>第二页</p>
    </div>
    <div class="content" id="content3" data-stellar-background-ratio="0.1">
        <p>第三页</p>
    </div>
    <div class="content" id="content4" data-stellar-background-ratio="0.1">
        <p>第四页</p>
    </div>

3. 在head标签中加入style样式代码如下：

[HTML] 纯文本查看 复制代码

 
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-size: 20px;
            color: white;
            text-shadow: 0 1px 0 black, 0 0 5px black;
        }

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

        .content {
            background-attachment: fixed;
            height: 100vh;
        }

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

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

        #content3 {
            background-image: url("images/3.jpg");
            background-size: cover;
        }

        #content4 {
            background-image: url("images/4.jpg");
            background-size: cover;
        }
    </style>

4. 初始化 JS

[JavaScript] 纯文本查看 复制代码

<script>
        // $('#someElement').stellar(); // 给元素调用方法 
        $.stellar(); // 默认body容器
</script>

Stellar.js 支持更多参数设置，参考这里

点击查看更多精彩前端资源

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州前端】- 视差滚动插件Stellar.js

0 个回复