http://www.satv.co.jp/0900recruit/js/script.js

1$(function () {
2
3    //////////////////////////////
4    // ページ遷移時にふわっと表示
5    //////////////////////////////
6    $('body').fadeIn(1000); //1秒かけてフェードイン！
7
8    //////////////////////////////
9    // 外部リンクは別タブで開く
10    //////////////////////////////
11    $('a[href^="http"]:not([href^="http://www.satv.co.jp"])').click(function () {
12        window.open(this.href, '_blank');
13        return false;
14    }).addClass('externalLink');
15
16    //////////////////////////////
17    // ページ内リンクをゆるっと
18    //////////////////////////////
19    $('a[href*="#"]').click(function () {
20        var speed = 600;
21        var href = $(this).attr("href");
22        var target = $(href === "#" || href === "" ? 'html' : href);
23
24        if (target.length) {
25            var position = target.offset().top;
26
27            $("html, body").animate({
28                scrollTop: position
29            }, speed, "swing");
30        }
31
32        return false;
33    });
34
35    //////////////////////////////
36    // 仕事紹介タブメニュー
37    //////////////////////////////
38    $('.tab-menu li').on('click', function () {
39        if ($(this).not('active')) {
40            // タブメニュー
41            $(this).addClass('active').siblings('li').removeClass('active');
42            // タブの中身
43            var index = $('.tab-menu li').index(this);
44            $('.tab-box>div').eq(index).addClass('active').siblings('div').removeClass('active');
45        }
46    });
47
48    //////////////////////////////
49    // 社員紹介タイトルななめ部分
50    //////////////////////////////
51    var body = $('body');
52    var bodyWidth = body.width();
53    if (bodyWidth < 1170) {
54        bodyWidth = 1170;
55    }
56    var wrapperMargin = bodyWidth - 1170;
57    var wrapperMargin2 = wrapperMargin / 2;
58    var copy = $('#copy');
59    var copyWidth = copy.width();
60    var copyHeight = copy.height();
61    //var mainVisualBgWidth = wrapperMargin2 + copyWidth + 250;
62    var mainVisualBgWidth2 = wrapperMargin2 + copyWidth + 300;
63    var mainVisualBgHeight = copyHeight + 200;
64    //var peopleMainVisualHeight = mainVisualBgHeight + 150;
65    //$('.peoNewIndividual .peopleMainVisual .inner').after('<div class="mainVisualBg" style="width:' + mainVisualBgWidth + 'px; height:' + mainVisualBgHeight + 'px;">');
66    //$('.peoNewIndividual .peopleMainVisual .personalImage').css('height', peopleMainVisualHeight);
67    $('.peoSenIndividual .peopleMainVisual .inner').after('<div class="mainVisualBg" style="width:' + mainVisualBgWidth2 + 'px; height:' + mainVisualBgHeight + 'px;">');
68    $('.peoCareer_interview .peopleMainVisual .inner').after('<div class="mainVisualBg" style="width:' + mainVisualBgWidth2 + 'px; height:' + mainVisualBgHeight + 'px;">');
69    $('#peoYoutuber .peopleMainVisual .inner').after('<div class="mainVisualBg" style="width:' + mainVisualBgWidth2 + 'px; height:' + mainVisualBgHeight + 'px;">');
70    //$('.peoSenIndividual .peopleMainVisual .inner').after('<div class="mainVisualBg" style="width:' + mainVisualBgWidth2 + 'px; height:340px;">');
71
72    $(window).on('load resize', function () {
73        $(".mainVisualBg").remove();
74        var bodyWidth = $(window).width();
75        if (bodyWidth < 1170) {
76            bodyWidth = 1170;
77        }
78        var wrapperMargin = bodyWidth - 1170;
79        var wrapperMargin2 = wrapperMargin / 2;
80        var copy = $('#copy');
81        var copyWidth = copy.width();
82        var copyHeight = copy.height();
83        //var mainVisualBgWidth = wrapperMargin2 + copyWidth + 250;
84        var mainVisualBgWidth2 = wrapperMargin2 + copyWidth + 300;
85        var mainVisualBgHeight = copyHeight + 150;
86        //var peopleMainVisualHeight = mainVisualBgHeight + 150;
87        //$('.peoNewIndividual .peopleMainVisual .inner').after('<div class="mainVisualBg" style="width:' + mainVisualBgWidth + 'px; height:' + mainVisualBgHeight + 'px;">');
88        //$('.peoNewIndividual .peopleMainVisual .personalImage').css('height', peopleMainVisualHeight);
89        $('.peoSenIndividual .peopleMainVisual .inner').after('<div class="mainVisualBg" style="width:' + mainVisualBgWidth2 + 'px; height:' + mainVisualBgHeight + 'px;">');
90        //$('.peoSenIndividual .peopleMainVisual .inner').after('<div class="mainVisualBg" style="width:' + mainVisualBgWidth2 + 'px; height:340px;">');
91        $('.peoCareer_interview .peopleMainVisual .inner').after('<div class="mainVisualBg" style="width:' + mainVisualBgWidth2 + 'px; height:' + mainVisualBgHeight + 'px;">');
92        $('#peoYoutuber .peopleMainVisual .inner').after('<div class="mainVisualBg" style="width:' + mainVisualBgWidth2 + 'px; height:' + mainVisualBgHeight + 'px;">');
93    });
94});
95
96//////////////////////////////
97// ヘッダーナビスマホ用

