Question

我有一个徽标动画，它将徽标从垂直位置更改为水平位置。为了构建网站的标题，我们现在希望使用此动画作为网站顶部的导航和常规导航之间的切换。

我找到了一些有关如何在滚动条上使SVG动画化的帖子，但是由于我是一名图形设计师，并且仅对CSS和Javascript有基本的了解，所以我发现的帖子主要介绍了如何绘制与滚动条有关的SVG。 -％在我的示例中，它无法按照我想要的方式工作。

基本上，我有一个带有内置动画的SVG，当前该动画从悬停开始。但是我想在网站滚动1px或更多时启动动画，并在网站滚动回到顶部后反转动画。

我的示例SVG：

  <style>
    <![CDATA[
    #ece2x0r7mh761 {
      pointer-events: all
      }
    #ece2x0r7mh761 * {
      animation-play-state: paused !important
      }
    #ece2x0r7mh761:hover * {
      animation-play-state: running !important
      }
    #ece2x0r7mh763 {
      animation: ece2x0r7mh763__sz 1000ms linear 1 normal forwards
      }
    @keyframes ece2x0r7mh763__sz {
      0% {
        width: 1731px;height: 364px
        }
      100% {
        width: 1731px;height: 144.411907px
        }
      }
    #ece2x0r7mh764_to {
      animation: ece2x0r7mh764_to__to 1000ms linear 1 normal forwards
      }
    @keyframes ece2x0r7mh764_to__to {
      0% {
        transform: translate(-9725.500000px,9673.009943px)
        }
      100% {
        transform: translate(-10409.054784px,9592.205954px)
        }
      }
      ]]>
  </style>
  <defs>
    <filter id="ece2x0r7mh763-filter" x="-400%" width="600%" y="-400%" height="600%">
      <feGaussianBlur id="ece2x0r7mh763-filter-drop-shadow-0-blur" in="SourceAlpha" stdDeviation="0,3"/>
      <feOffset id="ece2x0r7mh763-filter-drop-shadow-0-offset" dx="0" dy="3" result="tmp"/>
      <feFlood id="ece2x0r7mh763-filter-drop-shadow-0-flood" flood-color="rgba(0,0,0,0.2)"/>
      <feComposite id="ece2x0r7mh763-filter-drop-shadow-0-composite" operator="in" in2="tmp"/>
      <feMerge id="ece2x0r7mh763-filter-drop-shadow-0-merge">
        <feMergeNode id="ece2x0r7mh763-filter-drop-shadow-0-merge-node-1"/>
        <feMergeNode id="ece2x0r7mh763-filter-drop-shadow-0-merge-node-2" in="SourceGraphic"/>
      </feMerge>
    </filter>
    <linearGradient id="ece2x0r7mh764-fill" x1="0.500000" y1="0" x2="0.500000" y2="1" spreadMethod="pad" gradientUnits="objectBoundingBox">
      <stop id="ece2x0r7mh764-fill-0" offset="0%" stop-color="rgb(0,148,198)"/>
      <stop id="ece2x0r7mh764-fill-1" offset="100%" stop-color="rgb(0,74,99)"/>
    </linearGradient>
  </defs>
  <g id="ece2x0r7mh762" transform="matrix(1 0 0 1 10532 -9579)">
    <rect id="ece2x0r7mh763" width="1731" height="364" rx="0" ry="0" transform="matrix(1 0 0 1 -10532.00000000001091 9579.00000000000182)" filter="url(#ece2x0r7mh763-filter)" fill="rgb(255,255,255)" stroke="none" stroke-width="1"/>
    <g id="ece2x0r7mh764_to" transform="translate(-9725.500000,9673.009943)">
      <circle id="ece2x0r7mh764" r="59" transform="translate(59,59)" fill="url(#ece2x0r7mh764-fill)" stroke="none" stroke-width="1"/>
    </g>
  </g>
</svg>

期待提供帮助。问候

SVG动画从滚动开始–滚动回顶部时反向动画

0 个答案: