https://anwjapan.com/wp-content/themes/anwjapan/js/custom.js?ver=1766373904

1// custom.js
2document.addEventListener('DOMContentLoaded', () => {
3  if (typeof window.Swiper === 'undefined') return;
4
5  // BRAND用
6  document.querySelectorAll('.brand-swiper').forEach((container) => {
7    new Swiper(container, {
8      loop: true,
9      autoplay: { delay: 3000, disableOnInteraction: false },
10      slidesPerView: 'auto',
11      centeredSlides: true, 
12      breakpoints: {
13        0:  { spaceBetween: window.innerWidth * (29 / 750) },
14        751: {spaceBetween: window.innerWidth * (29 / 1440)},
15        1000:  { spaceBetween: 29 }
16      },
17      navigation: {
18        // ← 正しく「next は next」「prev は prev」をコンテナ内から拾う
19        nextEl: container.querySelector('.brand-swiper-button-next'),
20        prevEl: container.querySelector('.brand-swiper-button-prev'),
21      },
22    });
23  });
24// 1ブロックだけの例（複数あるなら querySelectorAll でループして同様に）
25
26
27function getSpaceBetween() {
28  const w = window.innerWidth;
29
30  if (w <= 750) {
31    // SP：750px デザインで14pxに合わせる
32    return w * (14 / 750);
33  } else if (w < 1000) {
34    // 751〜999px：1440pxで64pxの比率で縮める
35    return w * (64 / 1440);
36  } else {
37    // 1000px以上：常に64px固定
38    return 64;
39  }
40}
41const container  = document.querySelector('.service-swiper');
42// const dots       = document.querySelectorAll('.service-swiper-pagination .dot');
43
44// const BASE = 300;     // 1カードの幅(px)
45// const PEEK = 210;     // 見切らせたい幅(px)
46// const SPV  = 2 + PEEK / BASE; // 2.7
47
48const swiper = new Swiper(container, {
49  loop: true,                           // 無限
50  slidesPerGroup: 1,                    // 1枚ずつ進む
51  autoplay: { delay: 3000, disableOnInteraction: false },
52  // ここはお好みの表示設定でOK（例）
53  // spaceBetween: window.innerWidth * (64 / 1440),
54  // spaceBetween: 64,
55  slidesPerView: "auto",
56  // ★ pagination 追加
57  pagination: {
58    el: ".service-swiper-pagination",
59    clickable: true,
60  },
61  // ★ 最初の spaceBetween を関数でセット
62  spaceBetween: getSpaceBetween(),
63  breakpoints: {
64    0:  { spaceBetween: window.innerWidth * (14 / 750) },
65    751:  { spaceBetween: window.innerWidth * (64 / 1440) },
66    1000:  { spaceBetween: 64 },
67    // 840:  { slidesPerView: 2.4, spaceBetween: 37.3 },
68    // 940:  { slidesPerView: 2.457, spaceBetween: 41.8 },
69    // 1040: { slidesPerView: 2.5, spaceBetween: 46.2 },
70    // 1140: { slidesPerView: 2.55, spaceBetween: 50.7 },
71    // 1240: { slidesPerView: 2.6, spaceBetween: 55.1 },
72    // 1340: { slidesPerView: 2.65, spaceBetween: 59.6 },
73    // 1440: { slidesPerView: 2.7, spaceBetween: 64 },
74  }
75});
76
77window.addEventListener('resize', () => {
78  swiper.params.spaceBetween = getSpaceBetween();
79  swiper.update();
80});
81
82// クリックしても何もしない（完全に表示用のドットに）
83// dots.forEach((d) => {
84//   d.addEventListener('click', (e) => {
85//     e.preventDefault();
86//     e.stopPropagation();
87//     d.blur();
88//   });
89// });
90

91// 左端の“論理スライド”が A/B/C のどれかでドットを更新
92// DOMが A B C A B C の順である前提。realIndex は 0..5 を返すので %3 で 0..2 に正規化。
93// function updateDots() {
94//   const logical = swiper.realIndex % 3; // 0=A(service.jpg), 1=B(service1.jpg), 2=C(service2.jpg)
95//   dots.forEach((b, i) => b.classList.toggle('is-active', i === logical));
96// }
97
98// swiper.on('slideChange', updateDots);
99// swiper.on('resize', updateDots);
100// updateDots(); // 初期反映
101
102});
103
104document.addEventListener("DOMContentLoaded", () => {
105  const section = document.querySelector(".pickup-message");
106  if (!section) return;
107
108  const getActiveBg = () => {
109    const imgs = section.querySelectorAll(".bg-img");
110    return Array.from(imgs).find((el) => getComputedStyle(el).display !== "none");
111  };
112
113  let ticking = false;
114
115  const update = () => {
116    ticking = false;
117
118    const bg = getActiveBg();
119    if (!bg) return;
120
121    const rect = section.getBoundingClientRect();
122    const vh = window.innerHeight;
123
124    if (rect.bottom <= 0 || rect.top >= vh) return;
125
126    const progress = (vh - rect.top) / (vh + rect.height);
127    const p = Math.max(0, Math.min(1, progress));
128
129    const start = 0.3; // ★ 20%入ったら開始
130    if (p < start) {
131      bg.style.transform = `translate3d(0, 0px, 0)`;
132      return;
133    }
134
135    const pp = (p - start) / (1 - start);
136
137    const amplitude = 200;
138
139    const bgMove = pp * amplitude; // 下に動く（上に動かすなら -pp）
140    bg.style.transform = `translate3d(0, ${bgMove}px, 0)`;
141  };
142
143  const onScroll = () => {
144    if (ticking) return;
145    ticking = true;
146    requestAnimationFrame(update);
147  };
148
149  window.addEventListener("scroll", onScroll, { passive: true });
150  window.addEventListener("resize", () => { ticking = false; update(); });
151
152  const bg = getActiveBg();
153  if (bg) bg.style.transform = `translate3d(0, 0px, 0)`;
154
155  update();
156});
157
158
159
160
161
162
163// $(function () {
164//   const $items = $('.parallax-item-pc');  
165//   $items.css('will-change', 'transform');  
166
167//   let lastY = 0, ticking = false;
168
169//   function onScroll() {
170//     lastY = window.scrollY || window.pageYOffset;
171//     if (!ticking) {
172//       ticking = true;
173//       requestAnimationFrame(update);
174//     }
175//   }
176
177//   function update() {
178//     const t = lastY * 0.1;
179//     $items.css('transform', 'translate3d(0,' + t + 'px,0)');
180//     ticking = false;
181//   }
182
183//   window.addEventListener('scroll', onScroll, { passive: true });
184//   onScroll(); 
185// });
186
187
188// (()=> {
189//   const v = document.getElementById('mv');
190//   const m = matchMedia('(max-width:750px)');
191//   const setPoster = () => {
192//     v.poster = m.matches
193//       ? '<?php echo esc_js( get_theme_file_uri("img/main-v-sp.jpg") ); ?>'
194//       : '<?php echo esc_js( get_theme_file_uri("img/main-v-pc.jpg") ); ?>';
195//   };
196//   setPoster();
197//   m.addEventListener?.('change', setPoster);
198// })();
199
200
201
202// brand ?
203
204// function measureImg(img){
205//   let w = img.naturalWidth, h = img.naturalHeight;
206//   if (!w || !h) { // 外部SVG対策など
207//     w = parseFloat(img.getAttribute('width'))  || parseFloat(img.dataset.w) || w || 0;
208//     h = parseFloat(img.getAttribute('height')) || parseFloat(img.dataset.h) || h || 0;
209//   }
210//   if (!w && h) w = h;
211//   if (!h && w) h = w;
212//   return {w, h};
213// }
214
215
216//ページ内リンク
217$(function(){
218  // #で始まるa要素をクリックした場合に処理（"#"←ダブルクォーテンションで囲むのを忘れずに。忘れるとjQueryのバージョンによっては動かない。。）
219  $('a[href^="#"]').click(function(){
220    // 移動先を0px調整する。0を30にすると30px下にずらすことができる。
221    var adjust = 0;
222    // スクロールの速度（ミリ秒）
223    var speed = 400;
224    // アンカーの値取得 リンク先（href）を取得して、hrefという変数に代入
225    var href= $(this).attr("href");
226    // 移動先を取得 リンク先(href）のidがある要素を探して、targetに代入
227    var target = $(href == "#" || href == "" ? 'html' : href);
228    // 移動先を調整 idの要素の位置をoffset()で取得して、positionに代入
229    var position = target.offset().top + adjust;
230    // スムーススクロール linear（等速） or swing（変速）
231    $('body,html').animate({scrollTop:position}, speed, 'swing');
232    return false;

233  });
234});
235
236
237
238
239
240
241
242$(function(){
243  $('.js-accordion_title').click(function(){ 
244    const $cover = $(this).next('.brand_cover');
245
246    // 開閉
247    $cover.slideToggle();
248
249    // タイトルのopen
250    $(this).toggleClass('open');
251
252    // brand_coverの中の brand__eria に show
253    $cover.find('.brand__eria').toggleClass('show');
254  });
255});
256
257
258$(function(){
259  $('.js-accordion_title-recruit').click(function(){ 
260    const $cover = $(this).next('.recruit_cover');
261
262    // 開閉
263    $cover.slideToggle();
264
265    // タイトルのopen
266    $(this).toggleClass('open');
267
268    // brand_coverの中の brand__eria に show
269    $cover.find('.recruit__eria').toggleClass('show');
270  });
271});
272
273
274
275
276
277
278
279
280//ページ内リンク
281
282jQuery(function($){
283  const $btn = $('#js-page-top');
284
285  $(window).on('scroll', function(){
286    if($(this).scrollTop() > 300){
287      $btn.fadeIn();
288    } else {
289      $btn.fadeOut();
290    }
291  });
292
293  $btn.on('click', function(e){
294    e.preventDefault();
295    $('html, body').animate({scrollTop: 0}, 500);
296  });
297});
298
299
300
301jQuery(function ($) {
302  const $fadeTargets   = $('.js-fadein');
303  const $fadeTargets2  = $('.js-fadein2');
304  const $fadeTargets3  = $('.js-fadein3'); // 追加
305  const $scaleTargets  = $('.js-scale');
306  const $scaleTargets2 = $('.js-scale2');
307
308  function getRatios() {
309    const isSP = window.matchMedia('(max-width: 750px)').matches;
310
311    let fadeRatio   = 0.7;
312    let fade2Ratio  = 0.95;
313    let fade3Ratio  = 0.7; // ← 追加（好きに調整）
314    let scaleRatio  = 0.6;
315    let scale2Ratio = 0.8;
316
317    if (isSP) {
318      fadeRatio   = 0.9;
319      fade2Ratio  = fadeRatio;
320      fade3Ratio  = fadeRatio; // SPは同じにするなら
321      scaleRatio  = fadeRatio;
322      scale2Ratio = fadeRatio;
323    }
324
325    return { fadeRatio, fade2Ratio, fade3Ratio, scaleRatio, scale2Ratio };
326  }
327
328  function onScroll() {
329    const winH = $(window).height();
330    const scrollTop = $(window).scrollTop();
331    const { fadeRatio, fade2Ratio, fade3Ratio, scaleRatio, scale2Ratio } = getRatios();
332
333    const triggerFade   = scrollTop + winH * fadeRatio;
334    const triggerFade2  = scrollTop + winH * fade2Ratio;
335    const triggerFade3  = scrollTop + winH * fade3Ratio; // 追加
336    const triggerScale  = scrollTop + winH * scaleRatio;
337    const triggerScale2 = scrollTop + winH * scale2Ratio;
338
339    $fadeTargets.each(function () {
340      const $el = $(this);
341      if ($el.offset().top < triggerFade) $el.addClass('is-show');
342    });
343
344    $fadeTargets2.each(function () {
345      const $el = $(this);
346      if ($el.offset().top < triggerFade2) $el.addClass('is-show2');
347    });
348
349    $fadeTargets3.each(function () {
350      const $el = $(this);
351      if ($el.offset().top < triggerFade3) $el.addClass('is-show3'); // 追加
352    });
353
354    $scaleTargets.each(function () {
355      const $el = $(this);
356      if ($el.offset().top < triggerScale) $el.addClass('is-scale');
357    });
358
359    $scaleTargets2.each(function () {
360      const $el = $(this);
361      if ($el.offset().top < triggerScale2) $el.addClass('is-scale2');
362    });
363  }
364
365  $(window).on('scroll resize load', onScroll);
366  onScroll();
367});
368
369
370
371
372