PROSAGA码农传奇-react-使用react-scrollmagic动画React组件

使用react-scrollmagic动画React组件

作者: 楊♡
发布时间: 2025-02-28 03:41:52 (11天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    好吧，我得到它的工作，scrollmagic似乎没有在组件级别工作，所以它需要在单个组件中实现。
  </p>
  <P>
    此片段将以第一个元素到第二个元素的平滑淡入淡出效果进行过渡，同时保持重叠文本可见。我将此与固定的背景图像结合使用，但在达到第二个元素时淡化为不透明度为0.9。如果需要更多细节，请告诉我。
  </p>
   <pre>
    <code>
      
    <div>
      <Controller>
          <Scene duration={300} triggerElement="#first-container" offset={500}>
          {(progress) => (
            <Tween
            from={{
              css: {
                opacity: '1',
              },
              ease: 'Circ.easeOutExpo',
            }}
            to={{
              css: {
                opacity: '0.1',
              },
              ease: 'Circ.easeOutExpo',
            }}
              totalProgress={progress}
              paused
            >
              <div id='first-container' style={{backgroundColor:'blue',height:'100vh'}}>
                  <div id='first-content'>
                    <h1 >Header1</h1>
                  </div>
              </div>
            </Tween>    
          )}
        </Scene>
      </Controller>
      <div id='second-container' style={{backgroundColor:'red',height:'100vh'}}>
        <Controller>
          <Scene duration={300} triggerElement="#first-container" offset={500}>
          {(progress) => (
            <Tween
            from={{
              css: {
                opacity: '0',
              },
              ease: 'Circ.easeOutExpo',
            }}
            to={{
              css: {
                opacity: '0.9',
              },
              ease: 'Circ.easeOutExpo',
            }}
              totalProgress={progress}
              paused
            >
                <div id='second-content' style={{height:'100%'}}>
                  <h1 >header2</h1>
                  <p >test</p>
                </div>
            </Tween>    
            )}
          </Scene>
        </Controller>
      </div>
    </div>

</code>
  </pre>
</DIV>