98//////////////////////////////
99$(".openbtn1").click(function () { //ボタンがクリックされたら
100    $(this).toggleClass('active'); //ボタン自身に activeクラスを付与し
101    $("#g-nav").toggleClass('panelactive'); //ナビゲーションにpanelactiveクラスを付与
102});
103
104$("#g-nav a").click(function () { //ナビゲーションのリンクがクリックされたら
105    $(".openbtn1").removeClass('active'); //ボタンの activeクラスを除去し
106    $("#g-nav").removeClass('panelactive'); //ナビゲーションのpanelactiveクラスも除去
107});
108
109
110//////////////////////////////
111// フェードアップ
112//////////////////////////////
113function fadeAnime() {
114
115    // ふわっ
116    $('.fadeUpTrigger').each(function () { //fadeUpTriggerというクラス名が
117        var elemPos = $(this).offset().top - 100; //要素より、100px上の
118        var scroll = $(window).scrollTop();
119        var windowHeight = $(window).height();
120        if (scroll >= elemPos - windowHeight) {
121            $(this).addClass('fadeUp'); // 画面内に入ったらfadeUpというクラス名を追記
122        } else {
123            $(this).removeClass('fadeUp'); // 画面外に出たらfadeUpというクラス名を外す
124        }
125    });
126}
127
128// 画面をスクロールをしたら動かしたい場合の記述
129$(window).scroll(function () {
130    fadeAnime(); /* アニメーション用の関数を呼ぶ*/
131}); // ここまで画面をスクロールをしたら動かしたい場合の記述
132
133// 画面が読み込まれたらすぐに動かしたい場合の記述
134$(window).on('load', function () {
135    fadeAnime(); /* アニメーション用の関数を呼ぶ*/
136}); // ここまで画面が読み込まれたらすぐに動かしたい場合の記述
137
138
139//////////////////////////////
140// 左から帯が伸びて表示
141//////////////////////////////
142// 動きのきっかけの起点となるアニメーションの名前を定義
143function BgFadeAnime() {
144
145    // 背景色が伸びて出現（左から右）
146    $('.bgLRextendTrigger').each(function () { //bgLRextendTriggerというクラス名が
147        var elemPos = $(this).offset().top - 50; //要素より、50px上の
148        var scroll = $(window).scrollTop();
149        var windowHeight = $(window).height();
150        if (scroll >= elemPos - windowHeight) {
151            $(this).addClass('bgLRextend'); // 画面内に入ったらbgLRextendというクラス名を追記
152        } else {
153            $(this).removeClass('bgLRextend'); // 画面外に出たらbgLRextendというクラス名を外す
154        }
155    });
156
157    // 文字列を囲う子要素
158    $('.bgappearTrigger').each(function () { //bgappearTriggerというクラス名が
159        var elemPos = $(this).offset().top - 50; //要素より、50px上の
160        var scroll = $(window).scrollTop();
161        var windowHeight = $(window).height();
162        if (scroll >= elemPos - windowHeight) {
163            $(this).addClass('bgappear'); // 画面内に入ったらbgappearというクラス名を追記
164        } else {
165            $(this).removeClass('bgappear'); // 画面外に出たらbgappearというクラス名を外す
166        }
167    });
168}
169
170// 画面をスクロールをしたら動かす
171$(window).scroll(function () {
172    BgFadeAnime(); /* アニメーション用の関数を呼ぶ*/
173});
174
175// 画面が読み込まれたらすぐに動かす
176$(window).on('load', function () {
177    BgFadeAnime(); /* アニメーション用の関数を呼ぶ*/
178});
179
180//////////////////////////////
181// フッターボタン
182//////////////////////////////
183function PageTopAnime() {
184    var scroll = $(window).scrollTop();
185    if (scroll >= 100) { //上から100pxスクロールしたら
186        $('#footerBtnWrapper').removeClass('DownMove'); //.footerBtnについているDownMoveというクラス名を除く
187        $('#footerBtnWrapper').addClass('UpMove'); //.footerBtnについているUpMoveというクラス名を付与
188    } else {
189        if ($('#footerBtnWrapper').hasClass('UpMove')) { //すでに.footerBtnにUpMoveというクラス名がついていたら
190            $('#footerBtnWrapper').removeClass('UpMove'); //UpMoveというクラス名を除き
191            $('#footerBtnWrapper').addClass('DownMove'); //DownMoveというクラス名を.footerBtnに付与
192        }
193    }
194}
195
196// 画面をスクロールをしたら動かしたい場合の記述
197$(window).scroll(function () {

198    PageTopAnime(); /* スクロールした際の動きの関数を呼ぶ*/
199});
200
201
202//////////////////////////////
203// アコーディオン
204//////////////////////////////
205$('.accordion-area .title').on('click', function () { //タイトル要素をクリックしたら
206    var findElm = $(this).next(".box"); //直後のアコーディオンを行うエリアを取得し
207    $(findElm).slideToggle(); //アコーディオンの上下動作
208
209    if ($(this).hasClass('close')) { //タイトル要素にクラス名closeがあれば
210        $(this).removeClass('close'); //クラス名を除去し
211    } else { //それ以外は
212        $(this).addClass('close'); //クラス名closeを付与
213    }
214});
215
216$(window).on('load', function () {
217    // openクラスがついているものを展開
218    $(".open").each(function (index, element) {
219        var Title = $(element).find('.title');
220        $(Title).addClass('close');
221        var Box = $(element).find('.box');
222        $(Box).slideDown(500);
223    });
224
225    // ▼ 追加：URLに#degitalがある場合は、そのliを展開
226    if (window.location.hash === "#degital") {
227        var target = $("#degital");
228        if (target.length > 0) {
229            var Title = target.find('.title');
230            var Box = target.find('.box');
231
232            // クラス追加して展開
233            target.addClass("open");
234            Title.addClass('close');
235            Box.slideDown(500);
236        }
237    }
238});
239
240
241$(window).on("scroll", function () {
242    $(".footerBtn").css("left", -$(window).scrollLeft());
243});