// noscriptタグを画像へ変換//アンカーリンクの高さがずれる為ここで対応 $("noscript[data-large]").each(function(){ //ウィンドウが767pxより大きかったら大きい画像で小さかったら小さい画像のパスを取得 var src=$(window).width()>=768? $(this).data("large"):$(this).data("small"); var img = $("", { 'src': location.protocol=="https:"?src.replace("http://", "https://"):src, 'alt': $(this).data("alt"), 'title': $(this).data("title"), 'data-large': $(this).data("large"), 'data-small': $(this).data("small") }) // img要素をnoscript要素の後に追加する img.insertAfter($(this)); // noscriptタグ自体を削除 $(this).remove(); }); /*-------------------------------------------------------- 設定 --------------------------------------------------------*/ var ua = null; var ua_type = null; var isWebkit = false; var isFF = false; var isIE = false; var isTopPage = false; var winStyle = 'PC'; var pcSize = false; var tbSize = false; var scrollTimer = false; //ページスクロール処理中フラグ var isScroll = false; //コンテンツ全体の高さ var doc_h = 0; //ウィンドウの幅 var win_w = 0; //ウィンドウの高さ var win_h = 0; //$('body')または$('html')オブジェクトのtop位置 var scroll_pos = 0; //スクロールの向き var direction = null; //ヘッダーエフェクトのフラグ var header_flg = false; //ヘッダーのエフェクトをこの値で実行 var headerValue = 1; //メニューアイコンエフェクトのフラグ var menu_flg = false; //メニューアイコンエフェクトをこの値で実行 var menuValue = 1000; //下層イメージのスライドエフェクト処理中フラグ var effectStart = false; //下層のエフェクト画像要素のポジションを格納する配列 var posArr = []; //下層のエフェクト画像要素のindexを格納する配列 var imgArr = []; //スクロールの値 var y_scroll = 0; //TOPページメニューアイコンフェードインの基準値 var topOptionEffectValue = 100; //下層画像フェードインの基準値 var optionEffectValue = 600; // back forward cach対策 window.onpageshow = function(event) { if (event.persisted) { window.location.reload( true ); } }; /*-------------------------------------------------------- DOM構築完了時 --------------------------------------------------------*/ $(document).ready(function(){ // ua判別 checkUA(); // browzer判別 checkBrowzer(); // Topページ判別 isTopPage = $('body').hasClass('top'); //ページ切換えイベントをセット setPageAnimate(); $('.btn_pageTop').hide(); $('.btn_pageTop').click(function(e){ e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 800); return false; }); //html側で個別に指定したパラメータがある場合はデフォルト値を上書きする if( typeof topCustomEffectValue !== 'undefined' && topCustomEffectValue != null && topCustomEffectValue > 0 ){ topOptionEffectValue = topCustomEffectValue; } //html側で個別に指定したパラメータがある場合はデフォルト値を上書きする if( typeof customEffectValue !== 'undefined' && customEffectValue != null && customEffectValue > 0 ){ optionEffectValue = customEffectValue; } $('a[href*=#]').click(function() { // サブメニューの初期化 $('#header_menu_block').find('.submenu').css('display',''); if(ua_type == 'SP'){ //スマホの場合、メニューを閉じる $('#header #header_menu_block').hide(); } // アンカーリンクで位置がずれてしまうため調整(ページ内リンク) scroll_anchor(this.hash); }); // アンカーリンクで位置がずれてしまうため調整(新規ページ表示) var hash = location.hash; if(hash != ""){ scroll_anchor(hash); } }); /*-------------------------------------------------------- windowロード時 --------------------------------------------------------*/ $(window).load(function(){ win_w = $(window).width(); setTabletMenu(); setSmartPhoneMenu(); //リサイズイベントが発生したら表示領域の幅と高さを更新 $(window).bind('resize orientationchange', function(e){ // iOS8の場合、スクロールしただけでリサイズが走るため、横幅が同じであればイベントキャンセルする if(e.type == 'resize' && win_w == $(window).width()){ return; } // ua判別 win_w = $(window).width(); win_h = $(window).height(); checkUA(); setTabletMenu(); setSmartPhoneMenu(); // サブメニューの初期化 $('#header_menu_block').css('display',''); $('#header_menu_block').find('.submenu').css('display',''); $('#header_menu_block').find('.hover').removeClass('hover'); if(ua_type == 'PC'){ // PCだったら横幅からua_typeを上書きする checkWinWidth(); } }); /*----------------------------------------------- ページがロードされたときのスクロール値により それぞれのアニメーションを実行 -----------------------------------------------*/ y_scroll = $(this).scrollTop(); if(isTopPage == true){ checkTopEffectStatus(); }else{ checkUnderEffect(); } $(window).scroll(function(e){ y_scroll = $(this).scrollTop(); checkCommonEffectStatus(); // TOPページのみに適用 if(isTopPage == true){ checkTopEffectStatus(); }else{ // 下層の画像フェードイン(PCのみ) if( $('.effect_img').length > 0 && ua_type == 'PC' && win_w > 1000 ){ if(posArr[0] - y_scroll < optionEffectValue){ if(effectStart == true){ return; } else { effectStart = true; } var indexNum = imgArr[0]; $('.effect_img:eq('+indexNum+') img').animate({ marginLeft: '+=30', opacity: 1 }, 500, 'linear', function(){ imgArr.shift(); posArr.shift(); effectStart = false; }); } } } // ページトップボタンを表示するタイマー if(y_scroll > 1){ $('.btn_pageTop').fadeIn('fast'); } if(y_scroll == 0){ $('.btn_pageTop').fadeOut('fast'); } }); }); /* * * ヘッダーエリアの伸縮 * */ function startHeaderEffect(type){ var _type = type; var _speed = 200; if(_type == 'hide'){ $('.header_block').animate({ marginTop: "-=10" }, _speed, function(){}); $('.header_block h1').animate({ width: "-=8%" }, _speed, function(){}); $('.header_block .header_right img').animate({ width: "-=8%" }, _speed, function(){}); } else if(_type == 'show'){ $('.header_block').animate({ marginTop: "+=10" }, _speed, function(){}); $('.header_block h1').animate({ width: "+=8%" }, _speed, function(){}); $('.header_block .header_right img').each(function(){ curWidth = $(this).width(); autoWidth = $(this).css('width', 'auto').width(); $(this).width(curWidth).animate({ width: autoWidth }, _speed, function(){ $(this).css('width', ''); }); }); } } /* * * TOPメニューアイコンリストのフェードイン * */ function startMenuEffect(){ var size = $(window).width(); //PCのとき実行 if(ua_type == 'PC' && size > 1000){ /*--- ↓↓変更するパラメータはここ↓↓ ---*/ //アニメーションのスピード var _speed = 500; //アニメーションのディレイ var _delayTime = 300; // data要素があれば上書きする var menu_icon_data_speed = $(".top .menu_icon_container").data("speed"); if(menu_icon_data_speed != undefined && menu_icon_data_speed != ""){ _speed = menu_icon_data_speed; } // data要素があれば上書きする var menu_icon_data_delay = $(".top .menu_icon_container").data("delay"); if(menu_icon_data_delay != undefined && menu_icon_data_delay != ""){ _delayTime = menu_icon_data_delay; } /*--- ↑↑変更するパラメータはここ↑↑ ---*/ var _targetBox = null; var listLength = $('.top .menu_box li .menu_effect_box').length; //要素の数分アニメーションする for(var i=0; i 1000){ if( $('.backdrop_container').length > 0 ){ $('.backdrop_container').css('top', y_scroll * 0.18 * -1); } var effect_box01 = $('.top .main_contents .effect_box01'); var ef01_scroll_speed = 0.2; var effect_box01_data = effect_box01.data('scroll-speed'); if(effect_box01_data != undefined && effect_box01_data != "" ){ ef01_scroll_speed = effect_box01_data; } effect_box01.css('top', y_scroll * ef01_scroll_speed * -1); var w_h = $(window).height(); var effect_box02 = $('.top .contents01 .effect_box02'); var effect_box2_ofset = effect_box02.offset(); var ef02_scroll_speed = 0.2; var effect_box02_data = effect_box02.data('scroll-speed'); if(effect_box02_data != undefined && effect_box02_data != "" ){ ef02_scroll_speed = effect_box02_data; } var window_bottom = y_scroll + w_h; if(effect_box2_ofset != undefined && effect_box2_ofset.top < window_bottom ){ var top_margin = window_bottom - effect_box2_ofset.top; effect_box02.css('top', top_margin * ef02_scroll_speed * -1 ); } // メインイメージエリアのテキストのフェードイン $('.top .main_txt_in').animate({ paddingTop: '-=30', opacity: 1 }, 500); // メニューアイコンリスト表示 var menu_img_offset = $('.menu_icon_container').offset(); if(menu_img_offset != undefined && menu_img_offset.top < window_bottom){ if(menu_flg == false){ menu_flg = true; startMenuEffect(); } } } } /* * * 下層ページ共通のエフェクト * */ function checkUnderEffect(){ var win_w = $(window).width(); if( $('.effect_img').length > 0 && ua_type == 'PC' && win_w > 1000 ){ $('.effect_img').each(function(_index){ var imgPos = $(this).position(); if(imgPos.top - y_scroll < optionEffectValue){ $(this).find('img').animate({ marginLeft: '+=30', opacity: 1 }, 500, 'linear', function(){}); } else { posArr.push(Math.round(imgPos.top)); imgArr.push(_index); } }); } } /* * * TOPページ・下層ページ共通のエフェクト * ヘッダーエリア縮小・拡大 * */ function checkCommonEffectStatus(){ var size = $(window).width(); if(ua_type == 'PC' && size > 1000){ // ヘッダーエリア縮小 if(y_scroll >= headerValue){ if(header_flg == false){ header_flg = true; startHeaderEffect('hide'); } } // ヘッダーエリア拡大 if(y_scroll < headerValue){ if(header_flg == true){ header_flg = false; startHeaderEffect('show'); } } } } /* * * windowサイズによって必要ないエフェクトをキャンセルする処理 * */ function checkWinWidth(){ var size = $(window).width(); var result = ''; //PCからTBサイズへ if(winStyle == 'PC' && size <= 1000){ winStyle = 'TB'; result = 'PCtoTB'; cancelEffect(result); } //TBからSPサイズへ if(winStyle == 'TB' && size <= 767){ winStyle = 'SP'; result = 'TBtoSP'; cancelEffect(result); } //SPからTBサイズへ if(winStyle == 'SP' && size >= 768){ winStyle = 'TB'; result = 'SPtoTB'; cancelEffect(result); } //TBからPCサイズへ if(winStyle == 'TB' && size > 1000){ winStyle = 'PC'; result = 'TBtoPC'; cancelEffect(result); } } /* * * サイズ変更後反映イベント * */ function cancelEffect(str){ var style = str; //PCからTBサイズへ if(style == 'PCtoTB'){ $('.main_txt_in').css('top', '50px'); $('.top .main_contents .effect_box01').css('top', '0px'); // $('.top .contents01_inner_box').css('top', '30px'); $('.top .contents01_in .effect_box02').css('top', '0'); // ヘッダーのサイズを削除 $('.header_block').css('marginTop', ''); $('.header_block h1').css('width', ''); $('.header_block .header_right img').css('width', ''); header_flg = false; // メニューボックスを表示 $('.top .contents02 .menu_effect_box').css('opacity', 1); } //TBからSPサイズへ if(style == 'TBtoSP'){ if(menu_flg == false){ menu_flg = true; } // ヘッダーのサイズを削除 $('.header_block').css('margin-top', ''); $('.header_block h1').css('width', ''); $('.header_block .header_right img').css('width', ''); header_flg = false; } //SPからTBサイズへ if(style == 'SPtoTB'){ $('.header_block').css('margin-top', ''); $('.top .contents02 .menu_effect_box').css('opacity', 1); //メニュー初期表示 $('#header_menu_block').css('display',''); //メニュー内部のサブメニュー初期表示 $('#header_menu_block').find('.submenu').css('display',''); //メニューのclickイベントを削除 $("#header_menu_block li").off('click'); header_flg = false; } //TBからPCサイズへ if(style == 'TBtoPC'){ $('.main_txt_in').css('top', '520px'); $('.top .main_contents .effect_box01').css('top', 'auto'); // $('.top .contents01_inner_box').css('top', '230px'); $('.top .contents01_in .effect_box02').css('top', 'auto'); checkUnderEffect(); } } /* * aタグクリック時の処理 */ function setPageAnimate(){ $('a:not([href*="#"])').click(function(e){ var attrValue = $(this).attr('href'); // スキーム名がhttpやhttpsではなければ、ページ遷移のアニメーションをさせない if(attrValue.indexOf(':') > -1){ var scheme = attrValue.substr(0,attrValue.indexOf(':')); if(scheme.indexOf('http') == -1){ return true; } } e.preventDefault(); // メールフォームでjavascript:void(0)がリンクに置換されてしまう対応 if(attrValue.indexOf('javascript:void') > -1){ // リンクにジャンプしない return false; } var targetValue = $(this).attr('target'); if(targetValue == "_blank"){ window.open(attrValue); return false; } $('body').animate({ backgroundColor: '#ffffff' }, 400 ); $('.wrapper').fadeOut(400, function(){ location.href = attrValue; }); }); } /* * * アンカーリンクへのスクロール * target_id アンカーのid * */ function scroll_anchor(target_id){ $('.header_menu .hover').removeClass('hover'); if(target_id == ""){ return; } // 画像の読み込みを待つため、100ms後に実行 setTimeout(function(){ var doc = $('body, html'); var param_index = target_id.indexOf('?'); if(param_index > -1){ target_id = target_id.substring(0,param_index-1); } if(target_id.substring(0,1) != '#'){ // 1文字目が#で無い場合には#を追加 target_id = '#' + target_id; } // スクロール完了までの時間 var scroll_speed = 800; // スクロール対象 var $target=$(target_id); if($target.length < 1){ return; } var targetY=$target.offset().top; var win_w = $(window).width(); if(ua_type != 'SP' && win_w >= 768){ targetY = targetY - $('#header').height(); } doc.animate({scrollTop: targetY},scroll_speed, '', function(){ // スクロール後に場所がずれていたら、戻す if(doc.scrollTop() != $target.offset().top ){ var targetY=$target.offset().top; var win_w = $(window).width(); if(ua_type != 'SP' && win_w >= 768){ targetY = targetY - $('#header').height(); } doc.scrollTop(targetY); } }); }, 100); } /* * * トップへボタン表示非表示 * str 表示フラグ('show' or 'hide') * */ function setPageTopBtn(str){ var type = str; if(type == 'hide'){ $('.btn_pageTop').fadeOut(); } else if(type == 'show'){ $('.btn_pageTop').fadeIn('fast'); } } function setTabletMenu(){ // タブレット用ヘッダーメニュー if(ua_type == 'TB' && win_w >= 768 ){ $('#header .header_menu .g_nav li span').off('click'); $('#header .header_menu .g_nav li span').on('click', function(e){ e.preventDefault(); if($(this).hasClass('hover')){ $(this).removeClass('hover'); $(this).siblings('.submenu').hide(); return; } // サブメニューをすべて非表示 $('.header_menu .g_nav .submenu').hide(); // .hover削除 $('.header_menu .g_nav span').removeClass('hover'); // サブメニュー表示・非表示 $(this).siblings('.submenu').toggle(); // .hover表示・非表示 $(this).toggleClass('hover'); }); } } function setSmartPhoneMenu(){ // スマホ用ヘッダーメニュー $('#header .btn_menu a').off('click') $('#header .btn_menu a').on('click', function(e){ e.preventDefault(); $('#header_menu_block').fadeToggle('slow'); //メニュー内部のサブメニュー初期表示 $('#header_menu_block').find('.submenu').css('display',''); // サブメニューイベントセット $("#header_menu_block li").each(function(){ if($(this).find('.submenu').length > 0){ $(this).find('span').off('click'); $(this).find('span').on('click', function(){ $(this).siblings(".submenu").slideToggle(); $(this).toggleClass("hover"); }); } }); }); } /* * * スマホPCイメージ切り替え * */ var $setElem = $('.changeImage'), pcName = '_pcimg', spName = '_spimg', replaceWidth = 601; $setElem.each(function(){ var $this = $(this); function imgWidth(){ var windowWidth = parseInt($(window).width()); if(windowWidth >= replaceWidth) { $this.attr('src',$this.attr('src').replace(spName,pcName)).css({visibility:'visible'}); } else if(windowWidth < replaceWidth) { $this.attr('src',$this.attr('src').replace(pcName,spName)).css({visibility:'visible'}); } } $(window).resize(function(){imgWidth();}); imgWidth(); }); /* * * userAgent判別 * */ function checkUA() { //UAオブジェクト ua = window.navigator.userAgent; //スマートフォン if( (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1)) { ua_type = 'SP'; // AndroidでMobileが入っていても、画面サイズが768以上はタブレットとして扱う if(ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){ var win_w = $(window).width(); if(win_w >= 768){ ua_type = 'TB'; } } //タブレット } else if(ua.indexOf('Android') > 0 || ua.indexOf('iPad') > 0){ ua_type = 'TB'; // タブレットでも、画面サイズが767以下はスマホとして扱う if(ua.indexOf('Android') > 0){ var win_w = $(window).width(); if(win_w <= 767){ ua_type = 'SP'; } } //PC } else { ua_type = 'PC'; } // タブレットの場合、bodyのclassにtabletを追加 if(ua_type == 'TB'){ $('body').addClass('tablet'); }else{ $('body').removeClass('tablet'); } } /* * * browzer判別 * */ function checkBrowzer() { //ブラウザがwebkitかどうか if(ua.indexOf('WebKit') > 0){ isWebkit = true; } //ブラウザがFirefoxかどうか if(ua.indexOf('Firefox') > 0){ isFF = true; } //ブラウザがIEかどうか if(ua.indexOf('MSIE') > 0){ isIE = true; } } /* * * tablet判別 * */ function isTabs(){ var userAgent = window.navigator.userAgent.toLowerCase(); if((navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') == -1) || navigator.userAgent.indexOf('A1_07') > 0 || navigator.userAgent.indexOf('SC-01C') > 0 || navigator.userAgent.indexOf('iPad') > 0){ // 処理しない tab return true; }else{ // 処理しない pc return false; } }