第三區段#sec3 的 HTML 設計

  <section id="sec3">

    <section id="quotes" class="parallax-section">
      <div class="overlay"></div>
      <div class="container" style="display: block; text-align: center; max-width: 1200px; margin: 0 auto;">
        <i class="wow fadeInUp fa fa-star fa-4x" data-wow-delay="0.6s"></i>
        <h2 class="wow fadeInUp" data-wow-delay="0.8s" style="margin-bottom: 15px;">
          Education generally has both broad and narrow concepts.</h2>
        <p class="wow fadeInUp" data-wow-delay="1s">
          Broad education generally refers to all dissemination and study of the fruits of human civilization.</p>
        <p class="wow fadeInUp" data-wow-delay="1.2s">
          Narrow education specifically refers to school education, that is, institutionalized education.</p>
      </div>
    </section>

    <!-- Experience Section -->
    <section id="experience" class="wowArea">
      <div class="container">

        <div class="divBg" style="background: url(images/section3/photo6.jpg) center bottom;"></div>

        <div class="divText" style="background-color: rgba(131, 180, 229, 0.3);">

          <div class="wow fadeInRight" data-wow-delay="0.8s">
            <h1 style="font-size: 25px; font-family: 'Orbitron', 'cwTeXYen', sans-serif;">TS Web Design</h1>
            <h2 style="font-size: 15px;">網路深入生活，企業注重網路行銷，網頁設計師成為熱門。</h2>
          </div>

          <div class="wow fadeInRight" data-wow-delay="1.2s">
            <i class="fa fa-laptop fa-3x"></i>
            <h3>HTML5 + CSS3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>

          <div class="wow fadeInRight" data-wow-delay="1.4s">
            <i class="fa fa-laptop fa-3x"></i>
            <h3>JavaScript + JQuery</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>

          <div class="wow fadeInRight" data-wow-delay="1.6s">
            <i class="fa fa-laptop fa-3x"></i>
            <h3>Responsive web design</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>

        </div>
      </div>
    </section>

    <!-- Education Section -->
    <section id="education" class="wowArea">
      <div class="container">

        <div class="divText"  style="background-color: rgba(222, 189, 95, 0.3); text-align: right;">

          <div class="wow fadeInLeft" data-wow-delay="0.8s">
            <h1 style="font-size: 25px; font-family: 'Orbitron', 'cwTeXYen', sans-serif;">Creative Vision Graphic Design</h1>
            <h2 style="font-size: 15px;">創意思維堆疊平面設計技法，整合電腦繪圖軟體處理影像繪製插畫。</h2>
          </div>

          <div class="wow fadeInLeft" data-wow-delay="1.2s">
            <i class="fa fa-laptop fa-3x"></i>
            <h3>Commodity, graphic visual design</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>

          <div class="wow fadeInLeft" data-wow-delay="1.4s">
            <i class="fa fa-laptop fa-3x"></i>
            <h3>Cultural and creative goods visual design</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>

          <div class="wow fadeInLeft" data-wow-delay="1.6s">
            <i class="fa fa-laptop fa-3x"></i>
            <h3>Original painting illustration visual design</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>

        </div>

        <div class="divBg" style="background: url(images/section3/photo5.jpg) center bottom;"></div>

      </div>
    </section>

  </section>    
        

第三區段#sec3 的 CSS 樣式設計

/* #sec3  ===================================================================== */
#sec3 { padding: 0; }

/* #sec3 中的第1個section ------------------------------------------------ */
#quotes {
  background: url(images/section3/quotes-bg.jpg) 50% 0 repeat-y fixed;
  color: #ffffff; position: relative; padding: 280px 0px; 
}
.parallax-section {
  background-attachment: fixed !important;
  background-size: cover !important;
}

/* #sec3 中的第1個section裡面整片黑色半透明的區域 ---------------------------- */
#quotes .overlay {
  background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: absolute; top: 0;
}

/* #sec3 中的第2,3個section裡面的文字區 ------------------------------------- */
.wowArea .container { display: flex; flex-wrap: wrap; }
.wowArea .container .divBg { width: 50%; min-height: 400px; background-size: cover; }
.wowArea .container .divText { width: 50%; padding: 80px 40px; }
.wowArea .container .wow { padding-bottom: 30px; }

/* #sec3 中的第2個section -------------------------------------------------- */
#experience .fa { float: left; }
#experience h3 { padding:5px 0 0 60px; }
#experience p { padding:5px 0 0 60px; }

/* #sec3 中的第3個section -------------------------------------------------- */
#education .fa { float: right; }
#education h3 { padding:5px 60px 0 0; }
#education p { padding:5px 60px 0 0; }

@media( max-width: 1030px ){
  .wowArea .container .divBg, .wowArea .container .divText { width: 100%; }
}
        

加上外掛程式設計視差捲動效果

• 前往 Simple Parallax Scrolling 了解相關說明與下載相關檔案
• 點擊 Simple Parallax Scrolling 即可下載相關檔案

先載入相關外掛的 JS 檔案

  <script src="路徑/jquery.parallax.js"></script>
</head>
        

加上程式設計視差捲動效果

  // jQuery Parallax 背景視差移動 ===============================
  function initParallax() {
    //$('#experience').parallax("100%", 0.3);
    //$('#education').parallax("100%", 0.1);
    $('#quotes').parallax("50%", 0.2);
  }
  initParallax();