黑马程序员技术交流社区

标题: 【广州前端】- 视差滚动插件Stellar.js [打印本页]

作者: AngularBaby 时间: 2018-4-12 16:07
标题: 【广州前端】- 视差滚动插件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.zip

1.33 MB, 下载次数: 138

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2