https://world-family.co.jp/forms/taiken_sp/reservation/js/frm_2021.js

1/**
2 * frm_2021
3 *
4 * @date 2021-12-1
5 */
6
7/* スムーズスクロール */
8$(function(){
9  $('a[href^="#"]').on('click', function() {
10    let speed = 400;
11    let type = 'swing';
12    let href= $(this).attr("href");
13    let target = $(href == "#index" ? 'html' : href);
14    let position = target.offset().top;
15    $('body,html').animate({scrollTop:position}, speed, type);
16    return false;
17  });
18});
19
20
21
22/* 続きを読む */
23$('.js-showMore').on('click', function() {
24  $(this).parents('.more_wrap').addClass('-showMore');
25  $(this).remove();
26});
27
28
29
30/* 感染予防アコーディオン */
31$('.js-btn-accordion').on('click', function() {
32  $(this).toggleClass('is-active');
33  $(this).next().slideToggle();
34});
35
36
37
38/* 入力フォーム内アコーディオン */
39$('.js-btn-accordion_form').on('click', function () {
40  $(this).addClass('is-hidden');
41  $(this).next().addClass('is-active');
42});
43
44
45
46/* 円グラフアニメーション（Chart.js） */
47var interview_moreButton_is_open = false;
48
49$(function(){
50  var chartEl1 = document.getElementById("interviewChart01");
51  var chartEl2 = document.getElementById("interviewChart02");
52  var chartFlag1 = false;
53  var chartFlag2 = false;
54
55
56  $('.interview_moreButton').on('click', function() {
57    interview_moreButton_is_open = true;
58  }); 
59  
60  
61  // 1つ目のグラフ
62  var chartFunc1 = function() {
63    var ctx = chartEl1.getContext('2d');
64    chart = new Chart(ctx, {
65      type: 'pie',
66      data: {
67        datasets: [{
68            data: [21.7, 54.5, 23.8],
69            backgroundColor: [
70                '#3cb8e8',
71                '#5ccdf2',
72                '#d1f1ff'
73            ]
74        }]
75      }
76    });
77  };
78  
79  
80  // 2つ目のグラフ
81  var chartFunc2 = function() {
82    var ctx = chartEl2.getContext('2d');
83        ctx.canvas.height = 200;
84    chart = new Chart(ctx, {
85      type: 'pie',
86      data: {
87        datasets: [{
88            data: [32.6, 47.6, 18.3,1.5],
89            backgroundColor: [
90                '#ff7791',
91                '#ff899f',
92                '#ffa1b3',
93                '#aca89f'
94            ]
95        }]
96      }
97    });
98  };
99
100  
101  // スクロール処理
102  var graphAnim = function() {
103    var wy = window.pageYOffset,
104        wb = wy + window.innerHeight, // ブラウザの最下部位置を取得
105        
106        // チャートの位置を取得
107      chartElPos1 = wy + chartEl1.getBoundingClientRect().top,
108      chartElPos2 = wy + chartEl2.getBoundingClientRect().top;
109
110    if (window.matchMedia('(min-width: 1025px)').matches) {
111      // PC
112      if ( wb > (chartElPos1 + 200) && chartFlag1 == false ) {
113        chartFunc1();
114        chartFlag1 = true;
115      }
116      if ( wb > (chartElPos2 + 200) && chartFlag2 == false ) {
117        chartFunc2();
118        chartFlag2 = true;
119      }
120    } else {
121      // SP
122      $('.interview_moreButton').on('click', function() {
123        setTimeout(chartFunc1, 500);
124        chartFlag1 = true;
125      });
126
127      if ( interview_moreButton_is_open && wb > (chartElPos2 + 200) && chartFlag2 == false ) {
128        chartFunc2();
129        chartFlag2 = true;
130      }
131    }
132  };
133  
134  window.addEventListener('load', graphAnim); // 読み込み時の処理
135  window.addEventListener('scroll', graphAnim); // スクロール時の処理
136});
137
138
139
140/* 円グラフフェードイン */
141$(window).on('load scroll', function () {
142  $('.js-fade-in').each(function () {
143    var targetElement = $(this).offset().top;
144    var scroll = $(window).scrollTop();
145    var windowHeight = $(window).height();
146    var chartBlue = $('.interview_figure_img_blue');
147    var chartPink = $('.interview_figure_img_pink');
148
149    if (window.matchMedia('(min-width: 1025px)').matches) {
150      // PC
151      if (scroll > targetElement - windowHeight + 200) {
152        $('.js-fade-in').addClass('is-show');
153      }
154    } else {
155      // SP
156      $('.interview_moreButton').on('click', function() {
157        setTimeout(function(){
158          chartBlue.addClass('is-show');
159        }, 500);
160      });
161
162      if (interview_moreButton_is_open && scroll > targetElement - windowHeight + 200) {
163        $(this).addClass('is-show');
164        $('.interview_figure_img_cap').addClass('is-show');
165      }
166    }
167  });
168});
169
170
171
172/* datepicker */
173$(function() {
174  $('#sandbox-container .input-group.date').datepicker({
175    language: "ja",
176    autoclose: true,
177    clearBtn: true,
178    disableTouchKeyboard: true,
179    maxViewMode: 2,
180    startDate: '+3d',
181    endDate: '+2m',
182    todayHighlight: true,
183  });
184})