基于jQuery实现SVG元素滚动渐变与淡出效果-html教程-PHP中文网

基于jQuery实现SVG元素滚动渐变与淡出效果

霞舞

发布： 2025-10-07 16:01:56

原创

1012人浏览过

基于jQuery实现SVG元素滚动渐变与淡出效果

本文详细介绍了如何利用jQuery和CSS实现SVG元素的滚动渐变与淡出效果，通过监听scrollTop和计算scrollBottom来动态控制元素的可见性。教程涵盖了核心JavaScript逻辑、关键CSS样式、HTML结构，并提供了调试技巧，帮助开发者创建响应用户滚动行为的动态视觉体验。

1. 引言：滚动交互设计中的动态效果

在现代网页设计中，为提升用户体验，经常需要根据用户的滚动行为来触发元素的动态效果，例如渐入、渐出、位移等。svg（可缩放矢量图形）因其矢量特性和可编程性，常被用于制作高质量的图标和图形。结合jquery，我们可以轻松实现svg元素的透明度（opacity）变化，从而创建平滑的渐变和淡出效果。本文将重点探讨如何同时利用页面顶部滚动距离（scrolltop）和页面底部距离（scrollbottom）来精确控制svg元素的可见性。

2. 核心概念：scrollTop 与 distanceFromBottom

要实现基于滚动的动态效果，我们需要获取两个关键的滚动位置信息：

scrollTop: 表示文档从顶部滚动过的像素距离。通过 $(document).scrollTop() 或 $(window).scrollTop() 可以获取。
distanceFromBottom: 表示当前视口底部距离文档底部的像素距离，即“滚动到底部的距离”。这个值需要通过计算得出： $(document).height() - ($(document).scrollTop() + $(window).height()) 其中：
- $(document).height() 是整个文档的高度。
- $(window).height() 是当前视口的高度。
- $(document).scrollTop() + $(window).height() 是当前视口底部距离文档顶部的距离。

通过这两个值，我们可以设定不同的滚动阈值，来触发SVG元素的显示或隐藏。

3. 实现步骤与代码示例

我们将通过一个具体的SVG Logo渐入渐出示例来演示。该Logo在页面顶部和底部附近时淡出，在页面中间区域显示。

硅基智能

基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播

查看详情

3.1 HTML 结构

