https://i-shift.com/wp-content/themes/OriginalTheme/inc/front/js/front.js

1jQuery(function ($) {
2
3  // =============================== */
4  // slider-contents
5  // =============================== */
6 $(".slider-contents").slick({
7    rtl: false,
8    autoplay: true,
9    autoplaySpeed: 2500,
10    infinite: true,
11    arrows: true,
12    dots: false,
13    swipe: true,
14    centerMode: true,
15    slidesToShow: 3,      // PC
16    centerPadding: "0%",
17    responsive: [
18      {
19        breakpoint: 768,  // 〜767：SP
20        settings: { slidesToShow: 1 }
21      },
22      {
23        breakpoint: 1024, // 〜1023：iPad/タブ
24        settings: { slidesToShow: 2}
25      }
26    ]
27  });
28    
29  // =============================== */
30  // slider-media
31  // =============================== */
32 $(".slider-media").slick({
33    rtl: false,
34    autoplay: true,
35    autoplaySpeed: 2500,
36    infinite: true,
37    arrows: true,
38    dots: false,
39    swipe: true,
40    centerMode: false,
41    slidesToShow: 4,      // PC
42    centerPadding: "0%",
43    responsive: [
44      {
45        breakpoint: 768,  // 〜767：SP
46        settings: { slidesToShow: 1 }
47      },
48      {
49        breakpoint: 1024, // 〜1023：iPad/タブ
50        settings: { slidesToShow: 2}
51      }
52    ]
53  });
54
55  // =============================== */
56  // slider-voice
57  // =============================== */
58  $(".slider-voice").slick({
59    rtl: false,
60    autoplay: true,
61    autoplaySpeed: 2500,
62    infinite: true,
63    arrows: true,
64    dots: true,
65    swipe: true,
66    centerMode: true,
67    slidesToShow: 3,
68    centerPadding: "0%",
69    responsive: [
70      {
71        breakpoint: 768,  // 〜767：SP
72        settings: { slidesToShow: 1 }
73      },
74      {
75        breakpoint: 1025, // 〜1023：iPad/タブ
76        settings: { slidesToShow: 1}
77      }
78    ]
79  });
80
81  // =============================== */
82  // tab switch 
83  // =============================== */
84  $('.tab-swich li').on('click', function () {
85    $('.tab-swich li, .panel').removeClass('active');
86    $(this).addClass('active');
87    var index = $('.tab-swich li').index(this);
88    $('.panel').eq(index).addClass('active');
89  });
90
91});
92// =============================== */
93// type
94// =============================== */
95jQuery(function ($) {
96
97  const $targets = $('.js-type-common');
98  if (!$targets.length) return;
99
100  const ensureBox = ($el) => {
101    if ($el.text().length) return;
102    $el.text('\u200B'); // 0幅スペースで高さ0を回避（開始時に必ず消える）
103  };
104
105  const startTyping = ($el) => {
106    const text = $el.data('text') || '';
107    const speed = Number($el.data('speed')) || 40;
108    const useCaret = $el.is('[data-caret]');
109
110    $el.removeClass('is-typing is-typingEND').text('');
111    if (useCaret) $el.addClass('is-caret');
112
113    $el.addClass('is-typing');
114
115    let i = 0;
116    const tick = () => {
117      $el.text(text.slice(0, i));
118      i++;
119
120      if (i <= text.length) {
121        setTimeout(tick, speed);
122        return;
123      }
124
125      $el.removeClass('is-typing').addClass('is-typingEND');
126    };
127
128    tick();
129  };
130
131  const viewEls = [];
132  $targets.each(function () {
133    const $el = $(this);
134    const start = $el.data('start') || 'load';
135    if (start === 'view') {
136      ensureBox($el);
137      viewEls.push(this);
138    } else {
139      startTyping($el);
140    }
141  });
142
143  if (!viewEls.length) return;
144
145  const pending = new Set();
146  let ticking = false;
147
148  const inViewport = (rect, vh) => rect.bottom >= 0 && rect.top < vh;
149
150  const checkPending = () => {
151    ticking = false;
152    if (!pending.size) return;
153
154    const vh = window.innerHeight || document.documentElement.clientHeight;
155    const done = [];
156
157    pending.forEach(el => {
158      const rect = el.getBoundingClientRect();
159      if (!inViewport(rect, vh)) return;
160
161      const $el = $(el);
162      const offset = Number($el.data('offset'));
163      if (!Number.isFinite(offset)) {
164        done.push(el);
165        startTyping($el);
166        observer.unobserve(el);
167        return;
168      }
169
170      const triggerY = vh * offset;
171      if (rect.top <= triggerY) {
172        done.push(el);
173        startTyping($el);
174        observer.unobserve(el);
175      }
176    });
177
178    done.forEach(el => pending.delete(el));
179  };
180
181  const requestCheck = () => {
182    if (ticking) return;
183    ticking = true;
184    requestAnimationFrame(checkPending);
185  };
186
187  window.addEventListener('scroll', requestCheck, { passive: true });
188  window.addEventListener('resize', requestCheck);
189
190  const observer = new IntersectionObserver((entries) => {

191    entries.forEach(entry => {
192      const el = entry.target;
193
194      if (!entry.isIntersecting) {
195        pending.delete(el);
196        return;
197      }
198
199      const $el = $(el);
200      const offsetRaw = $el.data('offset');
201
202      if (offsetRaw === undefined || offsetRaw === '' || offsetRaw === null) {
203        observer.unobserve(el);
204        startTyping($el);
205        return;
206      }
207
208      pending.add(el);
209      requestCheck();
210    });
211  }, {
212    threshold: 0
213  });
214
215  viewEls.forEach(el => observer.observe(el));
216
217  // 初期表示時にObserverが反応しないケースの保険
218  viewEls.forEach(el => {
219    const $el = $(el);
220    const offsetRaw = $el.data('offset');
221    if (offsetRaw !== undefined && offsetRaw !== '' && offsetRaw !== null) {
222      pending.add(el);
223    } else {
224      const rect = el.getBoundingClientRect();
225      const vh = window.innerHeight || document.documentElement.clientHeight;
226      if (inViewport(rect, vh)) startTyping($el);
227    }
228  });
229  requestCheck();
230
231});