html缩放惯性,js带滚动惯性的视觉差特效插件

luxy.js一款js带滚动惯性的视觉差特效插件。该插件可以在页面中制作图片HTML内容滚动视觉差特效，并且在页面滚动时，带有惯性效果，非常炫酷。

安装

可以通过npm来安装luxy.js插件。

npm install luxy.js --save

使用方法

在页面中引入luxy.js文件。

HTML结构

使用js带滚动惯性的视觉差特效插件的基本HTML结构如下：

//这里放置内容

在内容中通过luxy-el来指定需要执行滚动视觉差的元素。

可以通过data-speed-y和data-offset属性来指定滚动视觉差的速度。

如果你想制作水平滚动视觉差，可以指定data-horizontal="1"，并指定它的速度data-speed-x="-5"。

初始化插件

在页面DOM元素加载完毕之后，通过luxy.init();方法来初始化该js滚动视觉差插件。

luxy.init();

使用data-*属性

在使用插件时，你可以使用data-parallax-background属性来设置参数。但是你同样需要使用$(element).parallaxBackground()方法来调用插件。例如：

配置参数

该js滚动视觉差插件的可用配置参数有：

参数

默认值

描述

wrapper

'#luxy'

整个包裹容器的选择器。

targets

'.luxy-el'

滚动视觉差的目标元素。

wrapperSpeed

0.8

惯性滚动的速度。

html缩放惯性,js带滚动惯性的视觉差特效插件相关推荐

html纵向滚动特效,带视觉差效果的垂直全屏整页滚动特效
这是一款效果非常炫酷的带视觉差效果的垂直全屏整页滚动特效.该特效使用jQuery和CSS3完成,用户可以通过滚动鼠标来一次垂直切换一个页面,在页面切换的时候还带有一些视觉差特效. 使用方法 HTML结 ...
jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
视觉粒子html,带视觉差效果可互动的背景粒子动画特效
这是一款效果非常炫酷的jQuery和CSS3网页背景粒子动画特效.该背景特效中粒子可以使用鼠标来进行互动,并且在粒子运动的过程中带有一些视觉差特效. 制作方法 HTML结构这个背景粒子动画特效的HT ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
JS实现滚动监听以及滑动到顶部
效果图: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
html图片自动切换的幻灯片效果的,js带点自动图片轮播幻灯片特效代码分享
本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:--- ...
7月31日云栖精选夜读 | 在浏览器上也能训练神经网络？TensorFlow.js带你玩游戏~...
无论你是刚开始深度学习,亦或是个老练的老手,建立一个神经网络的训练环境有时都会很痛苦.让神经网络的训练像加载一个网页,然后点击几下,然后你就准备好马上进行推理,会不会是件很棒的事呢?(那必须棒) 在本 ...

html缩放惯性,js带滚动惯性的视觉差特效插件

html缩放惯性,js带滚动惯性的视觉差特效插件相关推荐

最新文章

热门文章