Stellar.js 使用方法

2024-02-14 01:38
文章标签 使用 方法 js stellar

本文主要是介绍Stellar.js 使用方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

下载好后,在页面中引用:


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


完成后,开始给页面添加视觉差滚动效果。 这个插件允许将效果添加到任何滚动的元素,例如window对象,或者其他元素。 要使用jQuery的选择器选中所需要的元素,在绑定stellar()方法即可。


$('#someElement').stellar();


对于window对象可以用下面的方法(网页就用此方法):


$.stellar();

这样,Stellar.js库就会在元素滚动时搜索parallax背景或元素,并重新定位。

stellar.js像其他插件一样有一定的灵活性。 可以设置很多参数来满足需求。 stellar.js允许定义普通选项,会应用到每个元素。 设置普通配置必须通过stellar()方法,而对应的元素要设置data-*属性。

第一个普通选项是设置效果的方向。 经典的滚动效果是从上到下,或者反过来。也可以指定一个从左到右的效果,或者反过来。 通过设置horizontalScrollingverticalScrolling的bool值完成。 其默认值是true

另一个有趣的选项是responsive。 它是用来指定loadresize事件触发时,是否刷新页面。 默认是false

最后介绍一下hideDistantElements选项。 指定是否要隐藏移出视线的元素。 如果不想隐藏,就设置为false

单个元素选项中data-stellar-background-ratio比较常用。 接受一个正整数的值,可以改变它被应用到元素的影响速度。 例如,data-stellar-background-ratio="0.5"意味着改变速度为自然滚动速度的一半。 如果想使这个属性值低于1,建议在样式表里设置background-attachment: fixed;


例:

<div data-stellar-background-ratio="0.5" style="background:url(images/test.jpg) no-repeat center center;"><p>THE TEST</p>
</div>

最后,invokingstellar()启动效应:


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

这篇关于Stellar.js 使用方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/707177

相关文章

Java function函数式接口的使用方法与实例

《Javafunction函数式接口的使用方法与实例》:本文主要介绍Javafunction函数式接口的使用方法与实例,函数式接口如一支未完成的诗篇,用Lambda表达式作韵脚,将代码的机械美感... 目录引言-当代码遇见诗性一、函数式接口的生物学解构1.1 函数式接口的基因密码1.2 六大核心接口的形态学

Python实现文件下载、Cookie以及重定向的方法代码

《Python实现文件下载、Cookie以及重定向的方法代码》本文主要介绍了如何使用Python的requests模块进行网络请求操作,涵盖了从文件下载、Cookie处理到重定向与历史请求等多个方面,... 目录前言一、下载网络文件(一)基本步骤(二)分段下载大文件(三)常见问题二、requests模块处理

Linux内存泄露的原因排查和解决方案(内存管理方法)

《Linux内存泄露的原因排查和解决方案(内存管理方法)》文章主要介绍了运维团队在Linux处理LB服务内存暴涨、内存报警问题的过程,从发现问题、排查原因到制定解决方案,并从中学习了Linux内存管理... 目录一、问题二、排查过程三、解决方案四、内存管理方法1)linux内存寻址2)Linux分页机制3)

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》:本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.

使用TomCat,service输出台出现乱码的解决

《使用TomCat,service输出台出现乱码的解决》本文介绍了解决Tomcat服务输出台中文乱码问题的两种方法,第一种方法是修改`logging.properties`文件中的`prefix`和`... 目录使用TomCat,service输出台出现乱码问题1解决方案问题2解决方案总结使用TomCat,

解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

《解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题》文章详细描述了在使用lombok的@Data注解标注实体类时遇到编译无误但运行时报错的问题,分析... 目录问题分析问题解决方案步骤一步骤二步骤三总结问题使用lombok注解@Data标注实体类,编译时

Java中使用Java Mail实现邮件服务功能示例

《Java中使用JavaMail实现邮件服务功能示例》:本文主要介绍Java中使用JavaMail实现邮件服务功能的相关资料,文章还提供了一个发送邮件的示例代码,包括创建参数类、邮件类和执行结... 目录前言一、历史背景二编程、pom依赖三、API说明(一)Session (会话)(二)Message编程客

C++中使用vector存储并遍历数据的基本步骤

《C++中使用vector存储并遍历数据的基本步骤》C++标准模板库(STL)提供了多种容器类型,包括顺序容器、关联容器、无序关联容器和容器适配器,每种容器都有其特定的用途和特性,:本文主要介绍C... 目录(1)容器及简要描述‌php顺序容器‌‌关联容器‌‌无序关联容器‌(基于哈希表):‌容器适配器‌:(

Python判断for循环最后一次的6种方法

《Python判断for循环最后一次的6种方法》在Python中,通常我们不会直接判断for循环是否正在执行最后一次迭代,因为Python的for循环是基于可迭代对象的,它不知道也不关心迭代的内部状态... 目录1.使用enuhttp://www.chinasem.cnmerate()和len()来判断for