ブログデザイン備忘録～ Animistaの応用

今回はAnimistaを使って、過去に紹介したニューモフィックデザイン、文字のモーフィングを組み合わせたCSSアニメーションについて紹介する。

atatat.hatenablog.com

まずベースをニューモフィックデザインで作成する。以下のNeumophic Generatorを使用すると見た目に合わせたCSSコードを出力してくれる。

使い方はPresetsで全体の色と形状としてBoxまたはCircle、立体感として凹凸、平坦、盛り上がりを選択する。さらにNextをクリックしてOptionでライティング強度やぼかし具合など設定することができる。

コードはCpoy allでクリップボードにコピーされるので、必要なところでペーストすればよい。ただし、生成されるCSSコードは以下のようにグラデーション、影、Boxの角丸のコードのみなので、HTMLで適切な階層を設定してオブジェクトのサイズやバックグラウンドを指定する必要がある。

background: #D2DBEE;
border-radius: 25%;
box-shadow: 17.12px 17.12px 15px #BFC7D9, -17.12px -17.12px 15px #E5EFFF;

今回は背景(クラスA), ベース(クラスB), オブジェクト(クラスC)として、さらに文字をモーフィングするための層(クラス morphingとクラス word)を用意する。

<div class="A">
  <div class="B">
    <div class="C"></div>
    　　　<div class="morphing">
  　　　　<div class="word">Word</div>
  　　　　<div class="word">morphing</div>
               </div>
    </div>
  </div>
  
</div>

クラスAでは背景色やフォント色、サイズを設定する。背景色はNeumophic Generatorのベース色を用いてbackground-color: #D2DBEE;とする。

.A{
   display:flex;
   height: 100vh;
   align-items: center;
   justify-content: center;
   background-color: #D2DBEE;
   color:orange;
   font-size: 50px;
}

クラスBは角を落としたBoxで、サイズはwdith/height:300pxとした。

.B{
width:300px;
height:300px;
/* 以下Neumophic Generatorのコード貼り付け*/
background: #D2DBEE;
border-radius: 25%;
box-shadow: 17.12px 17.12px 15px #BFC7D9, -17.12px -17.12px 15px #E5EFFF;
}

クラスCはCircleで、サイズはwdith/height:100pxとした。またBox上中央に配置するためmargin:100px;とした。

.C{
margin:100px;
width:100px;
height:100px;
/* 以下Neumophic Generatorのコード貼り付け*/
background: linear-gradient(145deg, #FFFFFF, #9EA5B3);
border-radius: 100%;
box-shadow: 21.62px 21.62px 28px #696E77, -21.62px -21.62px 28px #FFFFFF;
}

ここまででニューモフィックデザイン自体は完了。ベースとオブジェクトのアニメーションはvibrateとwobbleを動きとして割り当て、keyframeのコードはAnimistaを用いて生成する。（方法は過去記事参照）

.B {
    -webkit-animation: vibrate-1 0.3s linear infinite both;
            animation: vibrate-1 0.3s linear infinite both;
}
.C {

    -webkit-animation: wobble-hor-bottom 0.8s infinite both;
            animation: wobble-hor-bottom 0.8s infinite both;
}

最後に文字のモーフィングは、上の過去記事をそのまま利用した。

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: word 4s infinite ease-in-out;
}
@keyframes word {
  0%, 100% {
  filter: blur(0px);
    opacity: 1;
  }
  50% {
    filter: blur(1em);
    opacity: 0;
  }
}