$(function() { //--------------------------------------------- // スムーズスクロール //--------------------------------------------- //#を含むリンクが対象 $('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(); } return false; }); //--------------------------------------------- // スティッキーヘッダー //--------------------------------------------- //if (window.matchMedia('(min-width: 768px)').matches) { // $(window).scroll(function() { // if($(this).scrollTop() > 25){ // $('header').addClass('is-fixed'); // $('.wrap').addClass('header-is-fixed'); // } else { // $('header').removeClass('is-fixed'); // $('.wrap').removeClass('header-is-fixed'); // } // return false; //}); //} //--------------------------------------------- // スクロールでうごく葉っぱ //--------------------------------------------- if (window.matchMedia('(min-width: 768px)').matches) { $(window).on('scroll',function(){ $('#bg-leaf-01').css({ 'backgroundPosition':'center ' + $(window).scrollTop() / 2 + 'px', }); $('#bg-leaf-02').css({ 'backgroundPosition':'center ' + $(window).scrollTop() / 3 + 'px', }); $('#bg-leaf-03').css({ 'backgroundPosition':'center ' + $(window).scrollTop() / 4 + 'px', }); return false; }); } //--------------------------------------------- // ハンバーガーメニュー //--------------------------------------------- $('.toggle').on('click', function () { $(this).toggleClass('active'); // ハンバーガー → バツ印 $('.guriri-global-nav').toggleClass('show'); // ナビ開閉 $(this).attr('aria-expanded', $(this).hasClass('active')); }); }); //--------------------------------------------- // スクロールで要素を表示 //--------------------------------------------- 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);