https://vsarts.design/scripts/common.js?230428_2

1$(function(){
2    // フェード解除
3    $('#fade').fadeOut(1000);
4
5    // スムーススクロール
6    $(document).on("click", "a[href*='#']:not(.no_scroll)", function(){
7        if(!sizeSp){
8            var headerHeight = 100; // 固定ヘッダの高さ（PC）
9        }else{
10            var headerHeight = 0; // 固定ヘッダの高さ（SP）
11        }
12        var speed = 500; // スクロールの速さ
13        var href= $(this).attr("href");
14        var target = $(href == "#" || href == "" ? 'html' : href);
15        var position = target.offset().top-headerHeight;
16        $("html, body").animate({scrollTop:position}, speed, "swing");
17        // lazyLoad対策
18        setTimeout(function(){
19            var positionBefore = position;
20            position = target.offset().top-headerHeight;
21            var positionGap = Math.abs(positionBefore - position);
22            if(positionGap > 10){
23                $("html, body").scrollTop(position);
24            }
25        },1000);
26        return false;
27    });
28});
29
30//別ページからのアンカーリンク
31$(window).on('load', function() {
32    if(!sizeSp){
33        var headerHeight = 100; // 固定ヘッダの高さ（PC）
34    }else{
35        var headerHeight = 0; // 固定ヘッダの高さ（SP）
36    }
37    var urlHash = location.hash;
38    if(urlHash){
39        var target = $(urlHash);
40        if(target.length){
41            var position = target.offset().top-headerHeight;
42            $("html, body").scrollTop(position);
43            // lazyLoad対策
44            setTimeout(function(){
45                var positionBefore = position;
46                position = target.offset().top-headerHeight;
47                var positionGap = Math.abs(positionBefore - position);
48                if(positionGap > 10){
49                    $("html, body").scrollTop(position);
50                }
51            },1000);
52        }
53    }
54});
55
56$(function(){
57    // ユーザーエージェントチェック
58    var agent = navigator.userAgent;
59
60    var spFlag = false;
61    if(agent.indexOf("iPhone") > 0){
62        // iphone処理
63        spFlag = true;
64        $('body').addClass('is-iOS');
65    }else if(agent.indexOf("Android") > 0){
66        // android処理
67        spFlag = true;
68    }
69});
70
71//============================================================
72//	レスポンシブ用(不要な場合は削除)
73//============================================================
74// 画面サイズ取得
75var breakpoint = 767;
76var sizeSp = false;
77if(window.matchMedia('(max-width:'+ breakpoint + 'px)').matches){
78    sizeSp = true;
79}else{
80    sizeSp = false;
81}
82
83// LazyLoad用
84$(function(){
85    $('img[data-src]').not('.swiper-lazy').addClass('lazyload');
86    window.lazySizesConfig = window.lazySizesConfig || {};
87    lazySizesConfig.srcAttr = 'data-src';
88});
89
90//============================================================
91//	サイト毎に共通動作を記述する場合はここより下で行うこと
92//============================================================
93// jsHide
94$(function(){
95    jsHide();
96});
97function jsHide(){
98    const jsHideList = document.querySelectorAll(".jsHide, .jsHideChar, .jsHideImg");
99    const observerJsHide = new IntersectionObserver((entries) => {
100        entries.forEach((entry) => {
101            if (entry.isIntersecting) {
102                entry.target.classList.add('jsShow');
103            }
104        });
105    }, {
106        rootMargin: "0% 0% -30%"
107    });
108    jsHideList.forEach((item) => {
109        observerJsHide.observe(item);
110    });
111
112    const footerList = document.querySelectorAll("#footer");
113    const observerFooter = new IntersectionObserver((entries) => {
114        entries.forEach((entry) => {
115            if (entry.isIntersecting) {
116                $('.jsHide, .jsHideChar, .jsHideImg').addClass('jsShow');
117            }
118        });
119    },{
120        rootMargin: "0%"
121    });
122    footerList.forEach((item) => {
123        observerFooter.observe(item);
124    });
125}
126
127// ウィンドウのスクロールの有効／無効
128var defaultPosition;
129var windowScrollTop;
130function windowScrollToggle() {
131    var target = $('#container');
132    if (target.css('position') == 'fixed') {
133        target.css({ 'position': defaultPosition, 'top': '0' });
134        $('html,body').scrollTop(windowScrollTop);
135    } else {
136        defaultPosition = target.css('position');
137        windowScrollTop = $(window).scrollTop();
138        target.css({ 'position': 'fixed', 'top': -windowScrollTop });
139        $('html,body').scrollTop(0);
140    }
141}
142$(function(){

143    let $overlay = $('#overlay');
144    $('.headerOpen').hover( 
145        function(){
146            $(this).addClass('active');
147            $overlay.addClass('is-active');
148        },  
149        function(){
150            $(this).removeClass('active');
151            $overlay.removeClass('is-active');
152        }
153    );
154});
155
156$(function(){
157    // header
158    $(window).scroll(function(){
159        if (!$('#header,#page-top').hasClass('naviOpen')){
160            var currentPos = $(this).scrollTop();
161            if (currentPos > 100){
162                $("#header,#btnNavi,#page-top").addClass("scroll");
163            }else{
164                $("#header,#btnNavi,#page-top").removeClass("scroll");
165            }
166        }
167
168        if ($('body').hasClass('page-top-index')){
169            if (currentPos > 1000){
170                $("#fNavi").addClass("on");
171            }else{
172                $("#fNavi").removeClass("on");
173            }
174        }else{
175            if (currentPos > 100){
176                $("#fNavi").addClass("on");
177            }else{
178                $("#fNavi").removeClass("on");
179            }
180        }
181
182    });
183    // TO TOP 追加
184
185    // btnNavi
186    $('#btnNavi a, #menu .btnClose').click(function () {
187        if ($('#header').hasClass('naviOpen')){
188            $('#header').removeClass('naviOpen');
189            $('#btnNavi').removeClass('naviOpen');
190            $('#menu').fadeOut(400, function () {
191                windowScrollToggle();
192            });
193        }else{
194            $('#menu').fadeIn(400);
195            $('#header').addClass('naviOpen');
196            $('#btnNavi').addClass('naviOpen');
197            windowScrollToggle();
198        }
199    });
200});
201
202// タブレット表示調整
203var ua = navigator.userAgent
204var sp = ua.indexOf('iPhone') > -1 ||
205    (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)
206var isTablet = !sp && (
207    ua.indexOf('iPad') > -1 ||
208    (ua.indexOf('Macintosh') > -1 && 'ontouchend' in document) ||
209    ua.indexOf('Android') > -1
210)
211$(function () {
212    if (isTablet) {
213        $('meta[name="viewport"]').attr('content', 'width=1400');
214        $('.secHeaderLogo').addClass('tablet');
215        $('.secHeaderBtn').addClass('tablet');
216    }
217});
218
219//デスクトップ用Webサイトを表示（iPad）判定
220var ua = navigator.userAgent
221var sp = ua.indexOf('iPhone') > -1 ||
222    (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)
223var isDesktopIpad = !sp && (ua.indexOf('Macintosh') > -1 && 'ontouchend' in document);
224$(function () {
225    if (isDesktopIpad) {
226        $('body').addClass('isDesktopIpad');
227    }
228});
229
230///============================================================
231//	スライダー
232//============================================================
233// スライダーを初期化（引数minSlidesSpは省略可）
234function initSlider(elementName, settings ,minSlides, minSlidesSp){
235	// 自動で初期化しないオプションを追加
236	settings.init = false;
237	// スライダーの変数を設定
238	var slider = new Swiper(elementName + ' .swiper-container', settings);
239	// スマホの最小のスライド枚数を設定
240	if(minSlidesSp != undefined && sizeSp){
241		minSlides = minSlidesSp;
242	}
243	// 最小のスライド枚数よりスライド枚数が多いか判定
244	if(getSliderCount(elementName) > minSlides){
245		// スライダーを初期化
246		try{ slider.init(); }catch(e){}
247	}else{
248		// スライダーのパーツを非表示
249		$(elementName + ' .swiper-button-prev,' + elementName + ' .swiper-button-next,' + elementName + ' .swiper-pagination').hide();
250		$(elementName).addClass('disabled');
251	}
252	return slider;
253}
254
255// 画像遅延読み込みのスライダーを初期化（引数minSlidesSpは省略可）
256function initSliderLazy(elementName, settings ,minSlides, minSlidesSp){
257	// 自動で初期化しないオプションを追加
258	settings.init = false;
259	// スライダーの画像の遅延読み込みを設定
260	settings.lazy = {loadPrevNext: true};
261	$(elementName + ' img[data-src]').addClass('sliderLazyImg').removeClass('lazyload');
262	// スライダーの変数を設定
263	var slider = new Swiper(elementName + ' .swiper-container', settings);
264	// スマホの最小のスライド枚数を設定
265	if(minSlidesSp != undefined && sizeSp){

266		minSlides = minSlidesSp;
267	}
268	// 最小のスライド枚数よりスライド枚数が多いか判定
269	if(getSliderCount(elementName) > minSlides){
270		// スライダーを初期化
271		try{ slider.init(); }catch(e){}
272	}else{
273		// スライダーのパーツを非表示
274		$(elementName + ' .swiper-button-prev,' + elementName + ' .swiper-button-next,' + elementName + ' .swiper-pagination').hide();
275		$(elementName).addClass('disabled');
276		$(elementName).find('.sliderLazyImg').removeClass('sliderLazyImg').addClass('lazyload');
277	}
278	// object-fitと遅延読み込みを組み合わせてIEでは表示できないので、IEでは遅延読み込みを無効にする
279	var userAgent = window.navigator.userAgent.toLowerCase();
280	if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
281		$(elementName + ' .imgFill .sliderLazyImg').each(function(){
282			$(this).attr('src',$(this).attr('data-src'));
283			$(this).removeClass('sliderLazyImg');
284		})
285	}
286	// スライダーが見えたら画像にswiper-lazyクラスを追加
287	setSliderLazyEvent(slider,elementName);
288	return slider;
289}
290
291// スライダーの枚数をカウント
292function getSliderCount(elementName){
293	return $(elementName + ' .swiper-slide:not(.swiper-slide-duplicate)').length;
294}
295
296// ループ指定のスライダーのLightboxが正しく動作するようにする
297function setSliderLightbox(elementName){
298	// 最初のスライドの前・最後のスライドの後に挿入されるクローンのLightboxを削除
299	$(elementName + ' .swiper-slide.swiper-slide-duplicate a').removeAttr('data-lightbox');
300	$(elementName + ' .swiper-slide.swiper-slide-duplicate a').attr('href','javascript:void(0)');
301	// クローンのLightboxをクリック
302	$(elementName + ' .swiper-slide.swiper-slide-duplicate a').on('click',function(){
303		// クローンではないスライドのLightboxを実行する
304		var index = $(this).closest('.swiper-slide').attr('data-swiper-slide-index');
305		$(elementName + ' .swiper-slide:not(.swiper-slide-duplicate):eq('+ index + ') a').trigger('click');
306	});
307}
308
309// スライダーが見えたら画像にswiper-lazyクラスを追加
310function setSliderLazyEvent(slider,elementName){
311	$(window).on('load scroll', function() {
312		var scrollTop = $(window).scrollTop();
313		var scrollBtm = scrollTop + $(window).height();
314		if($(elementName).length){
315			// 要素が存在する場合
316			var targetTop = $(elementName).offset().top;
317			var targetBtm = targetTop + $(elementName).height();
318			if(scrollBtm > targetTop && scrollTop < targetBtm) {
319				$(elementName).find('.sliderLazyImg').removeClass('sliderLazyImg').addClass('swiper-lazy');
320				//slider.lazy.load();
321			}
322		}
323	});
324}
325
326$(function () {
327    $('#menu .Tabstart').on('click', function () {
328        if($(this).hasClass('opened')){
329            $(this).removeClass('opened');
330            $(this).next().slideUp(500);
331        }else{
332            $(this).addClass('opened');
333            $(this).next().slideDown(500);
334        }
335    });
336});