https://www.esakihome.co.jp/assets_new/js/home.js?20250122

1// ヘッダー
2$(window).scroll(function () {
3  let $mv = $("#mv");
4
5  // #mv が存在しない場合は処理をスキップ
6  if ($mv.length === 0) {
7    // areaBottom = $(window).height();
8    return;
9  }
10
11  // #mv が存在する場合のみ処理を実行
12  let scrollTop = $(window).scrollTop();
13  let areaTop = $mv.offset().top;
14  let areaBottom = areaTop + $mv.innerHeight();
15
16  if ($(window).width() > 959) {
17    if (scrollTop === 0) {
18      // ページの一番上にスクロールされた場合
19      $("#header").removeClass("all_display");
20      // $("#header .item01, #header .item02, #header .item03").addClass("hide");
21    } else if (scrollTop > areaTop && scrollTop < areaBottom) {
22      // 領域内にスクロールされた場合
23      $("#header").removeClass("all_display");
24      // $("#header .item01, #header .item02, #header .item03").addClass("hide");
25    } else {
26      // それ以外の場合
27      $("#header").addClass("all_display");
28      // $("#header .item01, #header .item02, #header .item03").removeClass("hide");
29    }
30  }
31});
32
33// フェードイン
34$(window).on("scroll", function () {
35  $(".fadein").each(function () {
36    var pos = $(this).offset().top;
37    var scroll = $(window).scrollTop();
38    var windowHeight = $(window).height();
39    if (
40      scroll > pos - windowHeight + 100 &&
41      $(this).css("display") !== "none" &&
42      $(this)
43        .parents()
44        .filter(function () {
45          return $(this).css("display") === "none";
46        }).length === 0 &&
47      !$(this).hasClass("animation")
48    ) {
49      $(this).addClass("animation");
50    }
51  });
52});
53
54const mvSwiper = new Swiper(".mv_swiper", {
55  loop: true,
56  effect: "fade",
57  speed: 1000,
58  preventInteractionOnTransition: true,
59  autoplay: {
60    delay: 3000,
61    disableOnInteraction: false,
62  },
63});
64
65const bnrSwiper = new Swiper(".bnr_swiper", {
66  loop: true,
67  spaceBetween: 10,
68  centeredSlides: true,
69  slidesPerView: 1.2,
70  autoplay: {
71    delay: 3000,
72  },
73  breakpoints: {
74    959: { spaceBetween: 20, slidesPerView: 4 },
75  },
76  navigation: {
77    nextEl: ".swiper-button-next", // 次へボタン
78    prevEl: ".swiper-button-prev", // 前へボタン
79  },
80});
81
82const pickSwiper = new Swiper(".pickup_swiper", {
83  loop: true,
84  slidesPerView: 1.1,
85  spaceBetween: 20,
86  centeredSlides: true,
87  navigation: {
88    nextEl: ".pickup_next",
89    prevEl: ".pickup_prev",
90  },
91
92  breakpoints: {
93    959: { slidesPerView: 3.2, centeredSlides: false },
94  },
95});
96
97const houseSwiper = new Swiper(".house_swiper", {
98  speed: 13000,
99  loop: true,
100  slidesPerView: 2,
101  centeredSlides: true,
102  preventInteractionOnTransition: true,
103  spaceBetween: 10,
104  autoplay: {
105    delay: 0,
106  },
107  breakpoints: {
108    959: { slidesPerView: 3, spaceBetween: 35 },
109  },
110});
111houseSwiper.autoplay.stop();
112if ($(".house_swiper").length > 0) {
113  $(window).on("scroll", function () {
114    let position = $(".house_swiper").offset().top - $(window).innerHeight() + 100,
115      scrollTop = $(window).scrollTop();
116    if (scrollTop > position) {
117      houseSwiper.autoplay.start();
118    }
119  });
120}
121
122const workSwiper = new Swiper(".work_swiper", {
123  loop: true,
124  slidesPerView: 1,
125  navigation: {
126    nextEl: ".work_next",
127    prevEl: ".work_prev",
128  },
129  pagination: {
130    el: ".swiper-pagination",
131    type: "fraction",
132    formatFractionCurrent: function (number) {
133      return "0" + number;
134    },
135    renderFraction: function (currentClass, totalClass) {
136      return (
137        '<span class="frac_label">CASE</span><span class="frac_separate"></span><span class="' +
138        currentClass +
139        '">'
140      );
141    },
142  },
143  on: {
144    slideChange: function () {
145      const currentSlideIndex = this.realIndex;
146      const textElement = $("#works .info_txt");
147      const texts = [
148        "準平屋の住まい。<br>中庭を介して家族がくつろげる家",
149        "広々としたテラスと<br>ルーフバルコニーのある家",
150        "準平屋の住まい。<br>1階で生活動線が完結する家",
151        "～アーバンスタイル～<br>ラグジュアリーな間接照明のリビング",
152        "統一感のあるおしゃれな外構。<br>インナーテラスのある家",
153      ];
154
155      textElement.html(texts[currentSlideIndex]);
156    },
157  },
158});
159
160const voiceSwiper = new Swiper(".voice_swiper", {
161  loop: true,
162  slidesPerView: 1,
163  centeredSlides: true,
164  navigation: {
165    nextEl: ".voice_next",
166    prevEl: ".voice_prev",
167  },
168  breakpoints: {
169    959: { slidesPerView: 2.8, spaceBetween: 40 },
170  },
171});
172
173const sliderSelectors = {
174  comfortable: {

175    container: "#js-slider_comfortable",
176    nextButton: ".house-style .slider_comfortable .item-slider_next",
177    prevButton: ".house-style .slider_comfortable .item-slider_prev",
178  },
179  specification: {
180    container: "#js-slider_specification",
181    nextButton: ".house-style .slider_specification .item-slider_next",
182    prevButton: ".house-style .slider_specification .item-slider_prev",
183  },
184};
185Object.values(sliderSelectors).forEach(({ container, nextButton, prevButton }) => {
186  new Swiper(container, {
187    loop: true,
188    slidesPerView: 1,
189    centeredSlides: true,
190    navigation: {
191      nextEl: nextButton,
192      prevEl: prevButton,
193    },
194  });
195});
196
197// ボタンアニメーション
198const btnSettings = {
199  interview: {
200    btnId: "#js-interview_more",
201    btnClass: ".interview-button",
202    itemClass: ".interview-item",
203    spSlideNum: 1,
204    pcSlideNum: 1,
205    displayItem: 4,
206    displayType: "grid",
207  },
208  survey: {
209    btnId: "#js-survey_more",
210    btnClass: ".survey-button",
211    itemClass: ".survey-item",
212    spSlideNum: 1,
213    pcSlideNum: 2,
214    displayItem: 7,
215    displayType: "block",
216  },
217};
218$(function () {
219  $.each(btnSettings, function (key, setting) {
220    $(setting.btnId).click(function () {
221      // $(setting.btnClass).fadeOut(300);
222      $(setting.btnClass).toggleClass("js-open");
223
224      const hiddenItems = $(setting.itemClass).filter(function () {
225        return $(this).css("display") === "none";
226      });
227      const slideNum = $(window).width() < 969 ? setting.spSlideNum : setting.pcSlideNum;
228
229      if (hiddenItems.length > 0) {
230        $(window).width() < 969
231          ? hiddenItems.css("display", "block")
232          : hiddenItems.css("display", setting.displayType);
233        setTimeout(() => {
234          hiddenItems.slice(0, slideNum).addClass("animation");
235        }, 300);
236      } else {
237        $(setting.itemClass)
238          .filter(`:nth-child(n + ${setting.displayItem})`)
239          .css("display", "none");
240      }
241    });
242  });
243});
244
245// houseページタブメニュー
246$(function () {
247  const tabSets = {
248    houseStyle: {
249      tabButton: ".house-style .tab-button",
250      styleItem: ".house-style .style-item",
251    },
252    housePlan: {
253      tabButton: ".house-style .application-tab",
254      styleItem: ".house-style .application-content_item",
255    },
256  };
257  $.each(tabSets, function (tabSetName, tabClassNames) {
258    $(tabClassNames.tabButton).click(function () {
259      const index = $(this).index();
260      $(tabClassNames.styleItem).eq(index).addClass("active").siblings().removeClass("active");
261      $(tabClassNames.tabButton).removeClass("active");
262      $(this).addClass("active");
263      if (tabSetName === "houseStyle") {
264        $(".house-panel .panel-item").removeClass("active");
265        $(".house-panel .panel-item")
266          .not(":eq(" + index + ")")
267          .addClass("active");
268        history.replaceState(null, null, `#house-style_${index + 1}`);
269        $("html, body").animate(
270          {
271            scrollTop: $(".house-style").offset().top - 50,
272          },
273          500,
274        );
275      } else {
276        $("html, body").animate(
277          {
278            scrollTop: $(".application-list_wrapper").offset().top - 50,
279          },
280          500,
281        );
282      }
283    });
284  });
285});
286
287// houseパネルメニュー
288$(function () {
289  $(".house-panel .panel-item > a").click(function (e) {
290    e.preventDefault();
291    const index = $(this).parent().index();
292    const target = $(".house-style .tab-button").eq(index);
293    const newUrlHash = `#house-style_${index + 1}`;
294
295    $(this).parent().removeClass("active").siblings().addClass("active");
296    $(".house-style .tab-button").removeClass("active");
297    target.addClass("active");
298    $(".house-style .style-item").removeClass("active").eq(index).addClass("active");
299
300    history.pushState(null, null, newUrlHash);
301
302    setTimeout(() => {
303      $("html, body").animate(
304        {
305          scrollTop: target.offset().top,
306        },
307        500,
308      );
309    }, 300);
310  });
311});
312
313// アンカーリンク（遷移挙動）
314$(function () {
315  const anchorLinks = document.querySelectorAll('a[href^="#house-style_"]');
316  anchorLinks.forEach((anchorLink) => {
317    anchorLink.addEventListener("click", function (e) {
318      e.preventDefault();
319
320      setTimeout(() => {
321        const houseStyleTop = document.querySelector(".style-tab").getBoundingClientRect().top;
322
323        window.scrollTo({
324          top: houseStyleTop + 500,
325          behavior: "smooth",
326        });
327      }, 1000);
328    });

329  });
330});
331
332// アンカーリンク（URL調整）
333$(function () {
334  const urlHash = location.hash;
335  if (urlHash) {
336    const targetId = urlHash.replace("#house-style_", "");
337    const targetButton = document.querySelector(`.tab-button[id='#house-style_${targetId}']`);
338    const targetList = document.querySelector(`.style-item_${targetId.slice(-1)}`);
339
340    if (targetButton && targetList) {
341      $(".house-style .tab-button").removeClass("active");
342      targetButton.classList.add("active");
343      $(".house-style .style-item").removeClass("active");
344      targetList.classList.add("active");
345
346      $(".house-panel .panel-item").addClass("active");
347      $(`.house-panel .panel-item:nth-child(${targetId})`).removeClass("active");
348    }
349  }
350});
351
352// 家づくり動画スワイパー
353$(document).ready(function () {
354  const breakPoint = 959;
355  let swiper;
356  let swiperBool;
357
358  const movieSwiper = () => {
359    swiper = new Swiper(".movie-swiper", {
360      loop: true,
361      slidesPerView: 1,
362      centeredSlides: true,
363      navigation: {
364        nextEl: ".movie-next",
365        prevEl: ".movie-prev",
366      },
367    });
368  };
369
370  const destroySwiper = () => {
371    if (swiper) {
372      swiper.destroy(false, true);
373      swiper = null;
374    }
375  };
376
377  if ($(window).width() > breakPoint) {
378    swiperBool = false;
379  } else {
380    movieSwiper();
381    swiperBool = true;
382  }
383
384  $(window).on("resize", function () {
385    if ($(window).width() > breakPoint && swiperBool) {
386      destroySwiper();
387      swiperBool = false;
388    } else if ($(window).width() <= breakPoint && !swiperBool) {
389      movieSwiper();
390      swiperBool = true;
391    }
392  });
393});
394
395// #movie アンカーリンク補正
396$(window).on("load", function () {
397  if (location.hash === "#movie") {
398    setTimeout(function () {
399      var target = document.getElementById("movie");
400      if (target) {
401        var headerHeight = 70;
402        var top = $(target).offset().top - headerHeight;
403        window.scrollTo({ top: top, behavior: "smooth" });
404      }
405    }, 300);
406  }
407});