使用 ScrollMagic 停止带有背景的文本滚动

Question

我正在尝试弄清楚如何使用 ScrollMagic 阻止文本随背景图像一起滚动。但我一直没有成功。这里是JSFiddle。我已经尝试了几天，但没有运气。所以基本上我希望文本执行如果没有 ScrollMagic 通常会执行的操作，当用户滚动页面时它应该向上滚动，就像背景图像上没有动画时通常所做的那样。也许阻止内部 div 动画化？

$(document).ready(function() {


  var controller = new ScrollMagic.Controller();

  var galleryScene = new ScrollMagic.Scene({
      triggerElement: '#gallery-main',
      triggerHook: 0
    })
    .setClassToggle('#gallery-main', 'slide-in')
    .addIndicators()
    .addTo(controller);

  var aboutScene = new ScrollMagic.Scene({
      triggerElement: '#about-main',
      triggerHook: 0
    })
    .setClassToggle('#about-main', 'slide-in')
    .addIndicators()
    .addTo(controller);

  var productScene = new ScrollMagic.Scene({
      triggerElement: '#product-main',
      triggerHook: 1
    })
    .setClassToggle('#product-main', 'slide-in')
    .addIndicators()
    .addTo(controller);

  var workshopScene = new ScrollMagic.Scene({
      triggerElement: '#workshop-main',
      triggerHook: 1
    })
    .setClassToggle('#workshop-main', 'slide-in')
    .addIndicators()
    .addTo(controller);

  var blogScene = new ScrollMagic.Scene({
      triggerElement: '#blog-main',
      triggerHook: 0
    })
    .setClassToggle('#blog-main', 'slide-in')
    .addIndicators()
    .addTo(controller);

  var contactScene = new ScrollMagic.Scene({
      triggerElement: '#contact-main',
      triggerHook: 0
    })
    .setClassToggle('#contact-main', 'slide-in')
    .addIndicators()
    .addTo(controller);
});

body {
  overflow-x: hidden;
}

.vertical-center {
  min-height: 100%;
  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh;
  /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}

.gallery-background-colour {
  background-color: #EDEAE3;
  overflow-x: hidden;
}

.gallery {
  background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/poppy.png') 50% 0 no-repeat fixed;
  -webkit-background-size: 30%;
  -moz-background-size: 30%;
  -o-background-size: 30%;
  background-size: 30%;
  background-position: right;
  transition: all 1s ease-out;
  transform: translateX(360px);
}

.gallery.slide-in {
  transform: translateX(0px);
}

.about-background-colour {
  background-color: #EFEDE6;
}

.about {
  background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/orchid.png') 50% 0 no-repeat fixed;
  -webkit-background-size: 30%;
  -moz-background-size: 30%;
  -o-background-size: 30%;
  background-size: 30%;
  background-position: 0%;
  transition: all 1s ease-out;
  transform: translateX(-250px);
}

.about.slide-in {
  transform: translateX(0px);
}

.product-background-colour {
  background-color: #F1EFE9;
}

.product {
  background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/dalianew.png') 50% 0 no-repeat fixed;
  -webkit-background-size: 31%;
  -moz-background-size: 31%;
  -o-background-size: 31%;
  background-size: 31%;
  text-align: center;
  background-position: 90%;
  transition: all 1s ease-out;
  transform: translateY(300px);
}

.product.slide-in {
  transform: translateY(0px);
}

.workshop-background-colour {
  background-color: #F3F1EC;
}

.workshop {
  background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/iris.png') 50% 0 no-repeat fixed;
  -webkit-background-size: 34%;
  -moz-background-size: 34%;
  -o-background-size: 34%;
  background-size: 34%;
  height: 100vh;
  text-align: center;
  background-position: 10%;
  transition: all 1s ease-out;
  transform: translateY(300px);
}

.workshop.slide-in {
  transform: translateY(0px);
}

.blog-background-colour {
  background-color: #F5F4F0;
}

