时间戳

首页 > 解决方案 > 视差滚动和交替文本同时

javascript - 视差滚动和交替文本同时

问题描述

作为序言，这可能有助于查看：http ://www.sbs.com.au/theboat/

我试图在这里复制类似的效果：https ://codepen.io/summeropratt/pen/ExgXYwa

<div class="first-section"></div>
    <div class="card-body">
      <section class="cards">
        <div class="center cards--inner">
          <div class="card" data-rellax-speed="-3">
            <h2>info 1</h2>
          </div>
          <div class="card" data-rellax-speed="0">
            <h2>info 2</h2>
          </div> 
          <div class="card" data-rellax-speed="1">
            <h2>info 3</h2>
          </div> 
          <div class="card" data-rellax-speed="3">
            <h2>info 4</h2>
          </div>  
        </div>
      </section>
    </div>
<div class="last-section"></div>

这是我正在努力解决的问题：

  1. 理想情况下，我希望文本淡入淡出。首先，您会看到“info 1”淡入视野，然后在看到“info 2”淡入/淡出之前淡出，等等。

  2. 在当前的代码片段中，当鼠标悬停在元素上时，视差滚动就开始了。当您的鼠标靠近屏幕底部并且整个“.card-body”不在视图中时，这是一个问题。它切断了内容。我明白为什么，但我怎样才能解决这个问题？我希望整个视图都是蓝色背景，而不是别的。

标签： javascripthtmlcssparallax

解决方案

推荐阅读