https://namerikawa-kanko.jp/wpndt/wp-content/themes/nam_thm/common/js/main.js

1document.addEventListener('DOMContentLoaded', function () {
2	pageLinkScroll();
3	spNavi();
4	languageToggle();
5	bottomBlockNav();
6	fontSizeController();
7});
8
9// page link scroll
10
11function pageLinkScroll() {
12    var headerHight = 30;
13    
14    document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
15	    anchor.addEventListener('click', function (e) {
16	      e.preventDefault();
17	
18	      var href = this.getAttribute('href');
19	      var target = (href === '#' || href === '')
20	        ? document.documentElement
21	        : document.querySelector(href);
22	
23	      if (!target) return;
24	
25	      var position =
26	        target.getBoundingClientRect().top +
27	        window.pageYOffset -
28	        headerHight;
29	
30	      window.scrollTo(0, position);
31	    });
32    });
33}
34
35//spnavi
36
37function spNavi() {
38    var spheader = document.getElementById('js_slidemenu');
39    var toggle = document.getElementById('js_h_sp_toggle');
40
41    if (!spheader || !toggle) return;
42
43    toggle.addEventListener('click', function () {
44        spheader.classList.toggle('open');
45        this.classList.toggle('megaopen');
46    });
47}
48
49// language
50function languageToggle() {
51  document.querySelectorAll('.js_langbtn').forEach(function (btn) {
52    btn.addEventListener('click', function () {
53      var langList = document.querySelector('.js_langlist');
54      if (!langList) return;
55
56      langList.classList.toggle('open');
57      this.parentElement.classList.toggle('open');
58    });
59  });
60}
61
62//bottom block nav
63function bottomBlockNav() {
64  var blocknav = document.querySelector('.h_blocknav');
65  var toggle = document.getElementById('js_blocknav_toggle');
66
67  if (!blocknav || !toggle) return;
68
69  // SP 初期は閉じる
70  if (window.matchMedia('(max-width: 768px)').matches) {
71    blocknav.classList.add('closed');
72  }
73
74  toggle.addEventListener('click', function () {
75    blocknav.classList.toggle('closed');
76  });
77}
78
79
80
81//font size controller
82
83function fontSizeController() {
84
85  var wrapper = document.querySelector('.ly_wrapper');
86  if (!wrapper) return;
87
88  var fontSizes = [16, 18, 19];
89  var maxStep = 2;
90  var storageKey = 'fontStep';
91  var currentStep = 0;
92
93  function applyFont(step) {
94    step = Math.min(step, maxStep);
95    currentStep = step;
96    wrapper.style.fontSize = fontSizes[step] + 'px';
97
98    try {
99      localStorage.setItem(storageKey, step);
100    } catch (e) {}
101  }
102
103  // 初期反映（保持）
104  try {
105    var saved = localStorage.getItem(storageKey);
106    if (saved !== null) {
107      applyFont(parseInt(saved, 10));
108    } else {
109      applyFont(0);
110    }
111  } catch (e) {
112    applyFont(0);
113  }
114
115  var upBtn = document.getElementById('fontUp');
116  var dfBtn = document.getElementById('fontDf');
117
118  if (upBtn) {
119    upBtn.onclick = function (e) {
120      e.preventDefault();
121      if (currentStep < maxStep) {
122        applyFont(currentStep + 1);
123      }
124    };
125  }
126
127  if (dfBtn) {
128    dfBtn.onclick = function (e) {
129      e.preventDefault();
130      applyFont(0);
131    };
132  }
133}
134
135
136// hamburger menu (scroll) ※ DOMContentLoaded 不要
137const hamburger = document.querySelector('.h_mgmenu_toggle');
138const scrollThreshold = 60; // px
139
140if (hamburger) {
141  window.addEventListener('scroll', function () {
142    if (window.scrollY > scrollThreshold) {
143      hamburger.classList.add('scrolled');
144    } else {
145      hamburger.classList.remove('scrolled');
146    }
147  });
148}
149
150
151// wave
152
153const WIDTH = 1440;
154const WAVE_HEIGHT = 128;// wave haight
155const TOTAL_HEIGHT = 150;// svg height
156const BASE_Y = WAVE_HEIGHT / 2;
157
158const isTablet = window.matchMedia("(max-width: 1024px)").matches;
159
160// PC / Tablet・SP
161const POINTS = isTablet ? 5 : 16;
162const AMPLITUDE = isTablet ? 10 : 15;
163const SPEED = isTablet ? 0.008 : 0.01;
164
165// Get multiple wavePaths
166document.querySelectorAll(".wavePath").forEach((path, index) => {
167  let t = Math.random() * 1000;
168  
169  // Random at first
170  const baseOffsets = Array.from({ length: POINTS }, () =>
171    (Math.random() - 0.5) * 26
172  );
173  const phases = Array.from({ length: POINTS }, () =>
174    Math.random() * Math.PI * 2
175  );
176  const freqs = Array.from({ length: POINTS }, () =>
177    0.6 + Math.random() * 0.8
178  );
179  
180  // Catmull-Rom -> Bezier
181  function cr2b(points) {
182    let d = `M ${points[0].x} ${points[0].y}`;
183    for (let i = 0; i < points.length - 1; i++) {
184      const p0 = points[i - 1] || points[i];
185      const p1 = points[i];
186      const p2 = points[i + 1];
187      const p3 = points[i + 2] || p2;
188
189      d += ` C ${
190        p1.x + (p2.x - p0.x) / 6
191      } ${
192        p1.y + (p2.y - p0.y) / 6
193      }, ${
194        p2.x - (p3.x - p1.x) / 6
195      } ${
196        p2.y - (p3.y - p1.y) / 6
197      }, ${p2.x} ${p2.y}`;
198    }
199    return d;
200  }
201
202  function build() {

203    const step = WIDTH / (POINTS - 1);
204    const pts = [];
205
206    for (let i = 0; i < POINTS; i++) {
207      const x = i * step;
208      const edge = Math.sin((x / WIDTH) * Math.PI);
209      const noise =
210        Math.sin(t * freqs[i] + phases[i]) +
211        Math.sin(t * 0.4 + phases[i] * 1.3) * 0.5;
212
213      pts.push({
214        x,
215        y: BASE_Y + baseOffsets[i] + noise * AMPLITUDE * edge
216      });
217    }
218
219    return (
220      cr2b(pts) +
221      ` L ${WIDTH} ${TOTAL_HEIGHT} L 0 ${TOTAL_HEIGHT} Z`
222    );
223  }
224
225  (function animate() {
226    t += SPEED;
227    path.setAttribute("d", build());
228    requestAnimationFrame(animate);
229  })();
230});