kobitoDevelopment

const showToggle = document.querySelector(".js-toggleContent"); // 表示を切り替えるコンテンツ
const targetStart = document.querySelector(".js-showTrigger"); // ここを通り過ぎたら表示
const targetEnd = document.querySelector(".js-hiddenTrigger"); // ここを通り過ぎたら非表示
addEventListener(
  "scroll",
  function () {
    let rectStart = targetStart.getBoundingClientRect();
    let rectEnd = targetEnd.getBoundingClientRect();
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    let targetStartTop = rectStart.top + scrollTop;

kobitoDevelopment

const images = document.querySelectorAll("img"); // ページ内の画像を全て取得
const loadingArea = document.querySelector(".js-loading"); // ローディング画面全体
const percentNumber = document.querySelector(".js-loadingPercentNumber"); // loadingと連動するパーセント部分
const loadingGauge = document.querySelector(".js-loadingMeter"); // loadingと連動するメーター部分
let imgCounting = 0;
let baseCounting = 0;
const gaugeWidth = 100; // ゲージの全体幅
let current;

// 画像の読み込み

kobitoDevelopment

function handleKeyDown(event) {
  // 押されたキーの種類を判別 (https://www.w3.org/TR/uievents-code/#keyboard-key-codes)
  if (event.code === "Enter") {
    // フォーカスされている要素をクリックしたことにするサンプル
    document.activeElement.click();
  }
}

addEventListener("keydown", handleKeyDown);

kobitoDevelopment

<a href="" class="text">テキストのみ色変更</a>

kobitoDevelopment

//要素数が変わっても一定の速度を保つ等速スクロールスライダー（ドラッグ、スワイプ動作対応）
const scrollSlider = document.querySelectorAll(".js-scroll-slider");
if (scrollSlider.length > 0) {
  scrollSlider.forEach(function (slider, index) {
    //スクロールスピード設定
    const speed = slider.dataset.autoSpeedRatio ? Number(slider.dataset.autoSpeedRatio) : 0.5;

    //observer監視用 親要素生成
    const sliderWrap = document.querySelector(".js-scroll-slider-wrap");

kobitoDevelopment

const hoge = document.querySelector(".hoge");
const hogeStyles = getComputedStyle(hoge);
let matrix = new DOMMatrix(hogeStyles.transform);
console.log("X", matrix.m41, "Y", matrix.m42, "Z", matrix.m43);
// matrixをconsoleに出力してどのkeyにどのvalueが格納されているか確認可能

kobitoDevelopment

//要素数が変わっても一定の速度を保つ等速スクロールスライダー縦（ドラッグ動作、スクロール連動対応）
const scrollSlider = document.querySelectorAll(".js-scroll-slider");
if (scrollSlider.length > 0) {
  scrollSlider.forEach(function (slider) {
    //スクロールスピード設定
    const speed = slider.dataset.autoSpeedRatio ? Number(slider.dataset.autoSpeedRatio) : 0.5;

    //スライド要素を取得
    const children = slider.children;
    const childLength = children.length;

kobitoDevelopment

const parallax = document.querySelector(".js-parallax");
const parallaxEnd = document.querySelector(".js-parallaxEnd");
const parallaxEach = document.querySelectorAll(".js-parallaxEach");
const parallaxItem1 = document.querySelector(".js-parallaxItem1");
const parallaxItem2 = document.querySelector(".js-parallaxItem2");
const parallaxItem3 = document.querySelector(".js-parallaxItem3");
const item1 = document.querySelector(".js-item1");
const item2 = document.querySelector(".js-item2");
const item3 = document.querySelector(".js-item3");

kobitoDevelopment

let windowHeight = window.innerHeight;
let currentScrollPositionY;
let lastScrollPositionY;
let scrollDirectionY;

const stickHeader = document.querySelector(".sticky-header");
window.addEventListener("scroll", momentumScroll);

function momentumScroll() {
  currentScrollPositionY = window.pageYOffset || document.documentElement.scrollTop;

kobitoDevelopment

// userAgentでブラウザ情報を取得 → toLowerCase()で文字列を全て小文字に変換
const agent = window.navigator.userAgent.toLowerCase();

// 各ブラウザは、そのブラウザ名以外にも「chrome」や[safari」などの文字列を含んだブラウザ情報を返してくるため下記順番で判定する
if (agent.indexOf("edg") != -1 || agent.indexOf("edge") != -1) {
  console.log("Edge");
} else if (agent.indexOf("opr") != -1 || agent.indexOf("opera") != -1) {
  console.log("Opera");
} else if (agent.indexOf("chrome") != -1) {
  console.log("Chrome");