Open7

Web制作Tips(JS)

Ko.YelieKo.Yelie

gsapは、1つの要素で複数のtransform処理を同時にやろうとするとバグが起きやすい。すでにCSSでtranslateしてる要素をgsapでscaleで拡大させたりrotateで回転させたりとかする場合。
gsapはすでにあるtransformもちゃんと考慮して良い感じに計算はしてくれるが、たまに元のtranslateの取得がうまくいかずにバグが起きたりする。
そういうときは、タグを増やしてtranslateさせる要素とscaleさせる要素を分けるようにしたり、translate使わずに別のプロパティで代替したほうが無難。

Ko.YelieKo.Yelie

Alpine.js
属性を書くだけでVueみたいな実装ができる。
WPテンプレートに組み込むときもそのままでよいのがメリット。

Ko.YelieKo.Yelie

https://github.com/CodeByZach/pace/
PACEのバージョンが最近上がったっぽい。
Pace.on('progress', (progress) => {}) でパーセンテージの数値をJSで取得できるようになっている。(ドキュメントには書いてないけど。ソースコード見たらあった)

Ko.YelieKo.Yelie

画像読み込み完了したかどうかの検知は以下のとおりだが、

const img = document.querySelector('img');
img.addEventListener('load', () => {
  // 読み込み完了後の処理
});

すでに読み込み完了しているimgタグで検知する場合は complete プロパティで取得できる。
両方のパターンをカバーするには以下のとおり。

function onLoad() {
  // 読み込み完了後の処理
}
const img = document.querySelector('img');
if (img.complete) {
  onLoad();
} else {
  img.addEventListener('load', onLoad);
}
Ko.YelieKo.Yelie

videoタグも同様。 video.HAVE_FUTURE_DATA === 3

function onLoad() {
  // 読み込み完了後の処理
}
const video = document.querySelector('video');
if (video.readyState >= video.HAVE_FUTURE_DATA) {
  onLoad();
} else {
  video.addEventListener('canplay', onLoad);
}