【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'; });