kobitoDevelopment

<!-- 左から右へ -->
<div class="flowslider flowslider--1">
  <ul class="flowslider__list flowslider__list--left">
    <li class="flowslider__item"><img class="flowslider__image" src="" alt="img1"></li>
    <li class="flowslider__item"><img class="flowslider__image" src="" alt="img2"></li>
    <li class="flowslider__item"><img class="flowslider__image" src="" alt="img3"></li>
    <li class="flowslider__item"><img class="flowslider__image" src="" alt="img4"></li>
    <li class="flowslider__item"><img class="flowslider__image" src="" alt="img5"></li>
    <li class="flowslider__item"><img class="flowslider__image" src="" alt="img6"></li>
  </ul>

kobitoDevelopment

<div class="container">
  <div class="hoge box"></div>
  <div class="fuga box"></div>
  <div class="piyo box"></div>
</div>

kobitoDevelopment

const deviceWidth = window.innerWidth;
const circleWrap = document.querySelector(".circle-wrap");
const circleItem = document.querySelectorAll(".circle-item");
const circleItemLength = circleItem.length;
const deg = 360.0 / circleItemLength;
const red = (deg * Math.PI) / 180.0;
let xArray = [];
let maxDiameter;
const buttonPrev = document.querySelector(".prev");
const buttonNext = document.querySelector(".next");

kobitoDevelopment

let deviceWidth = window.innerWidth; // 画面幅を取得
const switchBox = document.querySelector(".switch-box"); // 個々の要素をwrapしている要素
const switchBlock = document.querySelectorAll(".block"); // 個々の要素
const switchBlockLength = switchBlock.length; // 個々の要素の合計数
let switchBlockWidth; // 列数によって可変させる個々の要素にwidthを格納するため一旦宣言
let switchBlockHeight; // 列数によって可変させる個々の要素にheightを格納するため一旦宣言
const switchButton = document.querySelectorAll(".switch-button"); // 列数を変更するトリガーとなるボタン群
let setSwitchBoxHeight; // 個々の要素をwrapしている要素に指定するheight幅を算出して格納するため一旦宣言
let columnNum; // 列数を変更するトリガーとなるボタンに設定されているdata属性の数値(文字列)を取得
const heightRatio = 1; // 個々の要素の縦横比の縦の部分を横の何倍にするか指定

kobitoDevelopment

//指定エリアでマウスポインタを変更する関数 target:表示エリア, pointer:表示させたいポインタ
const changeCursor = (target, pointer) => {
  // ポインターを持たないデバイスではアニメーションを実行しない
  if (!window.matchMedia("(pointer: fine)").matches) {
    return;
  }

  // 自作ポインターを表示させる対象が存在しない場合はアニメーションを実行しない
  const pointerArea = document.querySelector(target);
  if (pointerArea.length === 0) {

kobitoDevelopment

// タイムラインを作成
const tl = gsap.timeline({ repeat: -1 }); // 繰り返し回数を設定 -1で無限
// タイムラインにアニメーション内容を追加
tl.add(gsap.to(".remap", 2.0, { x: 800, rotate: 360 }));
// タイムラインの0.25秒の地点まで到達したら
tl.call(
  function () {
    // .timeScale()でアニメーション速度を、本来のスピードを1として乗算指定可能
    tl.timeScale(0.1);
  },

kobitoDevelopment

const hoge = document.querySelector(".hoge");
const fuga = document.querySelector(".fuga");
const observer = new MutationObserver(function () {
  /* DOMツリーへ変化が加えられた際の処理 */
  hoge.innerHTML = "fugaが変わった時、hogeも変わる";
});

/* 監視時のオプション */
const config = {
  attributes: true, // 属性の変更を監視

kobitoDevelopment

(function () {
  const setSize = 360; //　希望のviewport下限を設定
  const viewport = document.querySelector("meta[name='viewport']");
  function adjustViewport() {
    /*
    三項演算子(条件演算子)
    condition ? exprIfTrue(trueに変換できる値) : exprIfFalse(falseに変換できる値)
    */
    const value = window.outerWidth > setSize ? "width=device-width,initial-scale=1" : "width=" + setSize;
    if (viewport.getAttribute("content") !== value) {

kobitoDevelopment

<div class="hoge"></div>

kobitoDevelopment

const hoge = document.querySelector(".hoge");
const start = document.querySelector(".start");
const pause = document.querySelector(".pause");
const cancel = document.querySelector(".cancel");
const reverse = document.querySelector(".reverse");
const skip = document.querySelector(".skip");
const end = document.querySelector(".end");
const finish = document.querySelector(".finish");

/* アニメーションを設定 開始*/