kobitoDevelopment

const hoge = document.querySelector(".hoge");
hoge.addEventListener("click", function () {
  setTimeout(function () {
    console.log("3回目", flag);
  }, 1);

  /*  マイクロタスクを記述 開始 
      タスクが実行され、次のタスクに映る前に実行される
      setTimeoutより先に実行される
  */

kobitoDevelopment

const hoge = document.querySelector(".hoge");
const fuga = document.querySelector(".fuga");
hoge.addEventListener("click", function () {
  fuga.classList.add("is-show");
});

kobitoDevelopment

.hoge{
speak: none; // 読み上げスキップを指定可能(aria-hidden:trueと同意、擬似要素に使用)
}

kobitoDevelopment

<div class="container">
  <div class="circle"></div>
  <p>
    テキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込みテキストを円状に回り込み
  </p>
</div>
<div class="container">
  <div class="triangle"></div>
  <p>
    テキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストをpolygon状に回り込みテキストを

kobitoDevelopment

function startFadeSlide(target) {
  const targetSlider = document.querySelector(target);
  //スライダーの初期配置を設定
  window.addEventListener("load", function () {
    const slideIndicator = targetSlider.querySelector(".slideshow-indicator");
    let indicatorHtml = "";
    let slideEach = targetSlider.querySelectorAll(".slide");
    slideEach.forEach(function (elem, index) {
      indicatorHtml += "<a href='#'>" + (index + 1) + "</a>";
    });

kobitoDevelopment

<div class="bg-blend">
  <a href="#">クリック可能</a>
</div>

kobitoDevelopment

window.addEventListener("load", init);

function init() {
  /* レンダラーを設定 */
  const renderer = new THREE.WebGLRenderer({
    // レンダリング(描画)対象の要素を格納
    canvas: document.querySelector("#myCanvas"),
    alpha: true, // canvasの背景を透明にする(デフォルトは#000)
  });

kobitoDevelopment

const counterTrigger = document.querySelectorAll(".counter-trigger");
const counterSlots = document.querySelectorAll(".counter-slot");
const counterSlotsLength = counterSlots.length;
// translateYに算出する数値を宣言
let translateAmount;

counterTrigger.forEach(function (elem, index) {
  elem.addEventListener("click", function () {
    // data属性に設定されたゴールの数値を取得
    const targetNum = elem.dataset.target;

kobitoDevelopment

window.addEventListener("load", function () {
  const movie = document.querySelector(".js-movie");
  const movieWrap = document.querySelector(".video-wrap");
  const loading = document.querySelector(".loading");
  // 再生時間を初期値に戻すか判定するフラグ
  let endflag = true;
  // 自動再生されている動画を再生する(スクロールで動画がカクつかないようキャッシュさせる)
  movie.play();
  // 最後まで再生したら自動再生されている動画を停止 + スクロール演出実施
  movie.addEventListener("ended", function () {

kobitoDevelopment

// アニメーション管理用変数
let animationFlag;
function tick() {
  // アニメーション内容を記述
  console.log("animation");
  animationFlag = requestAnimationFrame(tick); // コールバック内にrequestAnimationFrameを格納することでループさせる
}

// アニメーション実行
tick();