大家好,今天给大家介绍一款,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"><script src="path/to/luxy.js" charset="utf-8"></script></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"><script charset="utf-8">
luxy.init();
</script></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"><div id="luxy">
... Entire content
</div></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"><div id="luxy">
<div class="luxy-el"></div>
</div></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"><div id="luxy">
<div class="luxy-el" data-speed-y="5" data-offset="-50"></div>
</div></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"><div id="luxy">
<div class="luxy-el" data-horizontal="1" data-speed-x="-5"></div>
</div></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