【css】ブラウザのレンダリングを考慮したtranformの記述

アニメーションを実現するにはleftやrightといった記述もできるが、ブラウザのレンダリング処理への影響を考慮すると、transformプロパティを使うのが望ましい。transformプロパティを利用した方がブラウザのパフォーマンスが上がる。

非推奨

leftやrightプロパティ（レイアウトプロパティ）を使った例。
レンダリングに対する計算量が多い処理。

@keyframes kf-cover-slide {
  0% {
    left: 0;
    right: 100%;
  }
  50% {
    left: 0;
    right: 0;
  }
  100% {
    left: 100%;
    right: 0;
  }
}

推奨

transformプロパティを使った例。レンダリングに影響が少ない。

@keyframes kf-cover-slide {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.1% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

【sass】@mixinの使い方

sassの@mixinの記述方法についてまとめています。

サマリ

• cssを簡潔に書くための機能
• 変数を渡すことでcssのプロパティを適用できる関数のような使い方が可能
• 引数の初期値を設定できるので、mixinの呼び出し先で同じcssの記述をする必要がない
• animation~で始まるプロパティをまとめて書く方法もある
• background~も上記と同様

@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
  animation: {
    name: $name;
    duration: $duration;
    timing-function: $timing-function;
    delay: $delay;
    iteration-count: $iteration-count;
    direction: $direction;
    fill-mode: $fill-mode;
  }
}

.rect {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: $cBlack;
  @include animation($name: sk-bouncedelay);
  // animation: sk-bouncedelay 1.4s;
  // animation-timing-function: ease;
  // animation-delay: 3s;
  // animation-iteration-count: infinite;
  // animation-direction: alternate-reverse;
  // animation-fill-mode: both;
}
.paused {
  animation-play-state: paused;
}

@keyframes sk-bouncedelay {
  from {
    transform: scale(0);
    background-color: black;
  }

  to {
    transform: scale(1);
    background-color: green;
  }
}

【css】AnimationとKeyframesについて

cssのAnimationとKeyframesについてまとめています。

サマリ

• Animationを楽に、簡潔に記述するための方法としてKeyframesがある
• animationプロパティの第一引数にKeyframesを記述する
• animationプロパティの第二引数には、アニメーションが行われる間隔を記述でき、第三引数には、実行回数を記述できる
• ただしanimationに全てを記述するとわかりづらくなるので非推奨（一行に書く方法をショートハンドという）
• Keyframesには0〜100%でアニメーションの状態を定義する

.rect {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: $cBlack;
    animation: sk-bouncedelay 1.4s ease infinite;
    // animation-timing-function: ease; ←実行タイミング
    // animation-delay: 3s;
    // animation-iteration-count: infinite;　←実行回数
    // animation-direction: alternate-reverse;
    // animation-fill-mode: both;
    
}

@keyframes sk-bouncedelay {
    from {
        transform: scale(0);
        background-color: black;
    }
    
    to {
        transform: scale(1);
        background-color: green;
    }
}

【Sass】@for文で繰り返し処理を記述する

Sassでfor文を使って記述する方法についてまとめています。

サマリ

• @forで宣言する
• 変数は$iで記述する
• from 1 through 2は1から始まって2回ループするの意味
• 四則演算は単位がついた状態で計算できる（-0.32sなど）
• background-imageのファイル名に数字が入っている場合などは、#{$i}で記述することで変数を用いたコーディングができる

@for $i from 1 through 2 {
    &:nth-child(#{$i}) {
        animation-delay: -0.32s / $i;
       
        // ファイル名に変数を使う場合の記述
        // background-image: url('./images/image#{$1}.png');
    }
}

【css】:nth-child、:nth-of-typeについて

cssの:nth-child、:nth-of-typeについてまとめています。

サマリ

• :nth-childは親要素の中の子要素の中で、何番目かを判定してcssを適用する
• つまり、子要素は指定していない別のhtmlタグもカウント対象となる
• 逆に、:nth-of-typeは親要素の中の子要素の中で、指定のhtml要素で何番目かを判定する
• 子要素は指定していない別のhtmlタグはカウント対象外となる
• notは()内に該当しない要素にcssを適用する

div {
  & span {
    color: olive;

    // div要素の子要素の3番目spanにcolorを適用
    &:nth-child(3) {
      color: red;
    }

    // div要素の3番目のspanにcolorを適用
    &:nth-of-type(3) {
      color: red;
    }
    
    &:not(.cls) {
      color: purple;
    }
  }
}

【js】thisについて

Javascriptのthisについてまとめています。

サマリ

• class内でthisを使うとインスタンス化されたオブジェクトを参照する
• classの外で使うとグローバルオブジェクトを参照する
• classの中でwindow.setTimeoutを使い、その中でthisを指定するとwindowオブジェクトを参照することになる
• 基本的には直近で囲われているオブジェクトを参照する
• setTimeoutの例ではwindowオブジェクトから呼ばれているので参照先がwindowオブジェクトになる
• thisで参照したい値がずれる場合は、bindを使ってオブジェクトを渡すことでthisの参照先を指定することができる

document.addEventListener('DOMContentLoaded', function () {
    const btn = document.querySelector('#btn');
    const ta = new TextAnimation('.animate-title');
    const ta2 = new TextAnimation('.animate-title-2');
    ta.animate();
    ta2.animate();

    // bindを使う記述方法
    btn.addEventListener('click', ta.animate.bind(ta));
    
    // bindを使わずに無名関数で定義する方法
    // btn.addEventListener('click', function() {
    //     ta.animate();
    // });
});


class TextAnimation {
    constructor(el) {
        this.el = document.querySelector(el);
        this.chars = this.el.innerHTML.trim().split("");
        this.el.innerHTML = this._splitText();
    }
    _splitText() {
        return this.chars.reduce((acc, curr) => {
            curr = curr.replace(/\s+/, ' ');
            return `${acc}<span class="char">${curr}</span>`;
        }, "");
    }
    animate() {
        this.el.classList.toggle('inview');
    }
}

【js】DOMContentLoadedとload

JavascriptのDOMContentLoadedとloadについてまとめています。

サマリ

• DOMContentLoadedはhtmlをブラウザが解釈してDOMツリーを作成し終わったタイミングで発火する
• loadは画像や動画など全てのコンテンツをダウンロードし終わった後に発火する
• DOMContentLoadedはdocument、windowに登録できるがloadはwindowのみ登録可能
• 画像のダウンロードなど待つ必要がない場合はDOMContentLoadedで定義するとユーザーを待たせることがない
• DOMが生成される前にイベントを発火するとエラーになるのでDOMContentLoaded、loadを用いて制御するのが一般的

document.addEventListener("DOMContentLoaded", function () {
    const h1 = document.querySelector('h1');
    h1.style.color = 'red';
});

window.addEventListener("load", function () {
    const h1 = document.querySelector('h1');
    h1.style.color = 'red';
});