https://www.cyllenge.co.jp/common/js/common.js

1const winX = $(window).width();
2const bodyX = winX - 17;
3const breakpt = 960;
4const breakptSP = 720;
5
6$(function () {
7    const h = $(window).height();
8
9    $('#wrap').hide();
10    $('#loader-bg')
11        .height(h)
12        .show();
13    setTimeout(stopLoad, 8000);
14});
15
16$(window).on('load', function () {
17    $('#loader-bg').delay(500).fadeOut(300, function () {
18        $(this).remove();
19    });
20
21    $('#wrap').show();
22
23    setTimeout(function () {
24        $('#loader').remove();
25    }, 3000);
26});
27
28function stopLoad() {
29    $('#wrap').show();
30
31    $('#loader-bg').stop(true, true).fadeOut(300, function () {
32        $(this).remove();
33    });
34
35    $('#loader').remove();
36}
37
38// URL部分一致でグローバルメニューにonクラスを付与
39$(window).bind("load", function(){
40    var $header = $('.header_wrap_nav');
41    if(document.URL.match(/company/)) {
42        $header.find('.company').addClass('on');
43    } else if(document.URL.match(/recruit/)) {
44        $header.find('.recruit').addClass('on');
45    } else if(document.URL.match(/story/)) {
46        $header.find('.story').addClass('on');
47    } else if(document.URL.match(/special/)) {
48        $header.find('.special').addClass('on');
49    } else if(document.URL.match(/movie/)) {
50        $header.find('.movie').addClass('on');
51    } else if(document.URL.match(/blog/)) {
52        $header.find('.blog').addClass('on');
53    } else if(document.URL.match(/service/)) {
54        $header.find('.service').addClass('on');
55    } else if(document.URL.match(/contact/)) {
56        $header.find('.contact').addClass('on');
57    }
58});
59
60// $(function() {
61//     var headerHeight = 80;
62//     $('a[href^="#"]').on('click', function (e) {
63//         var href = $(this).attr('href');
64//         var target = $(href);
65//         if (target.length) {
66//           e.preventDefault();
67//           $('html, body').animate({
68//             scrollTop: target.offset().top - headerHeight
69//           }, 600);
70//         }
71//       });
72//     });
73//     $(window).on('load', function () {
74//         var headerHeight = 80;
75//       if (window.location.hash) {
76//         var target = $(window.location.hash);
77//         if (target.length) {
78//           $('html, body').animate({
79//             scrollTop: target.offset().top - headerHeight
80//           }, 600);
81//         }
82//       }
83//     });
84
85// greeting.html の画像リサイズ用
86$(function(){
87    $(window).load(function(){
88        $('#president').width(bodyX);
89        if(winX < breakpt) {
90            $('#president').width(960);
91        }
92    });
93    $(window).resize(function(){
94        var winX = $(window).width();
95        $('#president').width(winX);
96        if(winX < breakpt) {
97            $('#president').width(960);
98        }
99    });
100});
101
102// access.hmtl 遷移してきたときのスクロールの挙動
103$(window).bind("load", function(){
104    if(document.URL.match(/access.html#osaka/)) {
105        $('body').animate({scrollTop: 409}, 400, 'swing');
106    } else if(document.URL.match(/access.html#tokyo/)) {
107        $('body').animate({scrollTop: 1240}, 400, 'swing');
108    } else if(document.URL.match(/access.html#nagoya/)) {
109        $('body').animate({scrollTop: 2050}, 400, 'swing');
110    } else if(document.URL.match(/access.html#kyoto/)) {
111        $('body').animate({scrollTop: 2852}, 400, 'swing');
112    }
113});
114
115// parallax用設定
116var winY = $(window).height();
117var easing = [0.175, 0.885, 0.32, 1.275],
118    settime = 1000,
119    timing = winY / 4;
120
121// 左から出てくる
122$(window).load(function (){
123    var plL = $('.parallaxL');
124    if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
125    } else {
126        for (var i = 0; i < $(plL).length; i++) {
127            if ( $(plL).eq(i).offset().top < winY - 100) {
128                // 画面ロード時、対象要素がウィンドウの内側にある場合は動作させない
129            } else {
130                $(plL).eq(i).css({
131                    position: 'relative',
132                    left: '-30px',
133                    opacity: '0'
134                });
135            }
136        }
137        $(window).scroll(function(){
138            for (var i = 0; i < $(plL).length; i++) {
139                var position = $(plL).eq(i).offset().top - winY;
140                if ($(window).scrollTop() > position + timing) {
141                    $(plL).eq(i).velocity({
142                        left: '0',
143                        opacity: '1'
144                    },{
145                        duration : settime,
146                        easing : easing,
147                    });
148                }
149            }
150        });
151    }
152});
153
154// 右から出てくる
155$(window).load(function (){
156    var plR = $('.parallaxR');

157    if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
158    } else {
159        for (var i = 0; i < $(plR).length; i++) {
160            if ( $(plR).eq(i).offset().top < winY - 100) {
161                // 画面ロード時、対象要素がウィンドウの内側にある場合は動作させない
162            } else {
163                $(plR).eq(i).css({
164                    position: 'relative',
165                    right: '-30px',
166                    opacity: '0'
167                });
168            }
169        }
170        $(window).scroll(function(){
171            for (var i = 0; i < $(plR).length; i++) {
172                var position = $(plR).eq(i).offset().top - winY;
173                if ($(window).scrollTop() > position + timing) {
174                    $(plR).eq(i).velocity({
175                        right: '0',
176                        opacity: '1'
177                    },{
178                        duration : settime,
179                        easing : easing,
180                    });
181                }
182            }
183        });
184    }
185});
186
187// 下から出てくる
188$(window).load(function (){
189    if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
190    } else {
191        var plB = $('.parallaxB');
192        for (var i = 0; i < $(plB).length; i++) {
193            if ( $(plB).eq(i).offset().top < winY - 100) {
194                // 画面ロード時、対象要素がウィンドウの内側にある場合は動作させない
195            } else {
196                $(plB).eq(i).css({
197                    position: 'relative',
198                    bottom: '-30px',
199                    opacity: '0'
200                });
201            }
202        }
203        $(window).scroll(function(){
204            for (var i = 0; i < $(plB).length; i++) {
205                var position = $(plB).eq(i).offset().top - winY;
206                if ($(window).scrollTop() > position + timing) {
207                    $(plB).eq(i).velocity({
208                        bottom: '0',
209                        opacity: '1'
210                    },{
211                        duration : settime,
212                        easing : easing,
213                    });
214                }
215            }
216        });
217    }
218});
219
220// 上から出てくる
221$(function (){
222    if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
223    } else {
224        var plT = $('.parallaxT');
225        for (var i = 0; i < $(plT).length; i++) {
226            $(plT).eq(i).css({
227                position: 'relative',
228                top: '-30px',
229                opacity: '0'
230            });
231        }
232        $(window).scroll(function(){
233            for (var i = 0; i < $(plT).length; i++) {
234                var position = $(plT).eq(i).offset().top - winY;
235                if ($(window).scrollTop() > position + timing) {
236                    $(plT).eq(i).velocity({
237                        top: '0',
238                        opacity: '1'
239                    },{
240                        duration : settime,
241                        easing : easing,
242                    });
243                }
244            }
245        });
246    }
247});
248
249// ブラー
250$(function (){
251    var blur = $('.blurOjb')
252    for (var i = 0; i < $(blur).length; i++) {
253        $(blur).css({
254            textShadow: '0px 0px 15px #333',
255            color: 'transparent',
256            opacity: '0'
257        });
258    }
259    $(window).scroll(function(){
260        for (var i = 0; i < $(blur).length; i++) {
261            var position = $(blur).eq(i).offset().top - winY;
262            if ($(window).scrollTop() > position + timing - 120) {
263                $(blur).eq(i).velocity({
264                    textShadowBlur: '0px',
265                    opacity: '1'
266                },{
267                    duration:'1500',
268                    easing:'easeInOutCubic'
269                });
270            }
271        }
272    });

273});
274
275// history.html スライドトグル
276$(function(){
277    var open = $('#history .hisOpen');
278    $(open).on('click', function(){
279        $(this).next('dd').slideToggle();
280        $(this).toggleClass('hisClose');
281    });
282});
283
284// pagetop
285$(window).load(function(){
286    var showFlag = false;
287    $('#pagetop').on('click', function(){
288        $('body,html').animate({scrollTop:0},800,'swing');
289        return false;
290    });
291    $(window).on('scroll', function() {
292        if ($(this).scrollTop() > 300) {
293           $('#pagetop').fadeIn();
294        } else {
295            $('#pagetop').fadeOut();
296        }
297    });
298});
299
300// アコーディオン
301$(function(){
302    var open = $('.accordion>dt');
303    $(open).on('click', function(){
304        $(this).next('dd').slideToggle();
305        $(this).toggleClass('open');
306    });
307});
308
309// メガメニュー
310$(function () {
311
312    function isTouchDevice() {
313        return (
314            'ontouchstart' in window ||
315            navigator.maxTouchPoints > 0
316        );
317    }
318
319    function initMenu() {
320
321        // イベント重複登録防止
322        $('.header_wrap_nav > li').off('.menu');
323        $('.header_wrap_nav > li.slDown > a').off('.menu');
324        $('.header_wrap_nav-sub').off('.menu');
325
326        if (isTouchDevice()) {
327
328            $('.tb').show();
329
330            // 親リンクでのみ開閉
331            $('.header_wrap_nav > li.slDown > a').on('click.menu', function (e) {
332
333                e.preventDefault();
334                e.stopPropagation();
335
336                const $subMenu = $(this).next('.header_wrap_nav-sub');
337
338                $subMenu
339                    .stop(true, true)
340                    .slideToggle();
341
342            });
343
344            // サブメニュー内のタップで親へイベントを伝えない
345            $('.header_wrap_nav-sub').on('click.menu touchstart.menu', function (e) {
346                e.stopPropagation();
347            });
348
349        } else {
350
351            $('.header_wrap_nav > li').on('mouseenter.menu', function () {
352
353                const $subMenu = $(this).children('.header_wrap_nav-sub');
354
355                $('.header_wrap_nav-sub')
356                    .not($subMenu)
357                    .stop(true, true)
358                    .slideUp();
359
360                $subMenu
361                    .stop(true, true)
362                    .slideDown();
363
364            });
365
366            $('.header_wrap_nav > li').on('mouseleave.menu', function () {
367
368                $(this)
369                    .children('.header_wrap_nav-sub')
370                    .stop(true, true)
371                    .slideUp();
372
373            });
374
375        }
376    }
377
378    initMenu();
379
380    let resizeTimer;
381
382    $(window).on('resize', function () {
383
384        clearTimeout(resizeTimer);
385
386        resizeTimer = setTimeout(function () {
387
388            $('.header_wrap_nav-sub').removeAttr('style');
389            initMenu();
390
391        }, 200);
392
393    });
394
395});
396
397// 資料ダウンロードバナーをbodyに追加
398// $(document).ready(function() {
399//     // バナーを作成
400//     var banner = $('<a href="/download/" id="banner_dl">資料ダウンロード</a>');
401//     var bannerrec = $('<a href="https://recruit.cyllenge.co.jp/recruitmenttype/" target="_blank" id="banner_rec">キャリア採用募集職種</a>');
402//     // バナーをbodyに追加
403//     $('body').prepend(banner);
404//     $('body').prepend(bannerrec);
405// });
406
407// 社名変更のお知らせ
408/*$(function () {
409    $(document).ready(function () {
410        const bannerHtml = 
411            `<div class="clgbanner">
412            <button class="clgbanner-close">×</button>
413            <div class="clgbanner-body">
414            <p class="clgbanner-ttl"><img src="/common/img/icon_i.png" alt="">大切なお知らせ</p>
415			<p class="clgbanner-txt">株式会社プロットは、創業から半世紀の時を超え、<span>2024年1月5日を持ちまして<br class="pc">社名を「株式会社CYLLENGE」へ変更</span>いたします。</p>
416			<a href="https://www.cyllenge.co.jp/231117.html" target="_blank">詳しくはこちら</a>
417            </div>
418            </div>`;
419
420        $('body').append(bannerHtml);
421        $('.clgbanner-close').click(function() {
422            $(this).parent().hide();
423            Cookies.set("floating_banner", "close", {expires: 1});
424        });
425    });

426    $(window).on("scroll", function() {
427        if (Cookies.get("floating_banner") !== "close") {
428            if ($(this).scrollTop() > 100) {
429                $(".clgbanner").fadeIn(300);
430            }
431        }
432    });
433});*/