40代高卒者が製造業からIT転職する【デザイン要素】

programming
DMM WEBCAMP

こんにちは、フローです。

今回は使うかどうかはわかりませんが、

ちょっと変わり種のアニメーションを作っていきたいと思います。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【フェードイン右から】

見出しで使える？アニメーション

最近のWEBデザインはとにかく動きのあるものが増えた印象があります。

見た目も面白いし、人気があるんですかね。

てなわけで、今回は使えるかどうかはわからないですが笑

見出しで使える？アニメーションを書いていきます。

こんな感じのやつです。

では、さっそくコードを見ていきましょう。

HTML

<header>
  <h1 class="header-text">Welcome to my website</h1>
</header>

ヘッダーやトップ画面に設計するイメージです。

CSS

header {
  height: 200px;
  background-color: #333;
  display: flex;
  align-items: center;
}

.header-text {
  font-size: 48px;
  color: white;
  margin: 0 auto;
  position: relative;
}

.header-text:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
  z-index: 2;
  pointer-events: none;
}

.header-text:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #333 0%, rgba(255,255,255,0) 50%, #333 100%);
  z-index: 1;
  pointer-events: none;
  animation: text-slide 4s linear infinite;
}

@keyframes text-slide {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(50px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.header-text:hover:after {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

ちょっと長いですね。基本的にこのCSSでアニメーションを実装しています。

jQuery

$(document).ready(function() {
  $('.header-text').addClass('animated');
});

CSSのアニメーションを使用して、

テキストを左右にスライドし、透明度を変化させます。

jQueryを使用して、ドキュメントが読み込まれた後に、

テキストにanimatedクラスを追加して、アニメーションを開始します。

また、ホバーイベントを使用して、アニメーションを停止し、

テキストをフェードアウトするように設定します。

このデザインは、サイトのヘッダーに注意を引く効果的な方法となります。

まとめ

WEBデザインで大事なのは、見る人が見やすい設計です。

ガチャガチャした感じはあまり好まれない傾向にあります。

しかし、遊び心で色々と試しておくと後で何かの役にたつかも？

レッツチャレンジ！