Some Tips Components

01 - Google Code Prettify

ソースコードの表記

html file iconHTML

            
<!-- 参考コード -->
<div class="side-category">
  <div class="side-items">
    <a href="headers.html" class="m-item">Header</a>
    <a href="cards.html" class="m-item">Card</a>
    <a href="buttons.html" class="m-item">Button</a>
    <a href="footers.html" class="m-item">Footer</a>
    <a href="some_tips.html" class="m-item">Some Tips</a>
  </div>
</div>

Installation

  1. prettify.cssとprettify.jsが必要 (Prettify Getting Started)
  2. ソースコードを特殊記号にエスケープ（変換）する (https://lab.syncer.jp/Tool/HTML-Escape/)
  3. preタグにクラスを記入
    <pre class="prettyprint lang-html linenums">
  4. prettify.cssを適宜改変

TIPs.DESIGN

02 - Jump when you Select Section

セクションを選ぶとジャンプする

TIPs.DESIGN

03 - Moving logo or icon or photo

アニメーション Jump

shoe

html file iconHTML

          
<div class="move-photo">
  <div class="shoe-01">
    <img src="img/shoe-01.png" alt="shoe" class="down-shoe">
  </div>
</div>

scss file iconSCSS

           
.shoe-01{
  text-align: center;
  img{
    width:28%;
  }
  .down-shoe{
    // alternate-reversen:行ったり来たり
    // infinite:繰り返す（ループ）
    animation: moveShoe 1s alternate-reverse infinite;
  }
}
@keyframes moveShoe{
  from{
    // rotateでつぶれた表現
    transform:translateY(0) rotateX(30deg);
    box-shadow: (0 10px 5px -5px  rgba(211, 211, 211, 0.8));
  }
  to{
    transform:translateY(-50px);
  }
}

TIPs.DESIGN