WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

要素が順番にフェードインしながらスライドダウン

f:id:mmmmofu:20161004175417p:plain

デモはこちら

http://efu.sakura.ne.jp/web/fisd/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>SlideDown</title>
  <style>
  body {
    background: #FCFAF2;
    border-top: 10px solid #0C0C0C;
    margin: 0;
  }
  ul {
    width: 900px;
    height: 400px;
    margin: 50px auto 0;
    letter-spacing: -0.4em;
    font-size: 0;
  }
  ul li {
    position: relative;
    opacity: 0;
    display: inline-block;
    list-style: none;
    width: 33.333%;
    height: 50%;
    border: 1px solid #FCFAF2;
    box-sizing: border-box;
  }
  ul li p {
   color: #FCFAF2;
   font-weight: bold;
   font-family:
    "游ゴシック",
    YuGothic,
    "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN",
    "メイリオ",
    Meiryo,
    "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  font-size: 20px;
  border-bottom: 1px solid #FCFAF2;
  margin: 30px 10px 0;
  }
  ul li.l01 {
    background: #A8D8B9;
  }
  ul li.l02 {
    background: #91AD70;
  }
  ul li.l03 {
    background: #268785;
  }
  ul li.l04 {
    background: #7B90D2;
  }
  ul li.l05 {
    background: #B481BB;
  }
  ul li.l06 {
    background: #A8497A;
  }
  ul li.l07 {
    background: #CB4042;
  }
  ul li.l08 {
    background: #F596AA;
  }
  ul li.l09 {
    background: #DDD23B;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script>
    $(function(){
      var slideIn = 150;
      $('ul li').each(function(i){
        $(this).delay( i * ( slideIn ) ).css( {'top':-30} ).animate( {'opacity':1,'top':0});
      });
    });
  </script>
</head>
<body>
<ul>
  <li class="l01">
    <p>リスト1</p>
  </li>
  <li class="l02">
    <p>リスト2</p>
  </li>
  <li class="l03">
    <p>リスト3</p>
  </li>
  <li class="l04">
    <p>リスト4</p>
  </li>
  <li class="l05">
    <p>リスト5</p>
  </li>
  <li class="l06">
    <p>リスト6</p>
  </li>
  <li class="l07">
    <p>リスト7</p>
  </li>
  <li class="l08">
    <p>リスト8</p>
  </li>
  <li class="l09">
    <p>リスト9</p>
  </li>
</ul>
</body>
</html>

遅延させる時間を変数にいれておき、
eachでli分スライドインを繰り返してdelayで先ほど設定した分遅延させる