動畫集錦(P2)

【.movie】廣告輪播

範例結果

 

一、【.movie】畫面準備

S1:【.movie】畫面準備

S1-1:html結構

  <h2>主題推薦</h2>
  <h3>動畫集錦</h3>
  <div class="movie">
    <ul class="title">
      <li class="on"><p data-en="Minions">小小兵</p><span>歡樂可愛,處處有梗!</span></li>
      <li><p data-en="Monsters University">怪獸大學</p><span>相信自已才有不可能發生!</span></li>
      <li><p data-en="The Good Dinosaur">恐龍當家</p><span>當隕石沒有撞向地球..</span></li>
      <li><p data-en="Toy Story">玩具總動員</p><span>感人劇情,擄獲了無數的心</span></li>
      <li><p data-en="Finding Nemo">海底總動員</p><span>Nemo剌激的冒險旅程</span></li>
    </ul>
    <div class="on" data-file="movie01"></div>
    <div data-file="movie02"></div>
    <div data-file="movie03"></div>
    <div data-file="movie04"></div>
    <div data-file="movie05"></div>
  </div>

S1-2:利用JQ加入背景圖片

    //S1:利用JQ顯示背景圖片
      $('.movie>div').each(function(){
        var $file = $(this).data('file');
        console.log($file);
        $(this).css({'background':'url(../images/p2/'+$file+'.jpg) center center'});
      });

S1-3:CSS美化

(1) 將【.movie>div】圖片重疊排列

.movie{
  width: 100%; height:500px;

  position: relative;

  &>div{
    width: 100%; height: 100%;

    position: absolute; top: 0; left: 0;
    opacity: 0;

    &:nth-of-type(1){
      opacity: 1;
    }
  } //div end
} // .movie end

(2) 將【.movie>title】置於圖片下方

除了一般CSS美化習慣,利用position外,使用Flex 也可以設定 z-index

.movie{
  display: flex; 

  .title{
    z-index: 1;
    // position: absolute; left: 0; bottom: 0;
    align-self: flex-end; flex:1;
    display: flex;

    li{
      background: rgba(0, 0, 0, 0.374);
      flex:1;
    }

  } //.title end
} // .movie end

(3) 將【.movie>title】基本美化

※span 置於右下角,利用margin-top:auto時,需要flex考量

.movie{
  .title{
    li{
      display: flex; flex-direction: column;
      height: 60px;

      color: #EFAF00;
      border-right: 1px solid #ca9057; padding: 5px;

      &:last-child{ border-right: none;}
      
      p{font-size: .9em;}
      span{
        font-size: .6em; text-align: right;

        margin-top:auto; 
      }
    } //li end
  } //.title end
} // .movie end

(4) 將【.movie>title】,利用【li.on】者表示正在顯示的CSS美化,並在上方加入三角形

.movie{
  .title{
    li{
      &.on{
        background:#fcd063; color:#000; font-weight: bold;
        position: relative;
        filter: drop-shadow(1px -1px 3px #000);
      }
      &.on:before{
        content: '';
        border-bottom: 10px solid #fcd063;
        border-left:10px solid transparent; border-right:10px solid transparent;
        position: absolute; top: -9px; left: 50%; margin-left: -10px;
      }
    } //li end
  } //.title end
} // .movie end

(5) 利用 CSS美化中,【:after】中【content】的【data-*】應用

參考連結:【content屬性

.movie{
  .title{
    li{
      p::after{
        content:attr(data-en);
        font-size: .7em;
        display: block;
      }
    } //li end
  } //.title end
} // .movie end