Contents

テキストアニメーション

web制作で、文字をどう使うかによってデザインがまったく違った見え方をします。

今回の記事では、文字に動きをつけて、一癖ある文字を演出しています。

是非参考にしてみてください。

テキストが徐々に現れる

下の様にテキストが徐々に現れるテキストアニメーションです。

I like to be a free spirit.
Some don’t like that,
but that’s the way I am.

HTML

<p>
  <span id = "text1"> I like to be a free spirit. </span><br>
  <span id = "text2"> Some don’t like that, </span><br>
  <span id = "text3"> but that’s the way I am.</span>
</p>

CSS

#text1,#text2,#text3 {

    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
    width:0%;
    }

#text1 {
    animation:s1 6s infinite;
    }
    @keyframes s1 {
          from { width:0em; }
          33% { width: 13em; }
          to { width:13em; }
    }
    #text2 {
    animation:s2 6s infinite;
    }
    @keyframes s2 {
          0% { width:0em; }
          33% { width:0em; }
          66% { width:11em; }
          to { width:11em; }
    }
    #text3 {
    animation:s3 6s infinite;
    }
    @keyframes s3 {
          0% { width:0em; }
          66% { width:0em; }
          to { width:13em; }
    }

テキストが徐々に現れる２

上のテキストアニメーションとは違い、一文字ずつ下から徐々に現れ消えていくアニメーションになります。

導入にはJQUERYが必要になってきます。

A N I M A T I O N

HTML

    <h1 class="text">
        <span>A</span>
        <span>N</span>
        <span>I</span>
        <span>M</span>
        <span>A</span>
        <span>T</span>
        <span>I</span>
        <span>O</span>
        <span>N</span>
    </h1>

CSS

.text {
  display: flex;
  overflow: hidden;
  color: #000;
  font-family: 'futura', sans-serif;
}

.text span {
  display: block;
  transform: translate(0, 105%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.text.-visible span {
  transform: translate(0, 0);
}

.text span:nth-child(2) {
  transition-delay: 0.06s;
}
.text span:nth-child(3) {
  transition-delay: 0.12s;
}
.text span:nth-child(4) {
  transition-delay: 0.18s;
}
.text span:nth-child(5) {
  transition-delay: 0.24s;
}
.text span:nth-child(6) {
  transition-delay: 0.30s;
}
.text span:nth-child(7) {
  transition-delay: 0.36s;
}
.text span:nth-child(8) {
  transition-delay: 0.42s;
}
.text span:nth-child(9) {
  transition-delay: 0.48s;
}
.text span:nth-child(10) {
  transition-delay: 0.54s;
}

JS

    const CLASSNAME = "-visible";
    const TIMEOUT = 1500;
    const $target = $(".text");

    setInterval(() => {
    $target.addClass(CLASSNAME);
    setTimeout(() => {
        $target.removeClass(CLASSNAME);
    }, TIMEOUT);
    }, TIMEOUT * 2);

ホバーで下線が伸びる

下のメニューをホバーすると下線が左から右へ伸びていきます。

ホバーを解除するともとに戻ります。

HTML

    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>

CSS

a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
  }
  
  a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transform: translate(-100%, 0);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
    content: "";
  }
  
  a:hover:after {
    transform: translate(0, 0);
  }