Блог

В качестве предисловия это может быть полезно увидеть: 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. В идеале мне бы хотелось, чтобы текст появлялся и исчезал. Сначала вы видите, что «информация 1» исчезает, затем исчезает, прежде чем увидеть, как «информация 2» исчезает / исчезает и т. Д.
2. В текущем фрагменте параллаксная прокрутка начинается, как только курсор мыши наводится на элемент. Это проблема, когда ваша мышь находится в нижней части экрана, а весь «.card-body» не отображается. Это отключает содержимое. Я понимаю, почему, но как я могу обойти это? Я хочу, чтобы весь вид был синим фоном и ничем другим.