https://autorace.jp/about/vi/assets/js/main.js

1// ------------------------------
2// ローディング
3// ------------------------------
4$(function () {
5  var h = $(window).height();
6  $('#loader-bg ,#loader').height(h).css('display', 'block');
7});
8
9$(function () {
10  $('#loader-bg').delay(300).fadeOut(800);
11  $('#loader').delay(600).fadeOut(300);
12  $('#container').css('display', 'block');
13  $(".logo").delay(1000).fadeIn(1000);
14  $(".scroll").delay(1000).fadeIn(600);
15});
16
17
18// ------------------------------
19// ハンバーガーメニュー（修正版）
20// ------------------------------
21$(function () {
22  const BREAKPOINT = 1100;
23
24  function isMobile() {
25    return $(window).width() <= BREAKPOINT;
26  }
27
28  function openMenu() {
29    $("#menuButton").addClass("active");
30    $("body").css("overflow", "hidden");
31
32    $("nav")
33      .show()
34      .stop(true, true)
35      .css("right", "-100%")
36      .animate({
37        right: "0"
38      }, 400);
39  }
40
41  function closeMenu() {
42    $("#menuButton, .menu__close").removeClass("active");
43
44    $("nav")
45      .stop(true, true)
46      .animate({
47        right: "-100%"
48      }, 400, function () {
49        if (isMobile()) {
50          $("nav").hide();
51        } else {
52          $("nav").removeAttr("style");
53        }
54      });
55
56    $("body").css("overflow", "visible");
57  }
58
59  function resetMenu() {
60    if (isMobile()) {
61      if (!$("#menuButton").hasClass("active")) {
62        $("nav").hide().css("right", "-100%");
63      }
64    } else {
65      $("body").css("overflow", "visible");
66      $("#menuButton, .menu__close").removeClass("active");
67      $("nav").removeAttr("style");
68      $("main").removeAttr("style");
69    }
70  }
71
72  // 開閉
73  $("#menuButton").on("click", function (e) {
74    e.preventDefault();
75
76    if (!isMobile()) return false;
77
78    if ($(this).hasClass("active")) {
79      closeMenu();
80    } else {
81      openMenu();
82    }
83
84    return false;
85  });
86
87  $(".menu__close").on("click", function (e) {
88    e.preventDefault();
89    closeMenu();
90    return false;
91  });
92
93  // リサイズ対応（重要）
94  $(window).on("resize", function () {
95    resetMenu();
96  });
97
98  resetMenu();
99});
100
101
102// ------------------------------
103// 画像切り替え
104// ------------------------------
105$(function () {
106  var $setElem = $('.switch'),
107    pcName = '_pc',
108    spName = '_sp',
109    replaceWidth = 769;
110
111  $setElem.each(function () {
112    var $this = $(this);
113
114    function imgSize() {
115      var windowWidth = parseInt($(window).width());
116
117      if (windowWidth >= replaceWidth) {
118        $this.attr('src', $this.attr('src').replace(spName, pcName));
119      } else {
120        $this.attr('src', $this.attr('src').replace(pcName, spName));
121      }
122    }
123
124    $(window).resize(imgSize);
125    imgSize();
126  });
127});
128
129
130// ------------------------------
131// ページトップ
132// ------------------------------
133$(function () {
134  $("#topBtn").hide();
135
136  $(window).on("scroll", function () {
137    if ($(this).scrollTop() > 100) {
138      $("#topBtn").fadeIn("fast");
139    } else {
140      $("#topBtn").fadeOut("fast");
141    }
142  });
143
144  $('#topBtn').click(function () {
145    $('body,html').animate({ scrollTop: 0 }, 400);
146    return false;
147  });
148});
149
150
151// ------------------------------
152// スムーススクロール
153// ------------------------------
154$(function () {
155  var headerHight = -1;
156
157  $('nav a[href^="#"]').click(function () {
158    var href = $(this).attr("href");
159    var target = $(href === "#" || href === "" ? 'html' : href);
160    var position = target.offset().top - headerHight;
161
162    $("html, body").animate({ scrollTop: position }, 550, "swing");
163    return false;
164  });
165});
166
167
168// ------------------------------
169// IntersectionObserver
170// ------------------------------
171document.addEventListener('DOMContentLoaded', function () {
172  const target = document.getElementById('newlogo');
173  const header = document.getElementById('header_fixed');
174
175  if (!target || !header) return;
176
177  const observer = new IntersectionObserver((entries) => {
178    entries.forEach(entry => {
179      if (entry.isIntersecting) {
180        header.classList.add('is-dark');
181      } else {
182        header.classList.remove('is-dark');
183      }
184    });
185  }, {
186    rootMargin: '0px 0px -100% 0px'
187  });
188
189  observer.observe(target);
190});
191
192
193// ------------------------------
194// アコーディオン
195// ------------------------------
196$(function () {
197  $(".footer__nav--item h3").on("click", function () {
198    $(this).next().slideToggle(300);
199    $(this).toggleClass("active");
200  });
201});
202
203
204// ------------------------------
205// ふわっと表示
206// ------------------------------
207function fuwat(selector, offset, className) {
208  $(selector).css('visibility', 'hidden');
209
210  $(window).scroll(function () {
211    var windowHeight = $(window).height(),
212      topWindow = $(window).scrollTop();
213
214    $(selector).each(function () {
215      var objectPosition = $(this).offset().top;
216
217      if (topWindow > objectPosition - windowHeight + offset) {
218        $(this).addClass(className);
219      }
220    });
221  });
222}
223
224$(function () {
225  fuwat('.fuwat', 200, 'fuwatAnime');
226  fuwat('.fuwat02', 300, 'fuwatAnime02');
227  fuwat('.fuwat03', 300, 'fuwatAnime03');
228  fuwat('.fuwat04', 300, 'fuwatAnime04');
229});