首先，确保你的HTML页面中包含jQuery库，并设置好SVG元素及其容器。本例中，我们有一个固定在侧边的SVG Logo。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frame">
  <div class="verticallogoFixed">
    <a href="http://melanie-patterson.com/" class="svgLogo">
      <svg class="stickyMPlogo closed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 1200" fill="#D5E900">
        <!-- SVG Path Data Here -->
        <path d="M1.743 1096.853l68.161-32.474-68.16-25.37v-14.883h.845c0 7.273 6.005 7.78 22.665 7.78H62.8c16.66 0 22.664-.508 22.664-7.78h.846v22.833h-.846c0-7.273-6.004-7.78-22.664-7.78H4.534l75.602 28.076c-26.546 14.613-45.364 21.15-72.388 34.503l36.279.084c20.889.682 41.93-1.119 41.437-14.207h.846v22.833h-.846c0-7.272-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.508-22.664 7.78h-.846zm0-77.804v-60.55H13.16v.846c-10.478-.7-11.12 29.485-10.571 44.65h36.364c-9.416-10.07.946-20.246 1.353-30.274 0-3.213-1.861-6.258-4.82-6.258v-.846c4.989 0 9.302 4.144 9.302 10.825 0 10.317-7.273 14.63-7.442 20.634a7.175 7.175 0 0 0 2.96 5.92h45.158c-.446-10.818 2.366-42.783-13.108-44.65v-.847H86.31v60.55h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm0-88.459h.846c0 7.274 6.005 7.78 22.664 7.78h60.211c-.498-10.964 2.456-42.495-13.108-44.566v-.845H86.31v60.465h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78h-.846zm32.22-76.533c-1.607 0-2.283.93-2.283 2.03 0 4.059 8.88 6.596 8.88 11.416 0 2.368-2.283 2.791-4.482 1.945L.052 855.833v-.846l71.459-27.061c9.302-3.721 13.953-6.427 13.953-11.585h.846v27.737h-.846c0-11.924-6.85-11.5-15.39-8.287L42.42 846.276c49.873-7.207 58.144 40.325 29.09 41.608-20.803 0-28.752-33.827-37.547-33.827zm49.979 13.361c-.622-20.07-31.318-23.743-47.103-19.027L9.862 858.623l25.877 9.726c2.96 1.099 3.975.422 3.975-.93 0-3.89-8.88-7.02-8.88-11.501 0-1.608 1.1-2.791 3.298-2.791 11.332 0 14.884 27.568 35.772 27.568 7.949 0 14.038-4.99 14.038-13.277zM1.743 799.002l72.22-47.357c-17.211.588-72.082-4.438-71.374 14.208h-.846v-22.834h.846c0 7.273 6.005 7.78 22.664 7.78h62.748c1.394 1.533-81.51 53.535-81.522 54.375 16.771-1.027 79.921 5.545 78.985-14.206h.846V813.8h-.846c0-7.274-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78h-.846zm0-61.059V715.11h.846c0 7.273 6.005 7.78 22.664 7.78H62.8c16.66 0 22.664-.507 22.664-7.78h.846v22.833h-.846c0-7.274-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm0-27.907v-60.55H13.16v.846c-10.478-.7-11.12 29.485-10.571 44.651h36.364c-9.416-10.07.947-20.247 1.353-30.274 0-3.214-1.861-6.258-4.82-6.258v-.846c4.989 0 9.302 4.143 9.302 10.824 0 10.317-7.273 14.63-7.442 20.635a7.175 7.175 0 0 0 2.96 5.92h45.158c-.446-10.818 2.366-42.783-13.108-44.651v-.846H86.31v60.55h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.508-22.664 7.78zm0-95.223c.59-12.335-1.283-22.719-1.692-35.265 1.257-46.321 70.636-32.988 49.05 20.296h13.7c16.66 0 22.664-.507 22.664-7.78h.845v22.749h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm49.64-32.897C49.89 545.64-13.2 551.842 3.944 599.844h44.312a48.422 48.422 0 0 0 3.129-17.928zm-17.42-59.198c-1.607 0-2.283.93-2.283 2.03 0 4.06 8.88 6.596 8.88 11.416 0 2.368-2.283 2.791-4.482 1.945L.052 524.494v-.846l71.459-27.061c9.302-3.72 13.953-6.427 13.953-11.586h.846v27.738h-.846c0-11.924-6.85-11.5-15.39-8.287L42.42 514.938c49.872-7.208 58.144 40.324 29.09 41.607-20.803 0-28.752-33.827-37.547-33.827zm49.979 13.361c-.622-20.07-31.318-23.743-47.103-19.027L9.862 527.284l25.877 9.726c2.96 1.099 3.975.422 3.975-.93 0-3.89-8.88-7.02-8.88-11.501 0-1.607 1.1-2.791 3.298-2.791 11.332 0 14.884 27.569 35.772 27.569 7.949 0 14.038-4.99 14.038-13.278zM1.743 434.344H13.16v.845c-6.041-.525-10.505 10.491-10.571 25.116h60.21c16.66 0 22.665.17 22.665-7.103h.846v22.072h-.846c0-7.273-6.004-7.78-22.664-7.78H2.59c.067 14.625 4.53 25.641 10.57 25.116v.845H1.744zm0-64.188H13.16v.846c-6.041-.525-10.505 10.49-10.571 25.116h60.21c16.66 0 22.665.17 22.665-7.104h.846v22.072h-.846c0-7.272-6.004-7.78-22.664-7.78H2.59c.067 14.626 4.53 25.642 10.57 25.117v.845H1.744zm0-5.076v-60.548H13.16v.845c-10.478-.699-11.12 29.486-10.571 44.651h36.364c-9.416-10.072.947-20.247 1.353-30.275 0-3.213-1.861-6.258-4.82-6.258v-.845c4.989 0 9.302 4.143 9.302 10.824 0 10.317-7.273 14.63-7.442 20.634a7.176 7.176 0 0 0 2.96 5.92h45.158c-.446-10.817 2.366-42.783-13.108-44.65v-.846H86.31v60.549h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm83.721-65.624c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78h-.846C2.332 287.12.461 276.739.051 264.192c-1.813-34.953 44.866-38.172 45.837-3.89-.001 7.949-5.413 13.361-5.413 16.913 0 1.015.254 2.452 2.198 2.452 5.497 0 6.681-17.

登录后复制

以上就是基于jQuery实现SVG元素滚动渐变与淡出效果的详细内容，更多请关注php中文网其它相关文章！