https://www.hiroden-kensetsu.co.jp/wp/wp-content/themes/hiroden-corporation-test/js/script.js

1// トップページ　事業内容エフェクト
2//背景色が一回出て、画像が表示される
3//https://tympanus.net/Development/BlockRevealers/
4
5//建築事業
6$(function() {
7setTimeout(init, 10);
8function init() {
9var scrollElemToWatch_1 = document.getElementById('effect_01'),      //idを指定
10watcher_1 = scrollMonitor.create(scrollElemToWatch_1, -100), //監視領域を設定
11rev1 = new RevealFx(scrollElemToWatch_1, {
12revealSettings : {
13//ボックスの設定
14bgcolor: '#006934',
15duration: 700,
16onStart: function(contentEl, revealerEl) {
17anime.remove(contentEl);
18contentEl.style.opacity = 0;
19},
20onCover: function(contentEl, revealerEl) {
21contentEl.style.opacity = 1;
22anime({
23//表示要素の設定 (Sample text箇所)
24targets: contentEl,
25easing: 'easeOutExpo',
26});
27}
28}
29})
30watcher_1.enterViewport(function() { //監視領域に入ったら実行
31rev1.reveal();                     //アニメーション実行
32watcher_1.destroy();               //一度のみ実行する場合記述
33});
34}
35});
36
37//不動産住宅事業
38$(function() {
39setTimeout(init, 10);
40function init() {
41var scrollElemToWatch_2 = document.getElementById('effect_02'),      //idを指定
42watcher_2 = scrollMonitor.create(scrollElemToWatch_2, -100), //監視領域を設定
43rev2 = new RevealFx(scrollElemToWatch_2, {
44revealSettings : {
45//ボックスの設定
46bgcolor: '#006934',
47duration: 700,
48onStart: function(contentEl, revealerEl) {
49anime.remove(contentEl);
50contentEl.style.opacity = 0;
51},
52onCover: function(contentEl, revealerEl) {
53contentEl.style.opacity = 1;
54anime({
55//表示要素の設定 (Sample text箇所)
56targets: contentEl,
57easing: 'easeOutExpo',
58});
59}
60}
61})
62watcher_2.enterViewport(function() { //監視領域に入ったら実行
63rev2.reveal();                     //アニメーション実行
64watcher_2.destroy();               //一度のみ実行する場合記述
65});
66}
67});
68
69//土木事業
70$(function() {
71setTimeout(init, 10);
72function init() {
73var scrollElemToWatch_3 = document.getElementById('effect_03'),      //idを指定
74watcher_3 = scrollMonitor.create(scrollElemToWatch_3, -100), //監視領域を設定
75rev3 = new RevealFx(scrollElemToWatch_3, {
76revealSettings : {
77//ボックスの設定
78bgcolor: '#006934',
79duration: 700,
80onStart: function(contentEl, revealerEl) {
81anime.remove(contentEl);
82contentEl.style.opacity = 0;
83},
84onCover: function(contentEl, revealerEl) {
85contentEl.style.opacity = 1;
86anime({
87//表示要素の設定 (Sample text箇所)
88targets: contentEl,
89easing: 'easeOutExpo',
90});
91}
92}
93})
94watcher_3.enterViewport(function() { //監視領域に入ったら実行
95rev3.reveal();                     //アニメーション実行
96watcher_3.destroy();               //一度のみ実行する場合記述
97});
98}
99});
100
101//鉄道軌道事業
102$(function() {
103setTimeout(init, 10);
104function init() {
105var scrollElemToWatch_4 = document.getElementById('effect_04'),      //idを指定
106watcher_4 = scrollMonitor.create(scrollElemToWatch_4, -100), //監視領域を設定
107rev4 = new RevealFx(scrollElemToWatch_4, {
108revealSettings : {
109//ボックスの設定
110bgcolor: '#006934',
111duration: 700,
112onStart: function(contentEl, revealerEl) {
113anime.remove(contentEl);
114contentEl.style.opacity = 0;
115},
116onCover: function(contentEl, revealerEl) {
117contentEl.style.opacity = 1;
118anime({
119//表示要素の設定 (Sample text箇所)
120targets: contentEl,
121easing: 'easeOutExpo',
122});
123}
124}
125})
126watcher_4.enterViewport(function() { //監視領域に入ったら実行
127rev4.reveal();                     //アニメーション実行
128watcher_4.destroy();               //一度のみ実行する場合記述
129});
130}
131});
132
133//会社案内
134$(function() {
135setTimeout(init, 10);
136function init() {
137var scrollElemToWatch_5 = document.getElementById('effect_05'),      //idを指定
138watcher_5 = scrollMonitor.create(scrollElemToWatch_5, -100), //監視領域を設定
139rev5 = new RevealFx(scrollElemToWatch_5, {
140revealSettings : {
141//ボックスの設定
142bgcolor: '#006934',
143duration: 700,
144onStart: function(contentEl, revealerEl) {
145anime.remove(contentEl);
146contentEl.style.opacity = 0;
147},
148onCover: function(contentEl, revealerEl) {
149contentEl.style.opacity = 1;
150anime({
151//表示要素の設定 (Sample text箇所)
152targets: contentEl,
153easing: 'easeOutExpo',
154});
155}
156}
157})

158watcher_5.enterViewport(function() { //監視領域に入ったら実行
159rev5.reveal();//アニメーション実行
160watcher_5.destroy();//一度のみ実行する場合記述
161});
162}
163});
164
165//採用情報
166$(function() {
167setTimeout(init, 10);
168function init() {
169var scrollElemToWatch_6 = document.getElementById('effect_06'),      //idを指定
170watcher_6 = scrollMonitor.create(scrollElemToWatch_6, -100), //監視領域を設定
171rev6 = new RevealFx(scrollElemToWatch_6, {
172revealSettings : {
173//ボックスの設定
174bgcolor: '#006934',
175duration: 700,
176onStart: function(contentEl, revealerEl) {
177anime.remove(contentEl);
178contentEl.style.opacity = 0;
179},
180onCover: function(contentEl, revealerEl) {
181contentEl.style.opacity = 1;
182anime({
183//表示要素の設定 (Sample text箇所)
184targets: contentEl,
185easing: 'easeOutExpo',
186});
187}
188}
189})
190watcher_6.enterViewport(function() { //監視領域に入ったら実行
191rev6.reveal();//アニメーション実行
192watcher_6.destroy();//一度のみ実行する場合記述
193});
194}
195});
196
197//footer_cards 建築事業
198$(function() {
199setTimeout(init, 10);
200function init() {
201var scrollElemToWatch_7 = document.getElementById('worlks_cards_effect1'),      //idを指定
202watcher_7 = scrollMonitor.create(scrollElemToWatch_7, -100), //監視領域を設定
203rev7 = new RevealFx(scrollElemToWatch_7, {
204revealSettings : {
205//ボックスの設定
206bgcolor: '#006934',
207duration: 700,
208onStart: function(contentEl, revealerEl) {
209anime.remove(contentEl);
210contentEl.style.opacity = 0;
211},
212onCover: function(contentEl, revealerEl) {
213contentEl.style.opacity = 1;
214anime({
215//表示要素の設定 (Sample text箇所)
216targets: contentEl,
217easing: 'easeOutExpo',
218});
219}
220}
221})
222watcher_7.enterViewport(function() { //監視領域に入ったら実行
223rev7.reveal();//アニメーション実行
224watcher_7.destroy();//一度のみ実行する場合記述
225});
226}
227});
228
229//footer_cards 不動産住宅事業
230$(function() {
231setTimeout(init, 10);
232function init() {
233var scrollElemToWatch_8 = document.getElementById('worlks_cards_effect2'),      //idを指定
234watcher_8 = scrollMonitor.create(scrollElemToWatch_8, -100), //監視領域を設定
235rev8 = new RevealFx(scrollElemToWatch_8, {
236revealSettings : {
237//ボックスの設定
238bgcolor: '#006934',
239duration: 700,
240onStart: function(contentEl, revealerEl) {
241anime.remove(contentEl);
242contentEl.style.opacity = 0;
243},
244onCover: function(contentEl, revealerEl) {
245contentEl.style.opacity = 1;
246anime({
247//表示要素の設定 (Sample text箇所)
248targets: contentEl,
249easing: 'easeOutExpo',
250});
251}
252}
253})
254watcher_8.enterViewport(function() { //監視領域に入ったら実行
255rev8.reveal();//アニメーション実行
256watcher_8.destroy();//一度のみ実行する場合記述
257});
258}
259});
260
261//footer_cards 土木事業
262$(function() {
263setTimeout(init, 10);
264function init() {
265var scrollElemToWatch_9 = document.getElementById('worlks_cards_effect3'),      //idを指定
266watcher_9 = scrollMonitor.create(scrollElemToWatch_9, -100), //監視領域を設定
267rev9 = new RevealFx(scrollElemToWatch_9, {
268revealSettings : {
269//ボックスの設定
270bgcolor: '#006934',
271duration: 700,
272onStart: function(contentEl, revealerEl) {
273anime.remove(contentEl);
274contentEl.style.opacity = 0;
275},
276onCover: function(contentEl, revealerEl) {
277contentEl.style.opacity = 1;
278anime({
279//表示要素の設定 (Sample text箇所)
280targets: contentEl,
281easing: 'easeOutExpo',
282});
283}
284}
285})
286watcher_9.enterViewport(function() { //監視領域に入ったら実行
287rev9.reveal();//アニメーション実行
288watcher_9.destroy();//一度のみ実行する場合記述
289});
290}
291});
292
293//footer_cards 鉄道軌道事業
294$(function() {
295setTimeout(init, 10);
296function init() {
297var scrollElemToWatch_10 = document.getElementById('worlks_cards_effect4'),      //idを指定
298watcher_10 = scrollMonitor.create(scrollElemToWatch_10, -100), //監視領域を設定
299rev10 = new RevealFx(scrollElemToWatch_10, {
300revealSettings : {
301//ボックスの設定
302bgcolor: '#006934',
303duration: 700,
304onStart: function(contentEl, revealerEl) {
305anime.remove(contentEl);
306contentEl.style.opacity = 0;
307},
308onCover: function(contentEl, revealerEl) {
309contentEl.style.opacity = 1;
310anime({
311//表示要素の設定 (Sample text箇所)
312targets: contentEl,
313easing: 'easeOutExpo',
314});
315}
316}
317})

318watcher_10.enterViewport(function() { //監視領域に入ったら実行
319rev10.reveal();//アニメーション実行
320watcher_10.destroy();//一度のみ実行する場合記述
321});
322}
323});
324
325
326//hmgメニュー
327$('.menu').on('click',function(){
328$('.menu__line').toggleClass('active');
329$('.gnav').fadeToggle();
330});
331
332//sitemap
333$(function(){
334$('#footer_sitemap .bt').click(function () {
335$('#footer_sitemap').toggleClass('active');
336var position = $("#footer_sitemap").offset().top;
337$("html,body").animate({
338scrollTop : position
339}, {
340queue : false
341});
342});
343})
344
345
346// トップページ FV スライドショー
347// 参考サイト
348//https://codepen.io/toby1234/pen/VwmqpJw
349// https://codepen.io/jonathan/pen/qqmBjQ
350// https://rfs.jp/sb/javascript/03js/greensock.html
351var $slider = $(".top-slide");
352var $slides = $slider.find(".top-slide__list");
353var $navPrev = $(".top-slide__prev");
354var $navNext = $(".top-slide__next");
355var slidesNum = $slides.length;
356var prevSlideID = null;
357var currentSlideID = 0;
358var isAnimating = false;
359var isAutoPlay = true;
360
361function init() {
362$navPrev.on("click", gotoPrevSlide);
363$navNext.on("click", gotoNextSlide);
364gotoSlide(0, 0);//最初からAutoPlay
365gotoNextSlide();//最初からAutoPlay
366TweenLite.delayedCall(4, play); //第一関数は、次のスライドへのスピード調整
367}
368
369function gotoPrevSlide() {
370var slideToGo = currentSlideID - 1;
371if (slideToGo <= -1) {
372slideToGo = slidesNum - 1;
373}
374stopAutoPlay();//ページャーをクリックするとAutoPlayが止まる
375gotoSlide(slideToGo, 0, "prev");//第二関数は、次のスライドが始まるまでの秒数。今回は直ぐに切り替えたいので0に設定。
376}
377
378function gotoNextSlide() {
379var slideToGo = currentSlideID + 1;
380if (slideToGo >= slidesNum) {
381slideToGo = 0;
382}
383stopAutoPlay();//ページャーをクリックするとAutoPlayが止まる
384gotoSlide(slideToGo, 0, "next");//第二関数は、次のスライドが始まるまでの秒数。今回は直ぐに切り替えたいので0に設定。
385}
386

