参考来源：
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
效果展示：
主要功能：
使用jQuery插件添加了视差滚动效果
网页GitHub地址如下：（若加载较慢建议刷新后耐心等待一会~）
jq_scroll
网页代码如下：
HTML:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jq_scroll</title><link href="/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"><link href="/css?family=Oleo+Script|Source+Sans+Pro" rel="stylesheet"><link rel="stylesheet" href="test/style.css"><link rel="stylesheet" href="test/prittyprint.css"></head><body><div class="htmleaf-container"></div><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">h</div><div class="luxy-el inner-el" data-horizontal="1" data-speed-x="-6">a</div><div class="luxy-el inner-el" data-horizontal="1" data-speed-x="-3">c</div><div class="luxy-el inner-el" data-horizontal="1" data-speed-x="0">a</div><div class="luxy-el inner-el" data-horizontal="1" data-speed-x="3">l</div><div class="luxy-el inner-el" data-horizontal="1" data-speed-x="6">i</div><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">i</div></div><div class="text-center"><p>jQuery</p><div><a href="/jiang-lijun/jq_scroll.git" class="btn btn-ghost" target="_blank">View onGitHub</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"><preclass="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"><preclass="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="test/img/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="test/img/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 excludefixed 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 withthe 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 inthe 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"></div></div></div></div></main></div><script src="dist/js/luxy.js" charset="utf-8"></script><script type="text/javascript">luxy.init({wrapper: '#luxy',targets: '.luxy-el',wrapperSpeed: 0.08});</script></body></html>
