$(function() { //--------------------------------------------- //ローディングアニメーション //--------------------------------------------- var loader = $('.loader-wrap'); //ページの読み込みが完了したらアニメーションを非表示 $(window).on('load',function(){ loader.fadeOut(); $('body').removeClass('js-no-scroll'); }); //ページの読み込みが完了してなくても3秒後にアニメーションを非表示にする setTimeout(function(){ loader.fadeOut(); },3000); //--------------------------------------------- // ハンバーガーメニュー //--------------------------------------------- $(document).ready(function() { $(".toggle").click(function() { $(this).toggleClass("active"); // ボタンのアイコンをアクティブに切り替える $(".nav").toggleClass("show"); // サイドバー(メニュー)の表示・非表示を切り替える }); //ページ内リンククリック時にハンバーガーメニューを閉じる $('.nav a[href]').on('click', function() { $('.toggle').trigger('click'); }); }); //--------------------------------------------- // スクロールでヘッダーを上部に固定 //--------------------------------------------- $(document).ready(function() { if ($(window).width() >= 1281) { // 画面幅が901px以上の場合に実行 var nav = $("nav"); var navTop = nav.offset().top; // nav要素の位置を取得 $(window).scroll(function() { var scrollTop = $(this).scrollTop(); if (scrollTop >= navTop) { nav.addClass("sticky"); // スクロール位置がnav要素の位置を超えたら"sticky"クラスを追加 } else { nav.removeClass("sticky"); // スクロール位置がnav要素の位置未満なら"sticky"クラスを削除 } }); } }); //--------------------------------------------- // 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); });