第二區段#sec2 的 HTML 設計

  <section id="sec2">

    <div class="page2Container">

      藍字部份的class名稱是為了動畫設計而加的
      <div class="block wow flipInY" style="animation-delay: 0.5s;">
        <i class="fa fa-trophy fa-4x"></i>
        <h2>跨平台互動式網頁設計</h2>
        <p>Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。</p>
      </div>

      <div class="block wow flipInY" style="animation-delay: 1s;">
        <i class="fa fa-shopping-cart fa-4x"></i>
        <h2>前後台網站規劃建置</h2>
        <p>Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。</p>
      </div>

      <div class="block wow flipInY" style="animation-delay: 1.5s;">
        <i class="fa fa-book fa-4x"></i>
        <h2>整合式平面設計</h2>
        <p>Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。</p>
      </div>

      <div class="block wow flipInY" style="animation-delay: 2s;">
        <i class="fa fa-music fa-4x"></i>
        <h2>互動式多媒體電子書</h2>
        <p>Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。Adobe 公司 針對 Adobe Creative Suite 系列軟體升級為 CC 2014 版本，以下介紹有關 Web Design 系列軟體的新功能。</p>
      </div>

    </div>    

  </section>    
        

第二區段#sec2 的 CSS 樣式設計

/* #sec2  ===================================================================== */
.page2Container { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; }

.page2Container .block { width: 21%; margin: 2%; padding: 20px;
  border: 12px solid #999; background: white; transition: all 0.5s; }

.page2Container .block .fa { width: 100px; height: 100px; margin: 0 auto;
  border-radius: 50%; border: 4px solid #999; text-align: center; transition: all 0.5s; 
  display: flex; justify-content: center; align-items: center;
}

.page2Container .block h2 { font-size: 20px; text-align: center; padding: 20px 0; }
.page2Container .block p { text-align: justify; }

#sec2 .block:hover { background-color: #cfe4f8; border: 12px solid #396487;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.7); cursor: pointer; margin-top: -10px; }

#sec2 .block:hover .fa { background: #4b7fb4; border: 5px solid #1a5584; color: #FFF; }

@media ( max-width:1030px ){ .page2Container .block { width: 46%; margin: 2%; } }
@media ( max-width:700px ){ .page2Container .block { width: 96%; margin: 2%; } }
        

加上外掛程式讓#sec2中的區塊以動畫呈現在畫面上

• 前往 WOW.js 了解相關說明
• 前往 Documentation 了解操作說明
• 前往 Animate.css 了解各種動畫效果範例
• 前往 GitHub 下載相關檔案

先載入相關外掛的 CSS&JS 檔案

  <script src="路徑/wow.min.js"></script>
  <link rel="stylesheet" href="路徑/animate.css">
</head>
        

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

  // wow js - Animation js 建立WOW物件控制物件視差移動 ==========================
  new WOW({ mobile: false }).init();