JDX01(2017):Travel World(1)

範例結果

二、各【section】頁面有斜邊效果

S1:若直接加至section ,頁面內內容全部變形

解決方法:

  1. 全部內容再包DIV,再旋轉回來
  2. 利用【:before】偽元素,使用障眼法(本範例方法)

S2:最後各頁調整之

S1:新增section各頁面加入

html結構

原始:
#main>section#sec$*4>h2{section$}

結果:
<div id="main">
  <section id="sec1">
    <h2>section1</h2>
  </section>
  <section id="sec2">
    <h2>section2</h2>
  </section>
  <section id="sec3">
    <h2>section3</h2>
  </section>
  <section id="sec4">
    <h2>section4</h2>
  </section>
</div>

pug 結構

    #main
      section#sec1
        h2 section1.介紹
      section#sec2
        h2 section2.背景說明
      section#sec3
        h2 section3.景點
      section#sec4
        h2 section4.動畫

 

S2:nav 加入 連結至各頁

    <nav>
      <a href="#sec1">1.介紹</a>
      <a href="#sec2">2.背景說明</a>
      <a href="#sec3">3.景點</a>
      <a href="#sec4">4.動畫</a>
    </nav>

S3:CSS美化

/* 各section 基本設定 ============================== */
#main{
  overflow: hidden;
  position: relative;
}
section{
  height: 100vh;
  position: relative;
 /*  background: #ffbdf4; */
  border: 2px solid #1411d4;
  padding: 50px;
}
section::before{
  content: '';
  width: 100%; height: 100%;
  position: absolute; z-index: -1;
  top: 0; left: 0;
  transform: rotate(-7deg);
  padding: 80px;
  margin-left: -80px; 
}
section:nth-child(2n):before{
  background: #8af8e6;
}
section:nth-child(2n+1):before{
  background: #fae9a0;
}
section h2{
  width: 100%; text-align: center;
  font-size: 30px; font-weight: bold;
  line-height: 80px; color: #364F6B;

  width: 100%;      /* 因sec3 利用 flex時 也算入區域中 */
}
section h2:before,section h2:after{
  content: "\f072"; font-family:'FontAwesome';
  padding: 0 20px; color: #FF549E;
}

SCSS結構【section通用格式】

(放棄 section before/after)

/* section============================ */
section{
  min-height: 100vh;
  position: relative;
  &:nth-child(2n){ background: #8af8e6;}
  &:nth-child(2n+1){background: #fd2586;}
  h2{
    width: 100%; text-align: center;
    font-size: 20px; font-weight: bold;
    line-height: 80px; color: $color-green;
    &:before,&:after{
      content: "\f072";
      padding: 0 20px; color: $color-pink;
    }
  }
} //section end

 

三、【#gotop】設定

S1:結構加入

html結構

  <!-- 外掛 animate.css 運用 -->
  <link rel="stylesheet" href="css/animate.css">


  <!-- #右下角 置頂 gotop 加入 -->
  <div class="fa fa-plane gotop" aria-hidden="true"></div>
Pug 結構
  head
    // 外掛 animate.css 運用
    link(rel="stylesheet", href="./css/animate.css")  

  body
    // 右下角 置頂 gotop 加入
    .fa.fa-plane.gotop

 

S2:外掛 animate.css 運用【連結官網
/* #gotop 設定 == */
.gotop{
  font-size: 100px;
  color: #db2f7f;
  text-shadow:1px 1px #000;
  position: fixed;
  right: 30px;
  bottom: 30px;
  transform: rotate(-45deg);
  cursor: pointer;

  animation: tada 1s infinite;
}

S3:animate.css 調整

@keyframes tada {
  from {transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -45deg);}
  10%, 20% {transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -47deg);}
  30%, 50%, 70%, 90% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -47deg); }
  40%, 60%, 80% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -43deg);}
 to {transform: scale3d(1, 1, 1)  rotate3d(0, 0, 1, -45deg); }
}