https://relxle.com/js/relxle2022/common/common.js

1// JavaScript Document
2$(document).ready(function () {
3    var ua = navigator.userAgent;
4    if (ua.indexOf('iPhone') > 0 && ua.indexOf('Mobile') > 0) {
5      $('.modal-app__banner.is-ios').show();
6    } else if (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
7      $('.modal-app__banner.is-android').show();
8    }
9
10    // ハンバーガーメニュー
11    $('.rlx-header-btn').on('click', function() {
12      $('.rlx-header-wrap, .rlx-header-btn').toggleClass('is-open');
13      return false;
14    });
15
16    // SPの検索のモーダルの表示
17    $('.rlx-header-search-button').on('click', function() {
18      $('.rlx-header-search').addClass('is-open');
19      return false;
20    });
21
22    // SPの検索のモーダルの非表示
23    $('.js-header-search-close').on('click', function() {
24      $('.rlx-header-search').removeClass('is-open');
25      return false;
26    });
27
28    // SPのアプリモーダルの非表示
29    $('.modal-app__close, .modal-app__closeBtn').on('click', function() {
30      $('.modal-appWrap').fadeOut(200);
31      return false;
32    });
33
34    // SPの検索のモーダルの非表示
35    // $('.frm-keyword__input').on('focus', function() {
36    //   $('.box-suggestion').fadeIn(50);
37    //   return false;
38    // }).on('blur', function() {
39    //   $('.box-suggestion').fadeOut(50);
40    //   return false;
41    // });
42
43    // ニュースのタブ切り替えメニュー
44    $('.nav-news__link').on('click', function() {
45      $('.nav-news__link.is-current').removeClass('is-current');
46      $(this).addClass('is-current');
47      $('#js-target-news-box').height($('#js-target-news-box').height());
48      $('.lst-border.is-current').removeClass('is-current').hide();
49      $($(this).attr('href')).addClass('is-current').fadeIn();
50      $('#js-target-news-box').height('auto');
51      $('#js-target-news-button').attr('href', $(this).data('href'));
52      return false;
53    });
54
55    // ハンバーガーメニューの下層メニュー開閉
56    toggleMenu = $('.rlx-header-subNav').prev('.rlx-header-nav__link');
57    $(function() {
58      if (window.matchMedia('(max-width: 1023px)').matches) {
59        toggleMenu.parent('.rlx-header-nav__item').off('mouseenter').off('mouseleave');
60        toggleMenu.on('click', function() {
61          $(this).toggleClass('is-open');
62          $(this).next().slideToggle();
63          return false;
64        });
65      } else {
66        toggleMenu.off('click');
67        toggleMenu.parent('.rlx-header-nav__item').on('mouseenter', function() {
68          $(this).find('.rlx-header-subNav').addClass('is-open');
69          return false;
70        }).on('mouseleave', function() {
71          $(this).find('.rlx-header-subNav').removeClass('is-open');
72          return false;
73        });
74      };
75    });
76
77    //スムーススクロール設定
78    $('.js-pageTopBtn').click(function() {
79      $('body,html').animate({ scrollTop: 0 }, 800);　//スムーススクロールの速度
80      return false;
81    });
82
83    //スムーススクロール設定
84    var headerHeight = $('header').innerHeight(); // ヘッダー追従の場合
85    $('.js-scroll').click(function(){
86      var href= $(this).attr("href");
87      var target = $(href == "#" || href == "" ? 'html' : href);
88      if ( target.length > 0 ) {
89        var position = target.offset().top - headerHeight;
90        $("html, body").animate({scrollTop:position}, 550, "swing");
91        return false;
92      }
93    });
94
95    // MVスライダー
96    var sliderId =  $('#slider_id').val();
97    var slickSlider = $('.js-mv-slider').slick({
98      autoplay: true,
99      autoplaySpeed: 4900,
100      arrows: false,
101      dots: true,
102      customPaging: function(slider, i) {
103        if (sliderId && sliderId.includes(i)) {
104          return '<div class="slick-circle animation"><span class="slick-circle-cover11"></span><span class="slick-circle-cover22"></span><span class="slick-circle-dot"></span></div>';
105        } else {
106          return '<div class="slick-circle animation"><span class="slick-circle-cover1"></span><span class="slick-circle-cover2"></span><span class="slick-circle-dot"></span></div>';
107        }
108      },
109      cssEase: 'linear',
110      fade: true,
111      infinite: true,
112      slidesToShow: 1,
113      slidesToScroll: 1,
114      responsive: [
115        {
116          breakpoint: 600,
117          settings: {
118          }
119        }
120      ]
121    });
122
123    // Add the afterChange event handler
124    slickSlider.on('afterChange', function (event, slick, currentSlide) {
125      // Check the current slide index and change autoplaySpeed accordingly
126      if (sliderId && sliderId.includes(currentSlide)) {
127          // Change autoplaySpeed for the third slide
128          slickSlider.slick('slickSetOption', 'autoplaySpeed', 2000);
129      } else {
130          // Other slides
131          slickSlider.slick('slickSetOption', 'autoplaySpeed', 4900);
132      }
133    });
134
135    $('.box-sliders').slick({
136      autoplay: false,
137      autoplaySpeed: 5000,
138      arrows: true,
139      dots: false,
140      centerMode: true,
141      cssEase: 'linear',
142      centerMode: true,
143      // centerPadding: '0%',
144      infinite: true,
145      prevArrow: '<div class="slick-prev slick-arrow"><img src="/img/relxle2022/icon/[email protected]" /></div>',
146      nextArrow: '<div class="slick-next slick-arrow"><img src="/img/relxle2022/icon/[email protected]" /></div>',
147      // slidesToScroll: 2,
148      variableWidth: true,
149      responsive: [
150        {
151          breakpoint: 1023,
152          settings: {

153            arrows: false,
154            centerMode: false,
155            slidesToScroll: 1,
156          }
157        },
158      ]
159    });
160
161    //フッターの下層メニュー展開
162    toggleFMenu = $('.rlx-footer-nav__label a');
163    toggleFMenu.on('click', function() {
164      $(this).toggleClass('is-open');
165      $(this).parent().next().slideToggle();
166      return false;
167    });
168
169    // よくある質問のアコーディオンの起動
170    if ($('dl.faq-main__accordion dt').length > 0) {
171      $("dl.faq-main__accordion dt").click(function(){
172        $(this).next("dd").slideToggle();
173        $(this).toggleClass("open");
174      });
175    }
176
177    // 初めての方
178    function fadeAnime(){
179      $('.lst-flow__item').each(function(){
180        var elemPos = $(this).offset().top-150;
181        var scroll = $(window).scrollTop();
182        var windowHeight = $(window).height();
183        if (scroll >= elemPos - windowHeight){
184          $(this).addClass('appear');
185        }
186      });
187    }
188
189    $(window).scroll(function (){
190      fadeAnime();
191    });
192});