LoginSignup
2
2

More than 1 year has passed since last update.

@s_iwauchi(岩内 奨馬)

cssとjavascriptで軽度なアニメーションを実装してみよう！

Last updated at Posted at 2022-03-15

はじめに

こんにちは！GrowGroup株式会社の岩内と申します。
こちらの内容はcssとjavascriptを使って軽度なアニメーションを実装する内容となっており、
「アニメーションでどんなことができるのか」というイメージを掴んでいただくというのが今回の趣旨です。
ですのでエンジニア向けというより、ディレクター、デザイナー向けです。
後半で実際に手を動かします！

下準備

  1. vscodeのダウンロード
    URL:https://azure.microsoft.com/ja-jp/products/visual-studio-code/

  2. ワークショップで使用するファイルのダウンロード
    URL:https://40.gigafile.nu/0304-cdde4fed3c1c1f3dcf0df9c262c86023e

目次

  1. アニメーションとは
  2. css3アニメーション
  3. javascriptでできること
  4. 実際に手を動かしてみましょう！
  5. アニメーションを見てみる（時間が余れば）

1.アニメーションとは

連続して変化する絵や物により発生する仮現運動を利用した映像手法です。
仮現運動は要約するとパラパラ漫画です。
つまり、アニメーションはパラパラ漫画といえます。

2.css3アニメーション

要素をアニメーションさせるCSSの機能で、CSS TransitionとCSS Animationの2つの機能があります。

2-1.CSS Transitionとは

CSSプロパティが変化する際のアニメーションの速度を操作する手段を提供します。

sample.css
.sample {
  transition: all 0.3s linear;
}

/* transitionは切り分けてもよし */
.sample {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: linear;
}

transitionプロパティは、「transition: 変化の対象 変化の時間 変化の仕方」を指定します。
加えて、変化の終わりの状態となる「:hover」などの擬似クラスと組み合わせて利用するとアニメーションが発生します。
また、変化の仕方につきましては、イージング関数と呼ばれ、数種類用意されております。

2-2.CSS Animation

キーフレームアニメーションを適用できる機能で細かい動きのアニメーションを実装する時に利用します。
キーフレームアニメーションとはアニメーションの開始(0%)から終了(100%)までの任意の経過地点にプロパティを指定できるアニメーションのことです。(プロパティを指定した経過地点のことをキーフレームという)。

sample.css
@keyframes test1 {
 0% {
   width: 100px;
   height: 100px;
 }
 100% {
   width: 300px;
   height: 250px;
 }
}

@keyframes test2 {
 from {
   width: 100px;
 }
 to {
   width: 300px;
 }
}

@keyframes test3 {
 0% {
   width: 100px;
 }
 50% {
   width: 500px;
 }
 100% {
   width: 300px;
 }
}

/* アニメーションの呼び出し方 */
.sample {
  animation: test1 5s ease 2s infinite alternate;
}

/* animationは切り分けてもよし */
.sample {
  animation-name: test1;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction:reverse;
}

/* 各プロパティの初期値
  animation-nameはnone
  animation-durationは0
  animation-timing-functionはease（開始と終了を滑らかにする、計8種類あり下記サイトを参照）
  https://cotodama.co/animation-property/#animation-timing-function
  animation-delayは0
  animation-iteration-countは1
  animation-directionはnormal */

animationプロパティは、「animation: キーフレーム名 アニメーションの時間 アニメーションの進行度 アニメーション開始時間 アニメーションの繰り返し回数 アニメーションの再生方向」を指定します。
animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction の6つのプロパティの値を、組み合わせて指定することができます。 省略された値はそれらの初期の値に設定されます。

3.javascriptでできること

・既に誰かが作ったもの（ライブラリという）を利用できる
https://vincentgarreau.com/particles.js/
https://owlcarousel2.github.io/OwlCarousel2/

・cssのプロパティを操作
・アニメーションのタイミングを操作

メソッド（jqueryでの記法） 意味
.change() フォームの値が変わったとき
.click() クリックされたとき
.focus() フォーカスされたとき
.blur() フォーカスが外れたとき
.keyup() マウスボタンが上げられたとき
.keydown() マウスボタンが下げられたとき
.mouseenter() 要素にマウスが入ったとき
.mouseleave() 要素からマウスが出て行ったとき
.mouseover() 要素の中でマウスが動いたとき
.resize() サイズが変わったとき
.scroll() スクロールしたとき
などなど

4.実際に手を動かしてみましょう！

冒頭でダウンロードしていただいた中にpracticeフォルダが1~4ございます。
●●の部分を書き換えてみましょう！

practice1（Transitionを使用）

blue-boxクラスをhoverした際に、boxの色が青から赤に2秒間で変化するtransitionを設定してください。

practice1/practice.html
  <div class="blue-box"></div>
practice1/practice.css
.blue-box {
    background-color: blue;
    width: 100px;
    height: 100px;
}

/* 2秒かけて変化 */
.blue-box:hover {
    background-color: red;
    transition: ●● ●● ●●;

    /* 余裕があればtransitionを3つに分けてみてください
    transition-●●: ●●;
    transition-●●: ●●;
    transition-●●: ●●; */
}

practice2（keyframesを使用）

青い箱を4秒かけて一周させてみてください。

practice2/practice.html
  <div class="blue-box"></div>
practice2/practice.css
.blue-box {
    background-color: blue;
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    animation: ●● ●s ●● ● ●●;
}

@keyframes ●● {

}

practice3（javascriptとTransitionを使用）

画面外にいる青い箱が画面内に見えた時、背景色を赤色に変えてください。

practice3/practice.html
<div class="blue-box"></div>
practice3/practice.js
$(function(){
    $(window).scroll(function(){
        let top = $(".blue-box").offset().top; // ターゲットの位置取得
        let position = top - $(window).height();  // ターゲットが上からスクロールしたときに見える位置
        let position_bottom = top + $(".blue-box").height();  // ターゲットが下からスクロールしたときに見える位置

        if($(window).scrollTop() > position && $(window).scrollTop() < position_bottom){
            // 要素が見えたときの動き 
            $(".blue-box").addClass("●●");
        }else{
            // それ以外の動き
            $(".blue-box").removeClass("●●");
        }
        })
})
practice3/practice.css
.blue-box {
    background-color: blue;
    width: 100px;
    height: 100px;
    margin: 120vh 0 120vh;
    transition: all 0.8s linear;
}

/* app.jsで.blue-boxに追加するクラスのcssを書いてみましょう */
.●●{
    /* 背景をredに変えてください */
}

practice4（keyframesを使用）

エンターアニメーションを実装してください。
※秒数などはよしなに実装してみてください。

practice4/practice.html
  <div class="blue-background"></div>
  <div class="logo"><img src="logo.png"/></div>
practice4/practice.css
.blue-background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: blue;
}

.logo {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 209px;
    height: 48px;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

5.アニメーションを見てみる（時間が余れば）

・背景が遅れてくる（パララックスという手法）
https://jujutsukaisen.jp

・3Dアニメーション（three.js）
https://github.com/home

おわりに

いかがでしょうか。アニメーションを取り入れるだけでサイトに躍動感がでたり、強弱をつけることができます。
効果的に見せたい場合は是非アニメーションを取り入れていきましょう！
最後までご清聴いただき、ありがとうございました！

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2