当前位置: 首页 > 工具软件 > Stellar.js > 使用案例 >

stellar视差插件

左翰海
2023-12-01

stellar视差插件

​ 视差滚动指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术。主要核心就是前景和背景以不同速度移动,从而创造出3D效果。利用background-attachment属性实现。stellar.js是一个jQuery插件,能很容易地给网站添加视差滚动效果。以下介绍stellar的简单使用:

1.引入js包

<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/jquery.stellar.min.js"></script>

2.引用HTML和css样式

<div class="content" id="content1">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content2">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5">
    <p>TEXT HERE</p>
</div> 
//css样式中设置content背景等

3.js 调用函数

$.stellar({
    horizontalScrolling: false,
    responsive: true
});

4.详细参数

名称说明
horizontalScrolling 和 verticalScrolling该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向,verticalScro设置垂直方向, 为布尔值,默认为true
responsive该配置项用来制定load或者resize时间触发时是否刷新页面,其值为布尔值,默认为false
hideDistantElements该配置项用来设置移出视线的元素是否隐藏,其值为布尔值,若不想隐藏则设置为false`
data-stellar-ratio=”2”定义了此元素针对页面滚动的速度比率,比如,0.5为页面滚动的50%,2为页面滚动的200%,所以数值越大,你可以看到页面元素滚动速度越快。
data-stellar-background-ratio该配置项用在单个元素中,其值为一个正数,用来改变被设置元素的影响速度。 例如 值为0.3时,则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置

5.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html,body{
            height: 100%;
        }
        .content{
            width: 100%;
            height: 100%;
        }
        .content2{
            background: url(images/2.jpg) 0 0/100% 100% no-repeat;
            /*背景图像相对于窗体固定*/
            background-attachment: fixed;
        }
        .content4{
            background: url(images/4.jpg) 0 0/100% 100% no-repeat;
            background-attachment: fixed;
        }
        /*.yezi{
            position: fixed;
            top: 50px;
            right: 10px;
        }*/
    </style>
</head>
<body>
    <!-- data-stellar-ratio 元素针对页面滚动的速度比率 -->
    <!-- <img src="images/big-01.png" alt="" class="yezi" data-stellar-ratio="2"> -->
    <div class="content content1">111</div>
    <!-- data-stellar-background-ratio 设置元素背景的滚动速率 -->
    <div class="content content2" data-stellar-background-ratio="5"></div>
    <div class="content content3">333</div>
    <div class="content content4" data-stellar-background-ratio="0.5"></div>

    <script type="text/javascript" src="jquery.min.js"></script>
    <!-- 引入视差滚动插件stellar -->
    <script type="text/javascript" src="jquery.stellar.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $.stellar({
                // 设置视差效果方向
                horizontalScrolling:false,
                // load或者resize事件触发时是否刷新页面
                responsive:true
            })
        })
    </script>
</body>
</html>

官网 http://markdalgleish.com/projects/stellar.js/

代码及相关文件详见GitHub主页 视差滚动效果-stellar插件

https://github.com/Jianxq12/ITcast/tree/master/H5C3

转载于:https://www.cnblogs.com/Jianxq12/p/7684302.html

 类似资料: