3月5日〜3月10日の学習内容

Intersection Observer

特定の要素が指定領域内に入ったかどうかを検知するIntersection Observer。何をやったか、記録を残すのが難しい…。

監視対象 → 表題（js-section-title )
表題部分がテキストエリアへ遷移する瞬間にheaderが上から下へスライドして出現するアニメーション。テキストエリアから表題部分へ遷移する際は下から上へスライドしてheaderが非表示となる。

交差判定のオプションは

【js】

const options = {
        root: document.querySelector("#observerArea"),
        rootMargin: "0px",
        threshold: 0,
};

表題エリアが交差部分に入ってきたらオープン用のアニメーションを実行。headerにクラスを加えてheaderを固定する感じ。この固定がポイントだった。

【css】

.c-header-head.is-active {
    position: fixed;
    top: -60px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
}

topを-60pxに固定することでheaderを隠す。アニメーションの際、閉じる時はtransform: “translateY(0)”とすることでheaderを隠し、開く時はtransform: “translateY(60px)”としてheaderをスライド表示させる。

is-activeクラスを付与したり、外したりすることでheaderをテキストコンテンツに固定したり外したりする。

WordPressへ

JavaScriptの学習は一旦終了。いよいよWordPressへ。使うテキストは

WordPress 仕事の現場でサッと使える! デザイン教科書

ローカル環境を構築するのはこちらを参考にしました。