Stop text scrolling with background using ScrollMagic

Question

I and trying to figure out how to stop the text from scrolling with the background image using ScrollMagic. But I have been unsuccessful. Here is the JSFiddle. I have been trying for a couple of days but no luck. So basically I want the text to do what it would normally do if there was no ScrollMagic, it should scroll up when the user scrolls the page like it usually does if there was not animation on the background image. Maybe stoping the inner div from being animated?

$(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;
}










  
    I'm a filler
  


  
    
      
        
          
            GALLERY
            We create everlasting memories.
          
        
      
    
  


  
    
      
        
          
            ABOUT
            Working with natural wonders to illustrate the clean lines of modern sophistication.
          
        
      
    
  



  
    
      
        
          
            PRODUCT
            Bla take on natural elements brings style to your space.
          
        
      
    
  


  
    
      
        
          
            WORKSHOPS
            We believe there is a designer in all of us.
          
        
      
    
  


  
    
      
        
          
            BLOG/NEWS
            Our trends are ideal for the world traveller to follow.
          
        
      
    
  


  
    
      
        
          
            CONTACT
            We are more than willing to meet and discuss your personalised needs.

lordmrx · Accepted Answer

you should try to separate the animated background and your content. Right now, the text follows your background image because it is a child of the element you move.

I made your first slide (gallery) work with a little tweak to your code in this fiddle https://jsfiddle.net/j8hv5ur1/ . You can see that I animated only the background image instead of the whole wrapper.


    
      
      
        
          
            GALLERY
            We create everlasting memories.

Stop text scrolling with background using ScrollMagic

Answers (1)

Related Questions