Xeory ExtensionのTopページを編集してcssで文字を動かす

今回の編集は、固定フロントページとcssの編集。サイトのトップページを開いたときにアニメーションで文字が動くのを、cssで実行しています。

cssの編集

編集するのはcss。アニメーションで動かすためのクラス設定をします。

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.fadeInUp{
  /* ５秒かけてアニメーションする */
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  animation-delay: 0.5s;
}
.fadeInUp {
  animation-name: fadeInUp;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 15%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

テーマphpの編集

編集しているのは固定フロントページ（front-page.php）

子ページで運用しているので、親ページから持ってきます。

<div id="main_visual">
  <div class="wrap">
    <h2><?php echo nl2br(get_option('top_catchcopy'));?></h2>
    <p><?php echo nl2br(get_option('top_description'));?></p>
  </div><!-- .wrap -->
</div>

変更したのは3行目。H2見出しにclassのfadeInUp animatedを追加しています。

<div id="main_visual">
  <div class="wrap">
    <h2 class="fadeInUp animated"><?php echo nl2br(get_option('top_catchcopy'));?></h2>
    <p><?php echo nl2br(get_option('top_description'));?></p>
  </div><!-- .wrap -->
</div>