JavaScript实现的带滚动惯性的视觉差网页特效插件源码

mazai5080

已于 2022-04-20 01:12:36 修改

阅读量802

点赞数

分类专栏：前端源码文章标签： javascript 经验分享

于 2022-04-20 01:12:23 首次发布

本文链接：https://blog.csdn.net/mazai5080/article/details/124287744

版权

前端源码专栏收录该内容

100 篇文章 25 订阅

订阅专栏

大家好，今天给大家介绍一款，JavaScript实现的带滚动惯性的视觉差网页特效插件源码（图1）。送给大家哦，获取方式在本文末尾。

图1

下滑鼠标滚轮，即可产生视觉差特效，在产品介绍等页面使用效果非常好（图2）

图2

自适应各种分辨率（图3）

图3

源码完整，需要的朋友可以下载学习（图4）

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>js带滚动惯性的视觉差特效插件</title>
		<link rel="stylesheet" type="text/css" href="static/css/bootstrap-4.2.1.css">
		<link href="static/css/css.css" rel="stylesheet">
		<link rel="stylesheet" href="static/css/style.css">
		<link rel="stylesheet" href="static/css/prittyprint.css">
	</head>
	<body>


		<div id="luxy">
			<main id="main">
				<div id="section01">
					<div id="bg-section01" class="luxy-el bg-section" data-speed-y="40"></div>
					<div class="content-inner">
						<div class="d-flex justify-content-center oleo">
							<div class="luxy-el inner-el" data-horizontal="1" data-speed-x="-12">L</div>
							<div class="luxy-el inner-el" data-horizontal="1" data-speed-x="-6">u</div>
							<div class="luxy-el inner-el" data-horizontal="1" data-speed-x="-3">x</div>
							<div class="luxy-el inner-el" data-horizontal="1" data-speed-x="0">y</div>
							<div class="luxy-el inner-el" data-horizontal="1" data-speed-x="3">.</div>
							<div class="luxy-el inner-el" data-horizontal="1" data-speed-x="6">j</div>
							<div class="luxy-el inner-el" data-horizontal="1" data-speed-x="12">s</div>
						</div>
						<div class="text-center">
							<p>Inertia scroll and parallax effect plugin in Vanilla.js</p>
							<div><a href="javascript:;" class="btn btn-ghost" target="_blank">View on GitHub</a></div>
						</div>
					</div>
				</div>
				<div id="section02">
					<div class="container z-depth-2">
						<div class="row justify-content-center">
							<div class="col-lg-8">
								<h3 class="oleo title text-center mb-3">Installation</h3>
								<p>You can install it using npm:</p>
								<div class="code-print">
									<pre class="prettyprint linenums"><code class="language-html">npm install luxy.js --save</code></pre>
								</div>
								<p>Or just include the script in your page:</p>
								<div class="code-print">
									<pre class="prettyprint linenums"><code class="language-html">&lt;script src=&quot;path/to/luxy.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;</code></pre>
								</div>
								<p>Included luxy.js in your project and initialize:</p>
								<div class="code-print">
									<pre class="prettyprint linenums">
<code class="language-html">&lt;script charset=&quot;utf-8&quot;&gt;
    luxy.init();
&lt;/script&gt;</code>
</pre>
								</div>
							</div>
						</div>
					</div>
					<div id="fog01" class="luxy-el" data-speed-y="-5">
						<img src="static/picture/fog01.png" alt="fog">
					</div>
				</div>
				<div id="section03">
					<div id="bg-section02" class="luxy-el bg-section" data-speed-y="-10"></div>
				</div>
				<div id="section04">

					<div id="fog02" class="luxy-el" data-speed-y="-5">
						<img src="static/picture/fog01.png" alt="fog02">
					</div>
					<div class="container z-depth-2">
						<div class="row justify-content-center">
							<div class="col-lg-8">
								<h3 class="oleo title text-center mb-3">Usage</h3>
								<p>Wrap the entire content with the element specified in the wrapper option. Please
									exclude fixed elements.</p>
								<div class="code-print">
									<pre class="prettyprint linenums">
<code class="language-html">&lt;div id=&quot;luxy&quot;&gt;
    ... Entire content
&lt;/div&gt;</code>
</pre>
								</div>
								<p>Add .luxy-el to the element for which parallax effect is to be specified.</p>
								<div class="code-print">
									<pre class="prettyprint linenums"><code class="language-html">&lt;div id=&quot;luxy&quot;&gt;
    &lt;div class=&quot;luxy-el&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
								</div>
								<p>Specify the speed of the parallax effect with the data-speed-y attribute and offset
									with the data-offset attribute.</p>
								<div class="code-print">
									<pre class="prettyprint linenums"><code class="language-html">&lt;div id=&quot;luxy&quot;&gt;
    &lt;div class=&quot;luxy-el&quot; data-speed-y=&quot;5&quot; data-offset=&quot;-50&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
								</div>
								<p>If you want to move horizontally, specify data-horizontal="1" and specify the speed
									in the horizontal direction with the data-speed-x attribute.</p>
								<div class="code-print">
									<pre class="prettyprint linenums"><code class="language-html">&lt;div id=&quot;luxy&quot;&gt;
    &lt;div class=&quot;luxy-el&quot; data-horizontal=&quot;1&quot; data-speed-x=&quot;-5&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="section05">
					<div id="bg-section03" class="luxy-el bg-section" data-speed-y="-10"></div>
				</div>
				<div id="section06">
					<div class="container z-depth-2">
						<div class="row justify-content-center">
							<div class="col-lg-8">
								<h3 class="oleo title text-center mb-3">Options</h3>
								<table class="table table-bordered table-striped">
									<thead>
										<tr>
											<th>Name</th>
											<th>default</th>
											<th>description</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th>wrapper</th>
											<td>'#luxy'</td>
											<td>Entire content wrapper element.</td>
										</tr>
										<tr>
											<th>targets</th>
											<td>'.luxy-el'</td>
											<td>Parallax effect targets elements.</td>
										</tr>
										<tr>
											<th>wrapperSpeed</th>
											<td>0.08</td>
											<td>Inertia scroll speed.</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</main>
		</div>

		<script src="static/js/luxy.js" type="text/javascript" ></script>
		<script type="text/javascript">
			luxy.init({
				wrapper: '#luxy',
				targets: '.luxy-el',
				wrapperSpeed: 0.08
			});
		</script>
		<a href="https://smalltool.github.io/" style="display:none;"></a>
</body>
</html>

图4

本模板编码：10133，需要的朋友，点击下面的链接后，搜索10133，即可获取。

就爱UI - 分享UI设计的点点滴滴https://www.92ui.net/

mazai5080

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现的带滚动惯性的视觉差网页特效插件源码

大家好，今天给大家介绍一款，JavaScript实现的带滚动惯性的视觉差网页特效插件源码（图1）。送给大家哦，获取方式在本文末尾。图1下滑鼠标滚轮，即可产生视觉差特效，在产品介绍等页面使用效果非常好（图2）图2自适应各种分辨率（图3）图3源码完整，需要的朋友可以下载学习（图4）<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <
复制链接

扫一扫