387function gotoSlide(slideID, _time, _direction) {
388if (!isAnimating) {
389isAnimating = true;
390prevSlideID = currentSlideID;
391currentSlideID = slideID;
392var $prevSlide = $slides.eq(prevSlideID);
393var $prevSlideChild = $prevSlide.children(".top-content");
394var $currentSlide = $slides.eq(currentSlideID);
395var $currentSlideChild = $currentSlide.children(".top-content");
396$currentSlide.removeClass("is-old").addClass("is-now");
397var time = 0;//次のスライドが始まるまでの秒数。今回は直ぐに切り替えたいので0に設定。
398if (_time !== null) {
399time = _time;
400}
401var direction = "next";
402if (_direction != null) {
403direction = _direction;
404}
405if (direction == "next") {
406$slides.removeClass("is-old");
407TweenLite.fromTo(
408$prevSlide,
409time,
410{ css: { className: "-=is-now" } },
411{ css: { className: "+=is-old" } }
412);
413TweenLite.fromTo(
414$currentSlide,
415time,
416{ css: { className: "-=is-old" } },
417{ css: { className: "+=is-now" } }
418);
419} else {
420$slides.removeClass("is-old");
421TweenLite.fromTo(
422$prevSlide,
423time,
424{ css: { className: "-=is-now" } },
425{ css: { className: "+=is-old" } }
426);
427TweenLite.fromTo(
428$currentSlide,
429time,
430{ css: { className: "-=is-old" } },
431{ css: { className: "+=is-now" } }
432);
433}
434TweenLite.delayedCall(time, function () {
435isAnimating = false;
436});
437}
438}
439function play() {
440gotoNextSlide();
441TweenLite.delayedCall(4, play); //第一関数は、次のスライドへのスピード調整
442}
443function startAutoPlay(immediate) {
444if (immediate) {
445gotoNextSlide();
446}
447TweenLite.delayedCall(4, play); //第一関数は、次のスライドへのスピード調整
448}
449function stopAutoPlay() {
450isAutoPlay = false;
451TweenLite.killDelayedCallsTo(play);
452}
453init();
454
455// スマホ時のスワイプ機能=============================
456// 参考サイト
457// https://qiita.com/Hijiri-K/items/5ad5eaec10c0e7921ada
458$(function () {
459$(".js-touch").on("touchstart", onTouchStart); //指が触れたか検知
460$(".js-touch").on("touchmove", onTouchMove); //指が動いたか検知
461$(".js-touch").on("touchend", onTouchEnd); //指が離れたか検知
462var touchDirection, touchPosition;
463
464//スワイプ開始時の横方向の座標を格納
465function onTouchStart(event) {
466touchPosition = getPosition(event);
467touchDirection = ""; //一度リセットする
468}
469//スワイプの方向（left/right）を取得
470function onTouchMove(event) {
471if (touchPosition - getPosition(event) > 70) {
472//70px以上移動しなければスワイプと判断しない
473touchDirection = "left"; //左と検知
474} else if (touchPosition - getPosition(event) < -70) {
475//70px以上移動しなければスワイプと判断しない
476touchDirection = "right"; //右と検知
477}
478}
479function onTouchEnd(event) {
480if (touchDirection == "right") {
481gotoPrevSlide();
482} else if (touchDirection == "left") {
483gotoNextSlide();
484}
485}
486//横方向の座標を取得
487function getPosition(event) {
488return event.originalEvent.touches[0].pageX;
489}
490});
491
492
493//「いい家族づくり」から「いい街づくり」まで。
494// スクロールして領域に入ったら　要素がスライドインする
495// https://125naroom.com/web/3532
496$(function(){
497$(".catch-text").on("inview", function (event, isInView) {
498if (isInView) {
499$(this).stop().addClass("fade-in-bottom");
500} else {
501$(this).stop().removeClass("fade-in-bottom");
502}
503});
504});
505
506
507//PC header　プルダウンメニュー hoverしたときにcontactにborder-bottomをつけるため
508$(document).ready(function () {
509$(".dropmenu").hover(
510function () {
511$(".menu_item_contact").addClass("contact-borderbottom");
512},
513function () {
514$(".menu_item_contact").removeClass("contact-borderbottom");
515}
516);
517});
518
519
520
521//事業内容の画像とカードをhoverしたら、画像が縮小する
522//.hover-service_scaledownをhoverしたら.service_imgにclass="service_scaledown_img"が追加される。
523$(document).ready(function () {
524$(".hover-service1").hover(
525function () {
526$(".service_img1").addClass("service_scaledown_img");
527},
528function () {
529$(".service_img1").removeClass("service_scaledown_img");
530}
531);
532$(".hover-service1").hover(
533function () {
534$(".card1").addClass("card_hover");
535},
536function () {
537$(".card1").removeClass("card_hover");
538}
539);
540});
541
542$(document).ready(function () {
543$(".hover-service2").hover(
544function () {
545$(".service_img2").addClass("service_scaledown_img");
546},
547function () {
548$(".service_img2").removeClass("service_scaledown_img");
549}
550);
551$(".hover-service2").hover(
552function () {
553$(".card2").addClass("card_hover");
554},
555function () {
556$(".card2").removeClass("card_hover");
557}
558);
559});
560
561$(document).ready(function () {
562$(".hover-service3").hover(
563function () {
564$(".service_img3").addClass("service_scaledown_img");
565},
566function () {
567$(".service_img3").removeClass("service_scaledown_img");
568}
569);
570$(".hover-service3").hover(
571function () {
572$(".card3").addClass("card_hover");
573},
574function () {
575$(".card3").removeClass("card_hover");
576}
577);
578});
579
580$(document).ready(function () {
581$(".hover-service4").hover(
582function () {
583$(".service_img4").addClass("service_scaledown_img");
584},
585function () {
586$(".service_img4").removeClass("service_scaledown_img");
587}
588);
589$(".hover-service4").hover(
590function () {
591$(".card4").addClass("card_hover");
592},
593function () {
594$(".card4").removeClass("card_hover");
595}
596);
597});
598
599
600//footerサイトマップ　クリックしたらプラスマイナスが切り替わる
601$(function() {
602$('.bt').click(function() {
603$('.toggle').toggleClass('toggle-active');
604});
605});
606
607
608//アコーディオンをクリックした時の動作
609$('.recruit-name').on('click', function() {//タイトル要素をクリックしたら
610    var findElm = $(this).next(".recruit-box");//直後のアコーディオンを行うエリアを取得し
611    $(findElm).slideToggle('slow');//アコーディオンの上下動作
612      
613    if($(this).hasClass('close')){//タイトル要素にクラス名closeがあれば
614      $(this).removeClass('close');//クラス名を除去し
615    }else{//それ以外は
616      $(this).addClass('close');//クラス名closeを付与
617    }
618  });
619  //ページが読み込まれた際にopenクラスをつけ、openがついていたら開く動作※不必要なら下記全て削除
620  $(window).on('load', function(){
621    $('table-wrapper').addClass("open");

621 //accordion-areaのはじめのliにあるsectionにopenクラスを追加
622    $(".open").each(function(index, element){ //openクラスを取得
623      var Title =$(element).children('.recruit-name'); //openクラスの子要素のtitleクラスを取得
624      $(Title).addClass('close');       //タイトルにクラス名closeを付与し
625      var Box =$(element).children('.recruit-box'); //openクラスの子要素boxクラスを取得
626      $(Box).slideDown("slow");          //アコーディオンを開く
627    });
628  });
629
630  //画像のモーダル
631$(".modaal-link").modaal({
632  type: 'image',
633  overlay_close:true,//モーダル背景クリック時に閉じるか
634  before_open:function(){// モーダルが開く前に行う動作
635    $('html').css('overflow-y','hidden');/*縦スクロールバーを出さない*/
636  },
637  after_close:function(){// モーダルが閉じた後に行う動作
638    $('html').css('overflow-y','scroll');/*縦スクロールバーを出す*/
639  }
640});