scripts.js

js bijin-co.jp collected 2026-10-03 19:43:38 UTC 19,941 bytes, 666 lines download raw bytes

1
2
3var common = common || {};
4
5var $window = $(window),
6    $document = $(document),
7    $html = $('html'),
8    $body = $('body'),
9    $wrapper = $('.l-wrapper'),
10    $gnav = $('.l-gnav'),
11    $main = $('.l-main');
12
13// Window Size & Scroll Position
14var scrVal = 0,
15    windowWidth = window.innerWidth,
16    windowHeight = window.innerHeight
17
18// Global Config
19var conf = {
20    padWidth : 959,
21    mobileWidth : 767,
22    device : 'pc',
23    devicemode : null
24};
25
26// Global Flag
27var flag = {
28    isLoaded : false,
29    isFirst : false, 
30    isReel : false,
31    isNavi : false,
32    isFilter : false,
33    isModal : false,
34    isTransition : false,
35    isHome : false
36};
37
38
39$(function () {
40    var user = new getUser();
41    var wW = $window.innerWidth();
42    user.getBrows();
43    user.getDevice(wW);
44    $(window).on('resize', $.throttle ( 100, winResize));
45    init();
46});
47
48function getUser(){
49    this.getDevice = function(i){
50        if(i <= conf.mobileWidth){
51            conf.device = 'sp';
52            $html.addClass('is-sp').removeClass('is-pad is-pc');
53        }else if(i <= conf.padWidth){
54            conf.device = 'pad';
55            $html.addClass('is-pad').removeClass('is-sp is-pc');
56        }else{
57            conf.device = 'pc';
58            $html.addClass('is-pc').removeClass('is-sp is-pad');
59        }
60        return false;
61    },
62        this.getBrows = function(){
63
64        var _ua = window.navigator.userAgent;
65        if (_ua.match(/MSIE/) || _ua.match(/Trident/)) {
66            this.brows = 'is_ie';
67            $html.addClass('is-ie');
68        }else if (_ua.indexOf("Edge") > -1) {
69            this.brows = 'is_edge';
70            $html.addClass('is-edge is-ie11');
71        }else if (_ua.indexOf("Firefox") > -1) {
72            this.brows = 'is_firefox';
73            $html.addClass('is-firefox');
74        }else if (_ua.indexOf("Chrome") > -1) {
75            this.brows = 'is_chrome';
76            $html.addClass('is-chrome');
77        }else if (_ua.indexOf("Opera") > -1) {
78            this.brows = 'is_opera';
79            $html.addClass('is-opera');
80        }else if(_ua.indexOf("Safari") > -1) {
81            this.brows = 'is_safari';
82            $html.addClass('is-safari');
83        }else {
84            this.brows = 'is_other';
85            $html.addClass('is-other');
86        }
87        return false;
88    }
89};
90
91
92function winResize() {
93    var wH = $window.innerHeight();
94    var wW = $window.innerWidth();
95    var user = new getUser();
96    user.getDevice(wW);
97}
98
99
100function init() {
101    const $window = $(window);
102    $window.on('load',function(){
103        $('html').css('background-color', '#3F3F3F');
104    });
105
106    /* metaã¿ã°æ¸ãæã */
107    if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
108        //iPhoneãiPodãAndroidã®è¨å®
109        console.log("SP");
110    }else{
111        //ããä»¥å¤ï¼PCãiPadãªã©ï¼ã®è¨å®
112        console.log("PC");
113    }
114
115    /* ãããã«æ»ã */
116    $(".back-to-top__img").on('click', function(){
117        $('body, html').animate({ scrollTop: 0 }, 500);
118    });
119
120    /* SP ãã³ãã¼ã¬ã¼ã¡ãã¥ã¼ */
121    $('.hamburger').on('click', function(){
122        $(this).toggleClass("active");
123        if($(this).hasClass('active')){
124            $('.sp-overlay').slideDown(500);
125        }else{
126            $('.sp-overlay').slideUp(500);
127        }
128    });
129
130    /* PC ãããã®åããã¿ã³ */
131    {
132        $('.anim-button').each( function(){
133            let n = 'btnAnim-' + randomString(12);
134            $('button', this).attr('data-anim-parent', n);
135            $('a', this).attr('data-anim-parent', n);
136            $('.dot', this).attr('data-anim', n);
137        });
138
139        function btnAnimeStart(el, posX, posY){
140            console.log(el, posX, posY, $(el).width());
141            anime.remove(el);
142            anime({
143                targets: el,
144                autoplay: true,
145                translateX: posX,
146                translateY: posY,
147                direction: 'alternate',
148                loop: false
149            });
150        }
151
152        function animBtnOver(){
153            let bw = $(this).width();

154            let bx = bw/2 - bw/10;
155
156            let animId = this.getAttribute('data-anim-parent');
157            let selector = '[data-anim=\"' + animId + '\"]';
158            let d = document.querySelectorAll(selector);
159
160            btnAnimeStart(d, bx, 0);
161
162            this.addEventListener('mouseleave', function(e){
163                this.removeEventListener('mouseleave', this);
164                btnAnimeStart(d, 0, 0);
165            });
166        }
167
168        $('.anim-button > button').hover(animBtnOver);
169        $('.anim-button > a').hover(animBtnOver);
170    }
171
172
173    /* PC ãããã®åããªã³ã¯ */
174    {
175        $('.anim-link').each( function(){
176            console.log(this);
177            let n = 'linkAnim-' + randomString(12);
178            $(this).attr('data-anim-parent', n);
179            $('.c-link__dot', this).attr('data-anim', n);
180        });
181
182        function linkAnimeStart(el, posX, posY){
183            anime.remove(el);
184            anime({
185                targets: el,
186                autoplay: true,
187                translateX: posX,
188                translateY: posY,
189                direction: 'alternate',
190                loop: false
191            });
192        }
193
194        $('.anim-link').hover(linkOver);
195        $('.anim-link-outside').hover(
196            function(){
197                let link = document.querySelector('[data-anim-link=\"' + this.getAttribute('data-anim-id') + '\"]');
198
199                let animId = link.getAttribute('data-anim-parent');
200                let selector = '[data-anim=\"' + animId + '\"]';
201                let d = document.querySelectorAll(selector);
202
203                linkAnimeStart(d, '1rem', '-2.4rem');
204                this.addEventListener('mouseleave', function(e){
205                    this.removeEventListener('mouseleave', this);
206                    linkAnimeStart(d, 0, 0);
207                });
208            }
209        );
210
211        function linkOver(){
212            let animId = this.getAttribute('data-anim-parent');
213            let selector = '[data-anim=\"' + animId + '\"]';
214            let d = document.querySelectorAll(selector);
215
216            linkAnimeStart(d, '1rem', '-2.4rem');
217            this.addEventListener('mouseleave', function(e){
218                this.removeEventListener('mouseleave', this);
219                linkAnimeStart(d, 0, 0);
220            });
221        }
222    }
223
224
225    /* onscreen */
226    if(conf.device === 'pc'){
227        $(".js-onscreen-loop").onScreen({
228            doIn: function() {
229                $(this).addClass('is-onscreen')
230            },
231            doOut: function() {
232                $(this).removeClass('is-onscreen')
233            },
234            tolerance: 0,
235        });
236        $(".js-onscreen").onScreen({
237            doIn: function() {
238                $(this).addClass('is-onscreen')
239            },
240            doOut: function() {
241            },
242            tolerance: 0,
243        });
244    }else if(conf.device === 'pad') {
245        $(".js-onscreen-loop").onScreen({
246            doIn: function() {
247                $(this).addClass('is-onscreen')
248            },
249            doOut: function() {
250            },
251            tolerance: 0,
252        });
253        $(".js-onscreen").onScreen({
254            doIn: function() {
255                $(this).addClass('is-onscreen')
256            },
257            doOut: function() {
258            },
259            tolerance: 0,
260        });
261    }else {
262        $(".js-onscreen-loop").onScreen({
263            doIn: function() {
264                $(this).addClass('is-onscreen')
265            },
266            doOut: function() {
267            },
268            tolerance: 0,
269        });
270        $(".js-onscreen").onScreen({
271            doIn: function() {
272                $(this).addClass('is-onscreen')
273            },
274            doOut: function() {
275            },
276            tolerance: 0,
277        });
278    }
279
280    /* smooth scroll */
281    $(".js-scroll").click(function (event) {
282        event.preventDefault();
283        if(this.href){
284            var url = this.href;
285        } else if($(this).attr('data-target')) {
286            var url = $(this).attr('data-target');
287        }
288        console.log(url);
289        var parts = url.split("#");
290        var target = parts[1];
291        var target_offset = $("#" + target).offset();
292        if(conf.device === 'pc'){
293            var target_top = target_offset.top - 70;
294        }else if(conf.device === 'pad' || conf.device === 'sp' ) {
295            var target_top = target_offset.top - 20;
296        }
297        var pageAnchor = anime({
298            targets: 'html, body',
299            scrollTop: target_top,
300            duration: 600,

301            easing: 'easeInOutCubic'
302        });
303    });
304
305
306    /* resize event */
307    $window.resize(function(){
308        resize();
309    });
310
311    function resize(){
312        modalPos();
313    }
314    modalPos();
315
316    /* ã¢ã¼ãã« */
317    $(".onModalOpen").on('click', function(){
318
319        //let parent = $(this).parent('.works-block');
320        let parent = $(this).parent();
321        $('.modal__title').text($('.modalTitle', parent).text());
322        $('.modal__img > img').attr('src', $('.modalImg', parent).attr('src'));
323        $('.modal__text').html($('.modalText', parent).html());
324        $('.modal__tag').html($('.modalTag', parent).html());
325        $('.modal').fadeIn(500);
326        modalPos();
327    });
328
329    $('.modal__close').on('click', function(){
330        $('.modal').fadeOut(500);
331
332    });
333
334
335    function modalPos(){
336        var $mw = $('.modal__window');
337        if($window.height() < $mw.height()){
338            $mw.css({'top': 0, 'margin-top': 0});
339        }else{
340            $mw.css({'top': '50%', 'margin-top': $mw.height()/2 * -1});
341        }
342    }
343
344
345    if ($body.is('.is-home')) {
346        console.log('home');
347        $html.addClass('is-home');
348        initIndex();
349    }else if($body.is('.is-works')) {
350        $html.addClass('is-works');
351        initIndex();
352    }else if($body.is('.is-service')) {
353        $html.addClass('is-service');
354        initIndex();
355    }else if($body.is('.is-sp')) {
356        $html.addClass('is-sp');
357        initIndex();
358    }else {
359        initIndex();
360    }
361}
362
363
364
365/* ã©ã³ãã æååãè¿ã */
366function randomString(num){
367    let n = num;
368    var char = "abcdefghijklmnopqrstuvwxyz0123456789";
369
370    var cl = char.length;
371    var r = "";
372    for(var i = 0; i < n; i++){
373        r += char[Math.floor(Math.random() * cl)];
374    }
375    return r;
376}
377
378/* index.js */
379
380
381function initIndex() {
382    const $window = $(window);
383    const brakePoint = 768;
384    let beforeWidth = 0;
385
386    let $loading = $('.loading');
387    let $loadingBar = $('.loading__bar');
388    let queue = new createjs.LoadQueue(false);
389    let videoTarget = null;
390    let $videoWrapper = $('.top-visual__video-wrapper');
391    let $spArrow = $('.sp-top-visual__arrow');
392
393    $('.loading__img').css('display', 'block');
394
395    // preload
396    queue.on("complete", handleComplete, this);
397
398    if((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0){
399        //iPhoneãiPodãAndroidã®è¨å®
400        queue.loadManifest([
401            {"src":"./common/img/top/sp-header_1.png","id":"image1"},
402            {"src":"./common/img/top/sp-header_2.png","id":"image2"},
403            {"src":"./common/img/top/sp-header_3.png","id":"image3"},
404            {"src":"./common/img/top/sp-header_4.png","id":"image4"},
405        ]);
406    }else{
407        //ããä»¥å¤ï¼PCãiPadãªã©ï¼ã®è¨å®
408        queue.loadManifest([
409            {
410                id : 'fv',
411                src : './common/movie/BIJIN_b&w_s.mp4', 
412                type : createjs.AbstractLoader.BINARY
413            }
414        ]);
415    }
416
417
418    queue.on("progress", function(e){
419        let p = queue.progress * 100;
420        $loadingBar.css('width', Math.round(p) + '%');
421    });
422
423    function handleComplete() {
424        if ($body.is('.is-home')) {
425            // Insert Video
426            let videoTarget = queue.getResult("fv");
427            let $video = $('<video loop muted autoplay playsinline class="top-video"/>');
428            let $source = $('<source type="video/mp4"/>');
429            let src = videoTarget;
430            let blob = new Blob( [ src ], { type: "video/mp4" } );
431            let urlCreator = window.URL || window.webkitURL;
432            let objUrl = urlCreator.createObjectURL( blob );
433            $source.attr('src', objUrl);
434            $video.append($source);
435            $videoWrapper.append($video);
436        }
437        setTimeout(function(){
438            $loading.addClass('loaded');
439
440            setTimeout(textAnimStart, 1000);
441            setTimeout(filterAnimStart, 500);
442        }, 1000);
443    }
444
445    let $topVisual = $('.top-visual');

446    let $spTopVisual = $('.sp-top-visual');
447    let $topText = $('.top-visual__text');
448    let $contentBodyWrapper = $('.content-body');
449    let $topVideo = $('.top-video');
450
451    $window.on('load',function(){
452        resize();
453
454        let w = $window.width();
455        if(brakePoint < w){
456            changeDesign(0);
457        }else{
458            changeDesign(1);
459        }
460        beforeWidth = w;
461    });
462
463    $window.scroll(function(){
464        var scrollY = $window.scrollTop();
465        let cloudcastingTop = $contentCloudcasting[0].getBoundingClientRect().top + window.pageYOffset - $window.height()/2;
466        let newsTop = $contentNews[0].getBoundingClientRect().top + window.pageYOffset - $window.height()/2;
467
468        // ï¼ï¼TOPãï¼ï¼CLOUD CASTINGãï¼ï¼NEWS
469        if(cloudcastingTop < scrollY && scrollY < newsTop){
470            setNavNum(2);
471        }else if(newsTop < scrollY){
472            setNavNum(3);
473            $topVisual.addClass('hidden');
474            $spTopVisual.addClass('hidden');
475        }else{
476            setNavNum(1);
477            $topVisual.removeClass('hidden');
478            $spTopVisual.removeClass('hidden');
479        }
480
481        var scroll = $(window).scrollTop();
482        var windHeight = $(window).height()
483        var realscroll = (scroll / 20);
484        var homeScroll = (scroll - windHeight);
485        if (scroll >= 0) {
486            $topVisual.css("-webkit-transform", "translate3d(0," + -(Math.floor(scroll / 2)) + "px,0px)");
487        }
488    });
489
490    $window.resize(function(){
491        resize();
492    });
493    resize();
494
495    /* sp fade slide */
496    var $firstSlide = $('#js-first-slide'),
497        $currentSlide = $firstSlide;
498
499    setInterval(function(){
500        let $nexSlide = $currentSlide.next()[0] ? $currentSlide.next() : $firstSlide;
501
502        $currentSlide.removeClass('active');
503        $nexSlide.addClass('active');
504        $currentSlide = $nexSlide;
505
506    }, 5000);
507
508    /* following-nav */
509    let $contentCloudcasting = $('.content-cloudcasting-logo');
510    let $contentNews = $('.content-news');
511    let switchNavNum = 1;
512    let switchBars = [$('.following-nav__bar1'), $('.following-nav__bar2'), $('.following-nav__bar3')];
513    $('.following-nav__bar').on('click', function(){
514        $('.following-nav__bar').removeClass('selected');
515        $(this).addClass('selected');
516
517        let num = Number(this.getAttribute('data-nav-num'));
518        switchNav(num, '.following-nav__dot');
519
520        // ã¹ã¯ãã¼ã«
521        let scrollValY = 0;
522        switch(num){
523            case 1:
524                scrollValY = 0;
525                break;
526            case 2:
527                scrollValY = $contentCloudcasting.offset().top;
528                break;
529            case 3:
530                scrollValY = $contentNews.offset().top;
531                break;
532        }
533        $('body, html').animate({ scrollTop: scrollValY }, 500);
534    });
535    function setNavNum(id){
536        if(id != switchNavNum){
537            switchNavNum = id;
538            switchNav(switchNavNum, '.following-nav__dot');
539            $('.following-nav__bar').removeClass('selected');
540            switchBars[id-1].addClass('selected');
541        }
542    }
543    function switchNav(id, el){
544        let posY = ((id - 1) * 29) + 'px';
545        anime({
546            targets: el,
547            autoplay: true,
548            translateY: posY,
549            direction: 'alternate',
550            loop: false
551        });
552    }
553
554    switchNav(switchNavNum, '.following-nav__dot');
555
556
557    /* ããã¹ãã¢ãã¡ã¼ã·ã§ã³ã®ã¹ã¿ã¼ã */
558    function textAnimStart(){
559        $topText.addClass('start-animation');
560    }
561
562    function filterAnimStart(){
563        $(".ef--1").addClass('ef-animation--1');
564        $(".ef--2").addClass('ef-animation--2');
565        $(".ef--3").addClass('ef-animation--3');
566        $(".ef--4").addClass('ef-animation--4');
567        $(".ef--5").addClass('ef-animation--5');
568        $(".ef--6").addClass('ef-animation--6');
569        $(".ef--7").addClass('ef-animation--7');
570        $(".ef--8").addClass('ef-animation--8');
571        $(".ef--9").addClass('ef-animation--9');
572        $(".ef--10").addClass('ef-animation--10');
573        $(".ef--11").addClass('ef-animation--11');
574        $(".ef--12").addClass('ef-animation--12');
575        $(".ef--13").addClass('ef-animation--13');
576        $(".ef--14").addClass('ef-animation--14');
577        $(".ef--15").addClass('ef-animation--15');
578        $(".ef--16").addClass('ef-animation--16');
579    }
580
581    /* resize event */
582    function resize(){
583        // åºæº720px * 280px(1scale)
584        let w = $window.width();
585        let h = $window.height();
586
587        // ãããã¹ãã©ã¤ãã¢ãã¡ã®ãªãµã¤ãº
588        if(brakePoint < w){
589            // PC:1340pxã®ã¨ã580px * 225pxãæ£ã¨ãã580/720(0.80â¦)
590            let ps = 580/720 * w / 1340;
591            $topText.css({transform:'scale(' + ps + ') translateY(-50%)'});
592            $contentBodyWrapper.css('margin-top', $topVisual.outerHeight() + 70);
593
594        }else{
595            // SP:750pxã®ã¨ã823px * 320pxãæ£ã¨ãã823/720(1.14â¦)
596            let ss = 823/720 * w / 750;

597            let vh = h;
598            /*if($spTopVisual.height() < vh){
599                vh = $spTopVisual.height();
600            }*/
601            let mt = (vh / 2 - (280 * ss / 2)) / 750 * 100;
602            /*$topText.css({transform:'scale(' + ss + ')', 'margin-top': mt + '%'});*/
603            $topText.css({transform:'scale(' + ss + ') translateY(-50%)'});
604            /*$contentBodyWrapper.css('margin-top', $spTopVisual.outerHeight());*/
605
606            $('.sp-top-visual__spacer').css('height', $window.innerHeight());
607            $spTopVisual.css('height', $window.innerHeight());
608            // ç¢å°ä½ç½®èª¿æ´
609            let arrowY = ((h - 70) / 750 * 100) + '%';
610            // console.log($window.height(), arrowY);
611
612            /* $spArrow.css('margin-top', arrowY);*/
613        }
614
615        /* slick sliderã®ç¸¦ãµã¤ãºè¨ç® */
616        /*let slideHieght = $sliderBox.width() / 800 * 400; 
617        $sliderBox.css('height', slideHieght + 'px');
618*/
619        /* æ¨ªãµã¤ãºç£è¦ */
620        if(brakePoint < beforeWidth){
621            if(brakePoint >= w){
622                changeDesign(1);
623            }
624        }else if(brakePoint >= beforeWidth){
625            if(brakePoint < w){
626                changeDesign(0);
627            }
628        }
629        beforeWidth = w;
630
631    }
632
633    /* ååã¨ãPC/SPã®åãæ¿ãæã«å¼ã°ãã */
634    function changeDesign(num){
635        switch(num){
636            case 0:
637                // PCã«ããã£ã
638                break;
639            case 1:
640                // SPã«ããã£ã
641                break;
642        }
643    }
644
645
646    /* Slider */
647    let $sliderBox = $('.banner-slider__slide');
648    $(".banner-slider__body").slick({
649        autoplay: true,
650        dots: false,
651        draggable: true,
652        infinite: true,
653        prevArrow: $('.banner-slider__left .banner-slider__arrow'),
654        nextArrow: $('.banner-slider__right .banner-slider__arrow'),
655        slidesToShow: 1,
656        slidesToScroll: 1,
657    });
658
659    window.loadEvent = function(){
660        console.log("window.loadEvent");
661    }
662
663
664}
665
666

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.