使用jQuery插件实现网页视差滚动效果

hacalili

已于 2024-02-18 15:22:39 修改

阅读量590

点赞数 1

分类专栏： HTML+CSS+JS（案例展示） jQuery 文章标签： css html 前端

于 2022-02-15 16:47:25 首次发布

本文链接：https://blog.csdn.net/weixin_42541725/article/details/122942980

版权

HTML+CSS+JS（案例展示）同时被 2 个专栏收录

46 篇文章 4 订阅

订阅专栏

jQuery

16 篇文章 0 订阅

订阅专栏

参考来源：

黑马程序员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="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/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="https://github.com/jiang-lijun/jq_scroll.git" 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="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 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">

                        </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>