【プロフィールページ改修第6回】デザイン改善 - スマレジエンジニアyushiのブログ

引き続き、プロフィールページを作成していきます。

yushi-dev.hatenablog.com

技術スタックは下記の通りです。

nuxt.js
SCSS
Tailwind CSS

今回はデザイン改善を進めていきます。

方針

前回まででざっとコーディングとコンテンツ入力を行いました。
今回は見栄えをいい感じに整えていきます。

表示時のアニメーション

表示の瞬間に、下からふわっと浮き上がりながらフェードインするアニメーションを実装しました。

f:id:yushi0:20220206220647g:plain

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.skill-card-fade-in {
  opacity: 0;
  &.show {
    animation: fadein 0.5s .1s ease-in forwards;
  }
}

hover時のアニメーション

hover時に、手前に浮き上がってくるアニメーションを実装しました。

f:id:yushi0:20220206220528g:plain

.card-wrap {
  transition: 0.5s;
  &:hover {
    box-shadow: 0 0 50px -10px $gray-2;
    transition: 0.5s;
  }
}

hover時のアニメーション2

hover時に、上に浮き上がるアニメーションを実装しました。

f:id:yushi0:20220206220411g:plain

.link-logo {
  transition: 0.5s;
  &:hover {
    transition: 0.5s;
    transform: translateY(-5px);
  }
}

Pull Request

https://github.com/nek0meshi/profile/pull/6 https://github.com/nek0meshi/profile/pull/7 https://github.com/nek0meshi/profile/pull/8

まとめ

普段アニメーションの実装をすることがあまりなかったので、とても勉強になりました。