视差滚动文本不会超过div

Question

 <div class="containerFour">
    <div class="conHead">Our Story</div>
    <p>As people's expectations evolve with every new digital experience, and business success relies more heavily than ever on a digitally-centric organization, SapientRazorfish takes a no-silo, enterprise-wide view of both the experience of the customer and the digital operations critical to make it efficient and effective. As pioneers of the digital brand-consumer relationship, we partner with our clients to leverage the connected world to create outcomes of uncommon impact.</p>
  </div>
  <div class="parallaxGroup">

  <div class="footerOne"><div class="footerTxt section">
    <h1>Interested in working together?</h1>
  </div></div>
  <div class="footerTxt section">
    <img src="app/imgs/big-logo.png" class="fotterlogoImage">
    <h2>TO LEARN MORE ABOUT US</h2>
    <p><a href="http://www.sapientnitro.com" target="_blank">SapientNitro.com</a>
      <span>/</span><a href="http://www.razorfish.com" target="_blank">Razorfish.com</a></p>
  </div>
</div>
<div class="footerTwo"> </div>

CSS

.containerFour {
  position: relative;
  margin-top: 120px;
  text-align: left;
  width: 62%;
  max-width: 1040px;
  margin-left: 17%;
  margin-bottom: 10%;
  .conHead {
    font-weight: 400;
    font-family: miller, "Times New Roman", serif;
    text-transform: none;
    font-size: 64px;
    line-height: 70px;
  }
  p {
    margin-top: 40px;
    font-size: 24px;
    line-height: 42px;
    margin-bottom: 20px;
    width: 100%;
    color: black;
  }
}

.floatLeft {
  float: left;
  width: 42% !important;
}

.parallaxGroup{   transform-style: preserve-3d; } .footerOne {   background: #0030ff;   min-height: 700px;   height: 480px;   color: white;   /*transform: translateY(100px);*/   display: block;   /*transform: translateZ(-1px) scale(2);*/ } .footerTxt{   /*transform: translateY(100px);*/   position: fixed;   color: white;   z-index: 10; /*transform: translateZ(-1px) scale(2);*/   .fotterlogoImage{   width: 800px;   height: 180px;   margin-top: 250px;   padding-bottom: 23%;   background-attachment: fixed;   }   h2{
    margin-top: 0px;
    margin-bottom: 30px;
    font-size: 15px;
    color: #918f90;
    letter-spacing: 4px;
    text-align: left;   }   p{
    text-align: left;
    font-size: 24px;
    line-height: 42px;
    color: white;
    span{
      margin: 0 18px 0 20px;
    }
    a{color: white; text-decoration: none;}
    a:visited{color: white;}
    a:hover{color: white;}   } } .section{ 
    color: black !important;
    transform: translateY(-100px);
    /*transform: translateX(100px);*/
    transform: translateZ(-1px) scale(2);
    z-index: 1;   h1{
    font-weight: 400;
    font-family: miller,"Times New Roman",serif;
    text-transform: none;
    font-size: 64px;
    line-height: 70px;
    margin-bottom: 35px;   } } .footerTwo {   background: #231f20;   min-height: 780px;   height: 850px;   color: white; }

文本＆＃34;有兴趣一起工作？＆＃34;没有出现在页脚一个div上。我正在尝试做视差滚动。第二个照片的文字正在显示并正在工作。

或者给我新的代码 如何在css中进行视差滚动。

[https://jsfiddle.net/fst0a2ws/1/