.blog {
  background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/tulip-red.png') 50% 0 no-repeat fixed;
  -webkit-background-size: 28%;
  -moz-background-size: 28%;
  -o-background-size: 28%;
  background-size: 28%;
  background-position: right;
  transition: all 1s ease-out;
  transform: translateX(260px);
}

.blog.slide-in {
  transform: translateX(0px);
}

.contact-background-colour {
  background-color: #F7F6F3;
  overflow-x: hidden;
}

.contact {
  background: url('http://www.diong.co.uk/laurentino/wp-content/themes/laurentinoazavedo/assets/img/flame-lillies.png') 50% 0 no-repeat fixed;
  -webkit-background-size: 38%;
  -moz-background-size: 38%;
  -o-background-size: 38%;
  background-size: 38%;
  text-align: center;
  background-position: left;
  transition: all 1s ease-out;
  transform: translateX(-300px);
  overflow-x: hidden;
}

.contact.slide-in {
  transform: translateX(0px);
  overflow-x: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/jquery.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>


<div class="container-fluid vertical-center">
  <p>
    I'm a filler
  </p>
</div>
<a href="">
  <div class="gallery-background-colour">
    <section id="gallery-main" class="gallery">
      <div class="container-fluid vertical-center">
        <div class="row">
          <div class="col-sm-12">
            <h2>GALLERY</h2>
            <p class="larger-font">We create everlasting memories.</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</a>
<a href="#">
  <div class="about-background-colour">
    <section id="about-main" class="about ">
      <div class="container-fluid vertical-center">
        <div class="row">
          <div class="col-sm-10 col-sm-offset-4">
            <h2>ABOUT</h2>
            <p class="larger-font">Working with natural wonders to illustrate the clean lines of modern sophistication.</p>
          </div>
        </div>
      </div>
    </section>
  </div>

</a>
<a href="#">
  <div class="product-background-colour">
    <section id="product-main" class="product">
      <div class="container-fluid vertical-center">
        <div class="row">
          <div class="col-sm-12">
            <h2>PRODUCT</h2>
            <p class="larger-font">Bla take on natural elements brings style to your space.</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</a>
<a href="#">
  <div class="workshop-background-colour">
    <section id="workshop-main" class="workshop">
      <div class="container-fluid vertical-center">
        <div class="row">
          <div class="col-sm-12 col-sm-offset-4">
            <h2>WORKSHOPS</h2>
            <p class="larger-font">We believe there is a designer in all of us.</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</a>
<a href="#">
  <div class="blog-background-colour">
    <section id="blog-main" class="blog">
      <div class="container-fluid vertical-center">
        <div class="row">
          <div class="col-sm-12">
            <h2>BLOG/NEWS</h2>
            <p class="larger-font">Our trends are ideal for the world traveller to follow.</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</a>
<a href="#">
  <div class="contact-background-colour">
    <section id="contact-main" class="contact">
      <div class="container-fluid vertical-center">
        <div class="row">
          <div class="col-sm-12 col-sm-offset-8">
            <h2>CONTACT</h2>
            <p class="larger-font">We are more than willing to meet and discuss your personalised needs.</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</a>

Answer 1

您应该尝试将动画背景和您的内容分开。现在，文本跟随您的背景图像，因为它是您移动的元素的子元素。

我在 fiddle https://jsfiddle.net/j8hv5ur1/ 中对您的代码进行了一些调整，使您的第一张幻灯片（图库）可以正常工作。你可以看到我只对背景图像而不是整个包装进行了动画处理。

<div class="gallery-background-colour">
    <section class="wrp">
      <span id="gallery-main" class="gallery"></span>
      <div class="container-fluid vertical-center">
        <div class="row">
          <div class="col-sm-12">
            <h2>GALLERY</h2>
            <p class="larger-font">We create everlasting memories.</p>
          </div>
        </div>
      </div>
    </section>
  </div>

使用 ScrollMagic 停止带有背景的文本滚动

Stop text scrolling with background using ScrollMagic

html

javascript

css

jquery

scrollmagic