https://tinect.jp/wp-content/themes/the-thor/assets/js/script.js

1/*
2 * script.js
3 *
4 */
5
6
7 /*********************************************************************************************/
8//HumbergerMenu
9/*********************************************************************************************/
10	(function($) {
11    $(function() {
12        $('#nav-toggle').click(function(){
13            $('body').toggleClass('open');
14        });
15    });
16	})(jQuery);
17
18
19/*********************************************************************************************/
20//オープニングアニメーション
21/**********************************************************************************************/
22
23(function ($) {
24  'use strict';
25  $(window).on('load',function(){
26    $('body').addClass('appear');
27   });
28})(jQuery);
29
30
31
32
33/*********************************************************************************************/
34//bgScale
35/**********************************************************************************************/
36if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
37$(window).scroll(function() {
38  var scroll = $(window).scrollTop();
39  $('.product__firstImg').css({
40    backgroundSize: (80 + scroll/50)  + "%",
41  });
42});
43}
44
45/*********************************************************************************************/
46//要素の出現
47/**********************************************************************************************/
48
49   const getRandomInt = (min, max) => {
50  return Math.floor(Math.random() * (max - min) + min);
51}
52
53const ScrollAnimation = {
54  instance: undefined,
55  set() {
56    this.instance = new IntersectionObserver(
57      (entries) => {
58        entries.forEach((entry) => {
59          if(entry.isIntersecting) {
60            entry.target.classList.add('is-active');
61          /*} else {
62            entry.target.classList.remove('is-active');*/
63          }
64        });
65      },
66      {
67        root: null,
68        rootMargin: '0px',
69        threshold: 0,
70      }
71    );
72    
73    const blocks = document.querySelectorAll('.title-anm');
74    blocks.forEach((block) => {
75      this.instance.observe(block);
76    });
77  },
78};
79
80
81
82const SplitText = (target) => {
83  const splitElm = document.querySelectorAll(target);
84  splitElm.forEach((el, index) => {
85    let text = el.textContent;
86    el.textContent = '';
87    text = text.split('');
88    let newText = '';
89    text.forEach((t, index) => {
90      newText += `<span data-random="${getRandomInt(1, 8)}">${t}</span>`;
91    });
92    el.insertAdjacentHTML('beforeend', newText);
93  });
94};
95
96window.addEventListener('DOMContentLoaded', () => {
97  SplitText('.text-split');
98  ScrollAnimation.set();
99});
100
101
102	  
103/*スクロールに合わせて jQueryプラグイン（+ jQuery Easing Plugin）*/
104
105// トリガー取得
106$(function () {
107    // aimation呼び出し
108    // ページ内に.js-scroll-triggerが存在したら実行
109    if ($('.scr-trigger').length) {
110        scrollAnimation();
111    }
112
113    // aimation関数
114    function scrollAnimation() {
115        $(window).scroll(function () {
116            $(".scr-trigger").each(function () {
117                let position = $(this).offset().top,
118                    scroll = $(window).scrollTop(),
119                    windowHeight = $(window).height();
120
121                if (scroll > position - windowHeight + 0) {
122                    $(this).addClass('is-active');
123                }
124            });
125        });
126    }
127    $(window).trigger('scroll');
128});
129
130//
131
132
133/*fade出現*/
134$(window).scroll(function(){
135 var windowHeight = $(window).height(),
136     topWindow = $(window).scrollTop();
137 $('.fade_box').each(function(){
138  var targetPosition = $(this).offset().top;
139  if(topWindow > targetPosition - windowHeight - 150){
140   $(this).removeClass("fade_box");
141  }
142 });
143});
144
145/* curtain */
146$(window).scroll(function(){
147var b=$(window).height(),
148	a=$(window).scrollTop();
149	$(".curtainIn").each(function(){
150	var c=$(this).offset().top;if(a>c-b+150){
151		$(this).addClass("ef-animation")}
152	})});
153
154
155
156/*********************************************************************************************/
157//accordion
158/**********************************************************************************************/
159
160
161jQuery(function(){
162	jQuery('.sec-Svs-Cptr__Ttl:first').addClass('selected');

163	jQuery('.sec-Svs-Qa__Ttl,.sec-Svs-Cptr__Ttl').click(function(){
164		jQuery(this).toggleClass('selected');
165		jQuery(this).next().slideToggle();
166	});
167});
168
169
170jQuery(function(){
171	jQuery('.toggle_title').click(function(){
172		jQuery(this).toggleClass('selected');
173		jQuery(this).next().slideToggle();
174	});
175});
176
177
178
179
180
181
182
183/*********************************************************************************************/
184// スマホのタッチ機能をhoverに合わせる (Jquery)   ※記述変わる　:hover→.hover
185/*********************************************************************************************/
186(function () {
187	var tapClass = "";
188	var hoverClass = "";
189	var Hover = window.Hover = function (ele) {
190	return new Hover.fn.init(ele);
191	};
192	Hover.fn = {
193	//Hover Instance
194	init : function (ele) {
195	this.prop = ele;
196	}
197	, bind : function (_hoverClass, _tapClass) {
198	hoverClass = _hoverClass;
199	tapClass = _tapClass;
200	$(window).bind("touchstart", function(event) {
201	var target = event.target || window.target;
202	var bindElement = null;
203	if (target.tagName == "A" || $(target).hasClass(tapClass)) {
204	bindElement = $(target);
205	} else if ($(target).parents("a").length > 0) {
206	bindElement = $(target).parents("a");
207	} else if ($(target).parents("." + tapClass).length > 0) {
208	bindElement = $(target).parents("." + tapClass);
209	}
210	if (bindElement != null) {
211	Hover().touchstartHoverElement(bindElement);
212	}
213	});
214	}
215	, touchstartHoverElement : function (bindElement) {
216	bindElement.addClass(hoverClass);
217	bindElement.unbind("touchmove", Hover().touchmoveHoverElement);
218	bindElement.bind("touchmove", Hover().touchmoveHoverElement);
219	bindElement.unbind("touchend", Hover().touchendHoverElement);
220	bindElement.bind("touchend", Hover().touchendHoverElement);
221	}
222	, touchmoveHoverElement : function (event) {
223	$(this).removeClass(hoverClass);
224	}
225	, touchendHoverElement : function (event) {
226	$(this).removeClass(hoverClass);
227	}
228	}
229	Hover.fn.init.prototype = Hover.fn;
230	Hover().bind("hover", "tap");
231	}
232)();
233
234
235/*********************************************************************************************/
236// PageTop
237/*********************************************************************************************/
238
239jQuery(function(){
240	//ボタン[id:page-top]を出現させるスクロールイベント
241	jQuery(window).scroll(function(){
242		//最上部から現在位置までの距離を取得して、変数[now]に格納
243		var now = jQuery(window).scrollTop();
244
245		//最下部から現在位置までの距離を計算して、変数[under]に格納
246		var under = jQuery('body').height() - (now + jQuery(window).height());
247 
248		//最上部から現在位置までの距離(now)が1500以上かつ
249		//最下部から現在位置までの距離(under)が200px以上だったら
250		if(now > 300){
251			//[#page-top]をゆっくりフェードインする
252			jQuery('#page-top').fadeIn('slow');
253		//それ以外だったらフェードアウトする
254		}else{
255			jQuery('#page-top').fadeOut('slow');
256		}
257	});
258 
259	//ボタン(id:move-page-top)のクリックイベント
260	jQuery('#move-page-top').click(function(){
261		//ページトップへ移動する
262		jQuery('html,body').animate({scrollTop:0},'slow');
263	});
264});
265
266
267
268/*********************************************************************************************/
269// スマホで閲覧時のみ電話番号適用
270/*********************************************************************************************/
271
272$(function() {
273  $('.tel').each(function() {
274//.tel内のHTMLを取得
275    var str = $(this).html();
276//子要素がimgだった場合、alt属性を取得して電話番号リンクを追加
277    if ($(this).children().is('img')) {
278      $(this).html($('<a>').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + '</a>'));
279    } else {
280//それ以外はテキストを取得して電話番号リンクを追加
281      $(this).html($('<a>').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + '</a>'));
282    }
283  });
284});
285
286
287
288