https://www.rurinohama.jp/wp-content/themes/ruri2019/js/index.js

1//するするスクロール
2$(function () {
3  // #で始まるアンカーをクリックした場合に処理
4  $('a[href^="#"]').click(function () {
5    // スクロールの移動速度
6    var speed = 400; // ミリ秒
7    // アンカーの値取得
8    var href = $(this).attr("href");
9    // 移動先を取得
10    var target = $(href == "#" || href == "" ? 'html' : href);
11    // 移動先を数値で取得
12    var position = target.offset().top;
13    // スムーススクロール
14    $('body,html').animate({
15      scrollTop: position
16    }, speed, 'swing');
17    return false;
18  });
19});
20
21//sidebar クリックして閉じる（SP用）
22$(function () {
23  $('.menu li a').on('click', function () { //ページ内リンクをクリックしたとき
24    $('#nav-input').prop('checked', false); //アイテムを全部checkedはずす
25  });
26});
27
28
29//スライダー
30jQuery(function ($) {
31  $('#slider1').sliderPro({
32    width: 1000, //横幅
33    height: 400,
34    buttons: false, //ナビゲーションボタン
35    shuffle: false, //スライドのシャッフル
36    thumbnailWidth: 250, //サムネイルの横幅
37    thumbnailHeight: 100, //サムネイルの縦幅
38    slideDistance: 0, //スライド同士の距離
39    breakpoints: {
40      480: { //表示方法を変えるサイズ
41        visibleSize: 'auto',
42        thumbnailWidth: 89,
43        thumbnailHeight: 40
44      }
45    }
46  });
47});
48jQuery(function ($) {
49  $('#slider2').sliderPro({
50    width: 1000, //横幅
51    height: 400,

52    buttons: false, //ナビゲーションボタン
53    shuffle: false, //スライドのシャッフル
54    thumbnailWidth: 250, //サムネイルの横幅
55    thumbnailHeight: 100, //サムネイルの縦幅
56    slideDistance: 0, //スライド同士の距離
57    breakpoints: {
58      480: { //表示方法を変えるサイズ
59        thumbnailWidth: 89,
60        thumbnailHeight: 40
61      }
62    }
63  });
64});
65jQuery(function ($) {
66  $('#slider3').sliderPro({
67    width: 1000, //横幅
68    height: 400,
69    buttons: false, //ナビゲーションボタン
70    shuffle: false, //スライドのシャッフル
71    thumbnailWidth: 250, //サムネイルの横幅
72    thumbnailHeight: 100, //サムネイルの縦幅
73    slideDistance: 0, //スライド同士の距離
74    breakpoints: {
75      480: { //表示方法を変えるサイズ
76        thumbnailWidth: 89,
77        thumbnailHeight: 40
78      }
79    }
80  });
81});
82
83jQuery(function ($) {
84  $('#slider4').sliderPro({
85    width: 1000, //横幅
86    height: 550,

87    buttons: false, //ナビゲーションボタン
88    shuffle: false, //スライドのシャッフル
89    thumbnailWidth: 166, //サムネイルの横幅
90    thumbnailHeight: 100, //サムネイルの縦幅
91    slideDistance: 0, //スライド同士の距離
92    autoplayDelay: 8000,
93    breakpoints: {
94      480: { //表示方法を変えるサイズ
95        visibleSize: 'auto',
96        width: '100%', //横幅
97        height: '55vw',
98        thumbnailWidth: '20vw',
99        thumbnailHeight: '12.5vw'
100
101      }
102    }
103  });
104});
105jQuery(function ($) {
106  $('#slider5').sliderPro({
107    width: 1000, //横幅
108    height: 550,
109    buttons: false, //ナビゲーションボタン
110    shuffle: false, //スライドのシャッフル
111    thumbnailWidth: 200, //サムネイルの横幅
112    thumbnailHeight: 100, //サムネイルの縦幅
113    slideDistance: 0, //スライド同士の距離
114    autoplayDelay: 8000,
115    breakpoints: {
116      480: { //表示方法を変えるサイズ
117        visibleSize: 'auto',
118        width: '100%', //横幅
119        height: '55vw',
120        thumbnailWidth: '20vw',
121        thumbnailHeight: '12.5vw'
122      }
123    }
124  });
125});
126jQuery(function ($) {
127  $('#slider6').sliderPro({
128    width: 1000, //横幅
129    height: 550,

130    buttons: false, //ナビゲーションボタン
131    shuffle: false, //スライドのシャッフル
132    thumbnailWidth: 200, //サムネイルの横幅
133    thumbnailHeight: 100, //サムネイルの縦幅
134    slideDistance: 0, //スライド同士の距離
135    autoplayDelay: 8000,
136    breakpoints: {
137      480: { //表示方法を変えるサイズ
138        visibleSize: 'auto',
139        width: '100%', //横幅
140        height: '55vw',
141        thumbnailWidth: '20vw',
142        thumbnailHeight: '12.5vw'
143      }
144    }
145  });
146});
147jQuery(function ($) {
148  $('#slider7').sliderPro({
149    width: 1000, //横幅
150    height: 550,
151    buttons: false, //ナビゲーションボタン
152    shuffle: false, //スライドのシャッフル
153    thumbnailWidth: 200, //サムネイルの横幅
154    thumbnailHeight: 100, //サムネイルの縦幅
155    slideDistance: 0, //スライド同士の距離
156    autoplayDelay: 8000,
157    breakpoints: {
158      480: { //表示方法を変えるサイズ
159        visibleSize: 'auto',
160        width: '100%', //横幅
161        height: '55vw',
162        thumbnailWidth: '20vw',
163        thumbnailHeight: '12.5vw'
164      }
165    }
166  });
167});
168jQuery(function ($) {
169  $('#slider8').sliderPro({
170    width: 1000, //横幅
171    height: 550,

172    buttons: false, //ナビゲーションボタン
173    shuffle: false, //スライドのシャッフル
174    thumbnailWidth: 166, //サムネイルの横幅
175    thumbnailHeight: 100, //サムネイルの縦幅
176    slideDistance: 0, //スライド同士の距離
177    autoplayDelay: 8000,
178    breakpoints: {
179      480: { //表示方法を変えるサイズ
180        visibleSize: 'auto',
181        width: '100%', //横幅
182        height: '55vw',
183        thumbnailWidth: '20vw',
184        thumbnailHeight: '12.5vw'
185      }
186    }
187  });
188});
189jQuery(function ($) {
190  $('#slider9').sliderPro({
191    width: 1000, //横幅
192    height: 550,
193    buttons: false, //ナビゲーションボタン
194    shuffle: false, //スライドのシャッフル
195    thumbnailWidth: 200, //サムネイルの横幅
196    thumbnailHeight: 100, //サムネイルの縦幅
197    slideDistance: 0, //スライド同士の距離
198    autoplayDelay: 8000,
199    breakpoints: {
200      480: { //表示方法を変えるサイズ
201        visibleSize: 'auto',
202        width: '100%', //横幅
203        height: '55vw',
204        thumbnailWidth: '20vw',
205        thumbnailHeight: '12.5vw'
206      }
207    }
208  });
209});
210jQuery(function ($) {
211  $('#slider10').sliderPro({
212    width: 1000, //横幅
213    height: 550,

214    buttons: false, //ナビゲーションボタン
215    shuffle: false, //スライドのシャッフル
216    thumbnailWidth: 200, //サムネイルの横幅
217    thumbnailHeight: 100, //サムネイルの縦幅
218    slideDistance: 0, //スライド同士の距離
219    autoplayDelay: 8000,
220    breakpoints: {
221      480: { //表示方法を変えるサイズ
222        visibleSize: 'auto',
223        width: '100%', //横幅
224        height: '55vw',
225        thumbnailWidth: '20vw',
226        thumbnailHeight: '12.5vw'
227      }
228    }
229  });
230});
231
232jQuery(function ($) {
233  $('#slider11').sliderPro({
234    width: 1000, //横幅
235    height: 550,
236    buttons: false, //ナビゲーションボタン
237    shuffle: false, //スライドのシャッフル
238    thumbnailWidth: 200, //サムネイルの横幅
239    thumbnailHeight: 100, //サムネイルの縦幅
240    slideDistance: 0, //スライド同士の距離
241    autoplayDelay: 8000,
242    breakpoints: {
243      480: { //表示方法を変えるサイズ
244        visibleSize: 'auto',
245        width: '100%', //横幅
246        height: '55vw',
247        thumbnailWidth: '20vw',
248        thumbnailHeight: '12.5vw'
249      }
250    }
251  });
252});
253jQuery(function ($) {
254  $('#slider12').sliderPro({
255    width: 1000, //横幅
256    height: 550,

257    buttons: false, //ナビゲーションボタン
258    shuffle: false, //スライドのシャッフル
259    thumbnailWidth: 200, //サムネイルの横幅
260    thumbnailHeight: 100, //サムネイルの縦幅
261    slideDistance: 0, //スライド同士の距離
262    autoplayDelay: 8000,
263    breakpoints: {
264      480: { //表示方法を変えるサイズ
265        visibleSize: 'auto',
266        width: '100%', //横幅
267        height: '55vw',
268        thumbnailWidth: '20vw',
269        thumbnailHeight: '12.5vw'
270      }
271    }
272  });
273});
274
275
276// スクロールイベント
277window.addEventListener( "scroll", function() {
278
279  var headerElement = document.getElementById( "header" ) ; // `#header`セレクタを取得
280  var rect = headerElement.getBoundingClientRect() ; // 
281  var y = rect.top + window.pageYOffset ; // Y方向 (縦)にスクロール量を取得（pageYOffset：windowオブジェクト。現在表示位置のY座標を取得）
282  if (y > 0) { // 変数yの値が0よりも
283    headerElement.classList.remove('hidden'); // 大きければhiddensセレクタを削除する
284  } else {
285    headerElement.classList.add('hidden'); // そうでなければhiddensセレクタを追加する
286  }
287} ) ;