https://tawaramoton.com/wp/wp-content/themes/kanko/js/site.js

1// JavaScript Document
2/* ------------------------------------
3 * ローディング
4 *-------------------------------------*/
5/* ページトップ
6 *-------------------------------------*/
7/* colorbox（プラグイン実行） */
8/*-------------------------------------*/
9/* swiper（プラグイン実行） */
10/*-------------------------------------*/
11
12
13/*-------------------------------------*/
14 // ローディング
15/*-------------------------------------*/
16//テキストのカウントアップ+バーの設定
17var bar = new ProgressBar.Line(splash_text, {//id名を指定
18	easing: 'easeInOut',//アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能
19	duration: 1000,//時間指定(1000＝1秒)
20	strokeWidth: 0.2,//進捗ゲージの太さ
21	color: '#555',//進捗ゲージのカラー
22	trailWidth: 0.2,//ゲージベースの線の太さ
23	trailColor: '#bbb',//ゲージベースの線のカラー
24	text: {//テキストの形状を直接指定				
25		style: {//天地中央に配置
26			position: 'absolute',
27			left: '50%',
28			top: '50%',
29			padding: '0',
30			margin: '-30px 0 0 0',//バーより上に配置
31			transform:'translate(-50%,-50%)',
32			'font-size':'1rem',
33			color: '#fff',
34		},
35		autoStyleContainer: false //自動付与のスタイルを切る
36	},
37	step: function(state, bar) {
38		bar.setText(Math.round(bar.value() * 100) + ' %'); //テキストの数値
39	}
40});
41
42//アニメーションスタート
43bar.animate(1.0, function () {//バーを描画する割合を指定します 1.0 なら100%まで描画します
44	$("#splash").delay(500).fadeOut(800);//アニメーションが終わったら#splashエリアをフェードアウト
45});  
46
47
48
49/*-------------------------------------*/
50 // ページトップ
51/*-------------------------------------*/
52
53//スムーズスクロール
54	var isHtmlScrollable = (function(){
55		var html = $('html'), top = html.scrollTop();
56		var elm = $('<div/>').height(1500).prependTo('body');
57		html.scrollTop(1500);
58		var rs = !!html.scrollTop();
59		html.scrollTop(top);
60		elm.remove();
61		return rs;
62	})();
63
64
65jQuery(document).ready(function($) {
66	//表示
67	const ua = navigator.userAgent;
68	    if (ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)) {
69	        $('.layout-footer').after('<div class="tothetop"><a href="https://tawaramoton.com/wp/wp-content/themes/kanko/images/map_2020.png">page top</a></div>');
70	    } else if (ua.indexOf('iPad') > -1 || ua.indexOf('Android') > -1) {
71	        $('.layout-footer').after('<div class="tothetop"><a href="https://tawaramoton.com/wp/wp-content/themes/kanko/images/map_2020.png">page top</a></div>');
72	    } else {
73		$('.layout-footer').after('<div class="tothetop"><a href="https://tawaramoton.com/wp/wp-content/themes/kanko/images/map_side.png">page top</a></div>');
74	}
75
76
77	var topBtn = $('.tothetop');
78	topBtn.hide();
79
80	$(window).scroll(function () {
81		if ($(this).scrollTop() > 800) {
82			topBtn.fadeIn();
83		} else {
84			topBtn.fadeOut();
85		}
86	});
87		
88	//ページ内リンクとページトップへの移動
89	$('a[href=#]').click(function () {
90		//スピード調整
91			var hrefval= $(this).attr('href');
92			//console.log(hrefval);
93			var positiontop;
94			var speed;
95			
96			if(hrefval == "#") {
97				positiontop = 0;
98				speed = 200 + $(this).offset().top /30;
99			}else{
100				var targetelement = $(hrefval);
101				positiontop = targetelement.offset().top -100;
102				speed = 200 + (positiontop + 120) / 30;
103			}
104			
105			$(isHtmlScrollable ? 'html' : 'body').animate({
106					scrollTop: positiontop
107			},  speed);
108			return false;
109			
110			/* 基本
111				$(isHtmlScrollable ? 'html' : 'body').animate({
112				scrollTop: 0
113				}, 500);
114				return false;*/
115			
116	}); 
117
118/*   アニメーションさせたくない要素がある場合 
119    $('a[href^=#]').not('アニメーションさせない a 要素').click(function(){
120    var hrefval= $(this).attr('href');
121    var targetelement = hrefval == "#" ? $('html') : $(hrefval);
122    var positiontop = targetelement.offset().top;
123    $(isHtmlScrollable ? 'html' : 'body').animate({
124    scrollTop: positiontop
125    }, 500);
126    return false;

127    });
128*/
129});
130/*-------------------------------------*/
131//  colorbox
132/*-------------------------------------*/
133/*$(function() {
134    $(".inline").colorbox({
135    inline:true,
136    maxWidth:"90%",
137    maxHeight:"90%",
138    opacity: 0.7
139  });
140
141    $(".gallery").colorbox({
142    rel:'slideshow',
143    slideshow:true,
144    slideshowSpeed:3000,
145    maxWidth:"90%",
146    maxHeight:"90%",
147    opacity: 0.7
148  });
149});
150
151*/
152
153/*-------------------------------------*/
154 // swiper
155/*-------------------------------------*/
156/*var mySwiper = new Swiper ('.swiper-container', {
157        // オプションパラメータ(一部のみ抜粋)
158        loop: true, // 最後のスライドまで到達した場合、最初に戻らずに続けてスライド可能にするか。
159        speed: 1000, // スライドが切り替わるトランジション時間(ミリ秒)。
160        slidesPerView: 1, // 何枚のスライドを表示するか
161        //spaceBetween: 10, // スライド間の余白サイズ(ピクセル)
162        direction: 'horizontal', // スライド方向。 'horizontal'(水平) か 'vertical'(垂直)。effectオプションが 'slide' 以外は無効。
163        effect: 'cube', // "slide", "fade"(フェード), "cube"(キューブ回転), "coverflow"(カバーフロー) または "flip"(平面回転)
164     
165        // スライダーの自動再生
166        // autoplay: true 　のみなら既定値での自動再生
167        autoplay: {
168          delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒)
169          stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
170          disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか
171        },
172      
173// レスポンシブ化条件
174/*        breakpoints: {
175          // 980ピクセル幅以下になったら
176          980: {
177            slidesPerView: 3,
178            spaceBetween: 30
179          },
180          // 640ピクセル幅以下になったら
181          640: {
182            slidesPerView: 2,
183            spaceBetween: 20
184          }
185        },*/
186// ページネーションを表示する場合
187/*        pagination: {
188          el: '.swiper-pagination',　 // ページネーションを表示するセレクタ
189        },*/
190     
191// 前後スライドへのナビゲーションを表示する場合
192/*        navigation: {
193          nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ
194          prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ
195        },*/
196     
197// スクロールバーを表示する場合
198/*<!--        scrollbar: {
199          el: '.swiper-scrollbar', // スクロールバーを表示するセレクタ
200        }*/
201//      });