$(function() {
//---------------------------------------------
// 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);
//---------------------------------------------
// ローディング画面
//---------------------------------------------
$(window).on('load', function(){
var loading = $("#loading");
//ローディングエリアを隠す処理
var isHidden = function(){
loading.fadeOut(1000); //1000ミリ秒かけてフェードアウト
$("body").removeClass("js-no-scroll");
};
//1000ミリ秒後にloadingFunc開始
setTimeout(isHidden,1000);
});
//---------------------------------------------
// タイムライン
//---------------------------------------------
//線が伸びるための設定を関数でまとめる
function ScrollTimelineAnime(){
$('.timeline li').each(function(){// それぞれのli要素の
var elemPos = $(this).offset().top;// 上からの高さ取得
var scroll = $(window).scrollTop();// スクロール値取得
var windowHeight = $(window).height();// windowの高さ取得
var startPoint = 300; //線をスタートさせる位置を指定※レイアウトによって調整してください
if (scroll >= elemPos - windowHeight-startPoint){
var H = $(this).outerHeight(true)//liの余白と高さを含めた数値を取得
//スクロール値から要素までの高さを引いた値を、liの高さの半分のパーセントで出す
var percent = (scroll+startPoint - elemPos) / (H/2) *100;//liの余白と高さの半分で線を100%に伸ばす
// 100% を超えたらずっと100%を入れ続ける
if(percent > 100){
percent = 100;
}
// ボーダーの長さをセット
$(this).children('.border-line').css({
height: percent + "%", //CSSでパーセント指定
});
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).on('scroll', function(){
ScrollTimelineAnime();// 線が伸びる関数を呼ぶ
});
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
ScrollTimelineAnime();// 線が伸びる関数を呼ぶ
});
});