https://bambinabambino.net/wp-content/themes/hanjo-one/js/main.js?ver=6.1.0

1jQuery(function ($) {
2    // 現在の状態
3    var widthId;
4
5    // 制御対象要素の取得
6    const $topWrapper = $('#top-wrapper');
7    const $topImageWrapper = $('#top-image-wrapper');
8    const $topImage = $('#top-image');
9    const $menuCheckbox = $('#hamburger-checkbox');
10
11    $(window).on('load', function () {
12        UpdateWidthId();
13
14        // トップ画像を読み込み
15        if ($topImage.hasClass('lazy-load')) {
16            const backgroundImageUrl = $topImage.attr('download-background-image');
17            $topImage.css('background-image', 'url(\'' + backgroundImageUrl + '\')');
18        }
19
20        // 読み込み中表示を終了
21        $('#loader-wrapper').fadeOut(800, function () {
22            $('#loader-wrapper').remove();
23        });
24
25        // 初回用のアニメーションを発火させる
26        $topImage.addClass('parallax-transition');
27        $topImage.removeClass('parallax-load-before');
28        $topImage.addClass('parallax-load-after');
29
30        AdjustHeight();
31        DownloadSrc();
32    });
33
34    function AdjustHeight() {
35        // 写真付きメニューの一部要素の高さを調整
36        const $elements = $('#recommended-menu-container').find('.recommended-menu-summary');
37        var maxHeight = -1;
38        var beforeTop = -1;
39        var rowStartedElementIndex = 0;
40        $elements.each(function (i, element) {
41            const $jQueryElement = $(element);
42            const height = $jQueryElement.height();
43            var top = $jQueryElement.offset().top;
44
45            // 最大高さの評価
46            if (height > maxHeight) {
47                maxHeight = height;
48            }
49
50            // 行の変わり目を検出
51            const delta = 10;
52            if (beforeTop >= 0 && Math.abs(top - beforeTop) > delta) {
53                // console.debug(maxHeight);
54
55                // 前の要素までを処理
56                for (var j = rowStartedElementIndex; j < i; j++) {
57                    const $adjustTarget = $($elements[j]);
58                    const beforeHeight = $adjustTarget.height();
59
60                    const addHeight = maxHeight - beforeHeight;
61                    if (addHeight > 0) {
62                        $adjustTarget.css('margin-bottom', addHeight + 'px');
63                    }
64                }
65
66                // 次の行を処理するための初期化
67                maxHeight = -1;
68                beforeTop = -1;
69                rowStartedElementIndex = i;
70
71                // 自身のtopは再評価する必要がある
72                top = $jQueryElement.offset().top;
73            }
74
75            beforeTop = top;
76        });
77    }
78
79    // リサイズ時の処理
80    $(window).on('resize', function () {
81        UpdateWidthId();
82        AdjustHeight();
83    });
84
85    /**
86     * @return {boolean}
87     */
88    function UpdateWidthId() {
89        const width = $(window).width();
90
91        var newWidthId;
92        if (width >= 1200) {
93            newWidthId = 'xl';
94        } else if (width >= 992) {
95            newWidthId = 'lg';
96        } else if (width >= 768) {
97            newWidthId = 'md';
98        } else if (width >= 576) {
99            newWidthId = 'sm';
100        } else {
101            newWidthId = 'ms';
102        }
103
104        if (widthId === newWidthId) {
105            return false;
106        }
107
108        widthId = newWidthId;
109        console.log(width + ':' + widthId);
110
111        return true;
112    }
113
114    // スクロール時の処理
115    $(window).on('scroll', function () {
116        const scroll = $(window).scrollTop();
117
118        $topImage.removeClass('parallax-transition');
119
120        // TODO もうちょっと綺麗にHTMLが組んであれば不要
121        // トップ部分はスクロール範囲外となったら非表示
122        if (scroll > $topImageWrapper.height()) {
123            $topWrapper.css('visibility', 'hidden');
124        } else {
125            $topWrapper.css('visibility', 'visible');
126        }
127
128        // ある程度スクロールされていればトップ画像をぼかす
129        if (scroll > 100) {
130            $topImage.removeClass('parallax-blur-off');
131            $topImage.addClass('parallax-blur-on');
132        } else {
133            $topImage.removeClass('parallax-blur-on');
134            $topImage.addClass('parallax-blur-off');
135        }
136
137        DownloadSrc();
138    });

139
140    function DownloadSrc() {
141        const windowHeight = $(window).height();
142        const scrollTop = $(window).scrollTop();
143
144        // 表示範囲内と近くの画像をダウンロード
145        $('.lazy-load').each(function (i, element) {
146            const $target = $(element);
147
148            // 要素が表示されるまでの残りスクロール量
149            const scrollRemain = $target.offset().top - (scrollTop + windowHeight);
150
151            // ある程度近づいていればダウンロード
152            if (scrollRemain < 300) {
153                $target.removeClass('lazy-load');
154
155                if ($target.hasClass('with-animation')) {
156                    $target.addClass('lazy-load-after');
157                }
158
159                $target.attr('src', $target.attr('download-src'));
160            }
161        });
162    }
163
164    // アニメーション付きリンクの処理
165    $('.animation-link').on('click', function () {
166        // 対象要素＋補正の位置へスクロール
167        const href = $(this).attr('href');
168        const target = $(href == "#" || href == "" ? 'html' : href);
169        const position = target.offset().top;
170        $('body,html').animate({scrollTop: position}, 400, 'swing');
171
172        return false;
173    });
174
175    // ページ内リンクの処理
176    $('.section-link').on('click', function () {
177        // ナビゲーションメニューの高さ分を補正
178        var diff = 0;
179        const $navigation = $('#global-navigation');
180        if ($navigation) {
181            diff = $navigation.height();
182        }
183
184        // 対象要素＋補正の位置へスクロール
185        const href = $(this).attr('href');
186        const target = $(href == "#" || href == "" ? 'html' : href);
187        const position = target.offset().top - diff;
188        $('body,html').animate({scrollTop: position}, 400, 'swing');
189
190        // メニューが開いていれば閉じる
191        if ($menuCheckbox.prop('checked') === true) {
192            $menuCheckbox.prop("checked", false);
193        }
194
195        return false;
196    });
197
198    // トップページへ遷移するリンクの処理
199    $('.top-link').on('click', function () {
200        $('body,html').animate({scrollTop: 0}, 400, 'swing');
201
202        // メニューが開いていれば閉じる
203        if ($menuCheckbox.prop('checked') === true) {
204            $menuCheckbox.prop("checked", false);
205        }
206
207        return false;
208    });
209});