https://reonjack.com/js/common.js

1// loader
2window.addEventListener("load", function() {
3  const loadingScreen = document.querySelector(".loading-screen");
4  
5  setTimeout(function() {
6      loadingScreen.style.transition = "opacity 1s ease";
7      loadingScreen.style.opacity = "0";
8      setTimeout(function() {
9          loadingScreen.style.display = "none";
10      }, 1000);
11  }, 1000);
12});
13
14
15// JavaScript Document
16(function($) {
17    $(function () {
18        $('#nav-toggle').on('click', function() {
19            $('header').toggleClass('open');
20        });
21    });
22})(jQuery);
23		
24
25// ナビアクション
26$(function() {
27  // ページ読み込み時とスクロール時に実行する関数
28  function setCurrentNav() {
29    var currentPosition = $(window).scrollTop();
30
31    // 各セクションの位置を取得し、現在のスクロール位置と比較してcurrentクラスを適用
32    $(".g_nav_item a").each(function() {
33      var sectionLink = $(this);
34      var sectionId = $(sectionLink.attr("href"));
35      
36      if (sectionId.position().top <= currentPosition && sectionId.position().top + sectionId.height() > currentPosition) {
37        $(".g_nav_item a").removeClass("current");
38        sectionLink.addClass("current");
39      } else {
40        sectionLink.removeClass("current");
41      }
42    });
43  }
44
45  // ナビゲーションクリック時のスムーススクロール処理
46  $(".g_nav_item a").click(function() {
47    $("header").removeClass("open");
48    smoothScroll($(this).attr("href"));
49    return false;
50  });
51
52  // スクロール時にナビゲーションのカレントを更新
53  $(window).scroll(function() {
54    setCurrentNav();
55  });
56
57  // 初期化
58  setCurrentNav();
59});
60
61// スムーススクロール関数
62function smoothScroll(target) {
63  $("html, body").animate(
64    {
65      scrollTop: $(target).offset().top
66    },
67    800
68  );
69}
70
71// ナビ スクロールしたらロゴを表示
72window.addEventListener('scroll', function() {
73  var navLogo = document.querySelector('.nav_logo');
74  if (window.scrollY > 800) {
75      navLogo.classList.add('show');
76  } else {
77      navLogo.classList.remove('show');
78  }
79});
80
81
82// MODAL
83$(function () {
84
85    var MovieModal = false;
86
87    $('.js-modal-open').each(function () {
88        $(this).on('click', function () {
89            $('body').toggleClass('fixed');
90            var target = $(this).data('target');
91            var modal = document.getElementById(target);
92
93            //aタグに.movieModalが付いている場合に実行
94            if ($(this).hasClass("movie_Modal")) {
95                var movieURL = $(this).attr('data-movieurl');
96                $('.modal iframe').attr('src', movieURL);
97                MovieModal = true;
98            }
99            $(modal).fadeIn();
100            return false;
101        });
102    });
103
104    //MOVIE切り替え
105    // $('.movieList li a').each(function(){
106    //     $(this).on('click',function(){
107    //           var movieURL = $(this).attr('href');
108    //           $('.modal iframe').attr('src', '');
109    //           $('.modal iframe').attr('src', movieURL);
110    //         return false;
111    //     });
112    // });
113
114    $('.js-modal-close').on('click', function () {
115        $("body").removeClass("fixed");
116        $('.js-modal').fadeOut();
117
118        //youtubeのURLを削除
119        if (MovieModal = true) {
120            $('.modal iframe').attr('src', '');
121            MovieModal = false;
122        }
123        return false;
124    });
125});
126
127
128$(function(){
129  var pageTop = $("#pageTop");
130  pageTop.click(function () {
131    $('body, html').animate({ scrollTop: 0 }, 800);
132    return false;
133  });
134  $(window).scroll(function () {
135    if($(this).scrollTop() >= 800) {
136      pageTop.fadeIn();
137    } else {
138      pageTop.fadeOut();
139    }
140  });
141});
142
143
144$(document).ready(function(){
145    $("#topBtn").hide();
146    $(window).on("scroll", function() {
147        if ($(this).scrollTop() > 100) {
148            $("#topBtn").fadeIn("fast");
149        } else {
150            $("#topBtn").fadeOut("fast");
151        }
152        scrollHeight = $(document).height();
153        scrollPosition = $(window).height() + $(window).scrollTop();
154        footHeight = $("footer").innerHeight(); 
155        if ( scrollHeight - scrollPosition  <= footHeight ) {
156            $("#topBtn").css({
157                "position":"absolute", 
158                "bottom": footHeight + 20
159            });
160        } else { 
161            $("#topBtn").css({
162                "position":"fixed",
163                "bottom": "40px" 
164            });
165        }
166    });
167    $('#topBtn').click(function () {
168        $('body,html').animate({
169        scrollTop: 0
170        }, 400);
171        return false;

172    });
173});
174
175
176
177// $(function(){
178//   $("a.smooth[href^='#']").on("click", function() {
179//     smoothScroll($(this).attr("href"));
180//     return false;
181//   });
182// });
183
184
185function smoothScroll(href) {
186  var speed = 500;
187  var target = $(href == "#" || href == "" ? "html" : href);
188  if (target.length > 0) {
189    var position = target.offset().top;
190    $("body,html").animate({scrollTop:position}, speed);
191    //return false;
192  }
193}
194
195// tab
196$(function () {
197
198  $(".js-tab li a").on("click", function () {
199      var $target = $($(this).attr("href"));
200      $(this).parent().siblings().removeClass("current");
201      $(this).parent().addClass("current");
202      $(".js-content:visible").stop(true).fadeOut('', function () {
203          $target.stop(true).fadeIn();
204      });
205      return false;
206  });
207
208});
209
210
211// Scroll Effect
212window.onload = function () {
213  scroll_effect();
214
215  $(window).scroll(function () {
216      scroll_effect();
217  });
218
219  function scroll_effect() {
220      $('.effect-fade, .effect-fade02, .effect-fade03, .effect-fade04, .effect-fade05, .effect-scale, .font_fade').each(function () {
221          var elemPos = $(this).offset().top;
222          var scroll = $(window).scrollTop();
223          var windowHeight = $(window).height();
224          if (scroll > elemPos - windowHeight) {
225              $(this).addClass('show');
226          }
227      });
228  }
229};