$(function() { //--------------------------------------------- //ローディングアニメーション //--------------------------------------------- var loader = $('.loader-wrap'); //ページの読み込みが完了したらアニメーションを非表示 $(window).on('load',function(){ loader.fadeOut(); $('body').removeClass('js-no-scroll'); }); //ページの読み込みが完了してなくても3秒後にアニメーションを非表示にする setTimeout(function(){ loader.fadeOut(); },3000); //--------------------------------------------- // スクロールでMVのデザイン変更 //--------------------------------------------- $(document).ready(function() { // 画面幅が1081px以上の場合のみ処理を実行 if ($(window).width() >= 1081) { // ページ読み込み時にヘッダーに.mv_showクラスを追加 $('.header_toppage').addClass('mv_show'); // メインビジュアルの高さを取得 var mainVisualHeight = $('#Intro').offset().top; // スクロールイベントを監視し、条件を満たすと.mv_showクラスを削除 $(window).scroll(function() { if ($(this).scrollTop() >= mainVisualHeight) { $('.header_toppage').removeClass('mv_show'); } else { $('.header_toppage').addClass('mv_show'); } }); } }); //--------------------------------------------- // スライドショー //--------------------------------------------- $(".slider").slick({ autoplay: true, asNavFor:".thumbs", }) $(".thumbs").slick({ autoplay: true, asNavFor:".slider", slidesToShow: 6, vertical: true, verticalSwiping: true, }) $(".thumbs .slick-slide").on("click",function(){ let index=$(this).attr("data-slick-index") $(".slider").slick("slickGoTo",index) }) //--------------------------------------------- // ハンバーガーメニュー開閉 //--------------------------------------------- $(document).ready(function() { $(".toggle").click(function() { $(this).toggleClass("active"); // ボタンのアイコンをアクティブに切り替える $(".nav").toggleClass("show"); // サイドバー(メニュー)の表示・非表示を切り替える }); //ページ内リンククリック時にハンバーガーメニューを閉じる $('.nav a[href]').on('click', function() { $('.toggle').trigger('click'); }); }); //--------------------------------------------- // SP閲覧時のみ電話番号にリンクを付ける //--------------------------------------------- var ua = navigator.userAgent; if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){ $('.tel-link').each(function(){ var str = $(this).text(); $(this).html($('').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '')); }); } //--------------------------------------------- // 外部リンクを別ウィンドウで開く //--------------------------------------------- $('a[href^=https]').not('[href*="'+location.hostname+'"]').attr('target', '_blank'); $('a[href^=http]').not('[href*="'+location.hostname+'"]').attr('target', '_blank'); //--------------------------------------------- // スムーズスクロール //--------------------------------------------- //#を含むリンクが対象 $('a[href^="#"]').click(function(){ var speed = 600, href = $(this).attr("href"), //href="#"ならページトップ(html)へ href="#"以外ならhrefの指定先へ target = $(href == "#" || href=="" ? 'html':href), position = target.offset().top; $('body,html').animate({scrollTop:position},speed,'swing'); return false; }); //--------------------------------------------- // pagetopボタン スクロールでフェードイン //--------------------------------------------- // 300pxスクロールしたらpagetopボタンを表示する var topBtn=$('#PageTop'); topBtn.hide(); $(window).scroll(function() { if($(this).scrollTop() > 300){ topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //--------------------------------------------- // スクロールで要素を表示 //--------------------------------------------- function showElementAnimation() { var element = document.getElementsByClassName('js-animation'); if(!element) return; // 要素がなかったら処理をキャンセル var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整 var scrollY = window.pageYOffset; var windowH = window.innerHeight; for(var i=0;i elemY) { element[i].classList.add('is-show'); } else if(scrollY + windowH < elemY) { // 上にスクロールして再度非表示にする場合はこちらを記述 element[i].classList.remove('is-show'); } } } showElementAnimation(); window.addEventListener('scroll', showElementAnimation); });