https://www.wanosato.com/assets/js/common.js?v=1.08

1(function (root, factory) {
2    'use strict';
3    //Browser globals (root is window)
4    root.common = factory(root.jQuery);
5}(this ? this : window, function ($) {
6    'use strict';
7    var CGlobal = {
8        body: $('body'),
9        header: $('header'),
10        lang: $('header #lang'),
11        headerNav: $('header nav'),
12    };
13    var common = {
14        openMenu: function() {
15            if ($('#menu-toggle').length <= 0) {
16                return;
17            }
18            $('#menu-toggle').click(function() {
19                if ($(this).hasClass('active')) {
20                    $(this).removeClass('active');
21                    $('header nav ul').removeClass('active');
22                } else {
23                    $(this).addClass('active');
24                    $('header nav ul').addClass('active');
25                }
26            });
27        },
28        scrollTop: function(scrollTop) {
29            var scrollToTopPage = $('.scrollup');
30            if (!scrollToTopPage.length) return;
31            if (scrollTop > 220) {
32                scrollToTopPage.fadeIn();
33            } else {
34                scrollToTopPage.fadeOut();
35            }
36            scrollToTopPage.off('click').on('click', function() {
37                $('html, body').animate({ scrollTop: 0 }, 500);
38            });
39        },
40        selectLang: function(){
41            if(CGlobal.lang.length <= 0) {
42                return;
43            }
44            CGlobal.lang.on('click', function(){
45                $(this).parent().find('.select-lang').slideToggle(200);
46            });
47        },
48        aboutSlider: function(){
49            var slider = $('.about-slider ul');
50            if(slider.length <= 0) {
51                return;
52            }
53            slider.slick({
54                dots: false,
55                infinite: true,
56                speed: 5000,
57                autoplay: true,
58                autoplaySpeed: 0,
59                slidesToShow: 5,
60                slidesToScroll: 1,
61    cssEase: "linear", // スライドの流れ方を等速に設定
62    swipe: false, // 操作による切り替えはさせない
63    arrows: false, // 矢印非表示
64    pauseOnFocus: false, // スライダーをフォーカスした時にスライドを停止させるか
65    pauseOnHover: false, // スライダーにマウスホバーした時にスライドを停止させるか
66                responsive: [
67                    {
68                      breakpoint: 1201,
69                      settings: {
70                        slidesToShow: 4,
71                      }
72                    },
73                    {
74                      breakpoint: 769,
75                      settings: {
76                        slidesToShow: 3,
77                      }
78                    },
79                    {
80                      breakpoint: 577,
81                      settings: {
82                        slidesToShow: 2,
83                      }
84                    },
85                    {
86                      breakpoint: 376,
87                      settings: {
88                        slidesToShow: 2,
89                      }
90                    }
91                ],
92            });
93        },
94        fixedHeader: function(scrollTop){
95            if(CGlobal.header.length <= 0 || CGlobal.headerNav.length <= 0) {
96                return;
97            }
98            var headerH= CGlobal.header.outerHeight();
99            var headerNavH = CGlobal.headerNav.outerHeight();
100            //var st = headerNavH + headerH/5;
101            var st = headerH/2;
102            if(scrollTop >= st) {
103                if (!CGlobal.body.hasClass('fixed-nav')) {
104                    CGlobal.body.addClass('fixed-nav');
105                }
106            } else {
107                if (CGlobal.body.hasClass('fixed-nav')) {
108                    CGlobal.body.removeClass('fixed-nav');
109                }
110            }
111        },
112        scrolledIntoView: function(){
113            var animated = $('body').find('[data-animate]');
114            if(animated.length <=0 ){
115                return;
116            }
117            animated.each(function(index, item){
118                var that = $(this);
119                var aniName = that.data('animate');
120                if(aniName) {
121                    that.on('inview', function(event, isInView) {
122                        if (isInView) {
123                            that.css({opacity: 1});
124                            that.addClass('animate__animated '+aniName);
125                        } else {
126                            //that.removeClass('animate__animated '+aniName);
127                        }
128                    });
129                }
130            });
131        },
132        cuisinePageSlider: function(){
133            var slider = $('.cuisine_page_slider ul');
134            if(slider.length <= 0) {
135                return;
136            }
137            slider.slick({
138                dots: false,
139                infinite: true,
140                speed: 5000,
141                autoplay: true,
142                autoplaySpeed: 0,
143                slidesToShow: 5,
144                slidesToScroll: 1,
145                cssEase: "linear", // スライドの流れ方を等速に設定
146                swipe: false, // 操作による切り替えはさせない

147                arrows: false, // 矢印非表示
148                pauseOnFocus: false, // スライダーをフォーカスした時にスライドを停止させるか
149                pauseOnHover: false, // スライダーにマウスホバーした時にスライドを停止させるか
150                responsive: [
151                    {
152                      breakpoint: 1201,
153                      settings: {
154                        slidesToShow: 4,
155                      }
156                    },
157                    {
158                      breakpoint: 769,
159                      settings: {
160                        slidesToShow: 3,
161                      }
162                    },
163                    {
164                      breakpoint: 577,
165                      settings: {
166                        slidesToShow: 2,
167                      }
168                    },
169                    {
170                      breakpoint: 376,
171                      settings: {
172                        slidesToShow: 2,
173                      }
174                    }
175                ],
176            });
177        },
178        facilityPageSlider: function(){
179            var slider = $('.facility_page .intro .item.item03 .img');
180            if(slider.length <= 0) {
181                return;
182            }
183            slider.slick({
184                dots: false,
185                arrows:false,
186                infinite: true,
187                autoplaySpeed: 2400,
188                speed: 2000,
189                autoplay: true,
190                slidesToShow: 1,
191                slidesToScroll: 1,            
192                fade: true,
193                pauseOnHover: false,
194                cssEase: 'linear'
195            });
196        },
197        animatedSetting: function(){
198            var animated = $('body').find('[data-animate]');
199            if(animated.length <= 0 ){
200                return;
201            }
202            animated.css({opacity: 0});
203            var screenW = window.innerWidth;
204            if(screenW < 640) {
205                $(animated[0]).css({opacity: 1});
206                $(animated[0]).attr('data-animate', '');
207            }
208        },
209    roomSlider: function(){
210            var slider = $('.room-slide');
211            if(slider.length <= 0) {
212                return;
213            }
214            slider.slick({
215                dots: false,
216                arrows:false,
217                infinite: true,
218                autoplaySpeed: 4000,
219                speed: 2000,
220                autoplay: true,
221                slidesToShow: 1,
222                slidesToScroll: 1,            
223                fade: true,
224                cssEase: 'linear'
225            });
226        },
227        cuisineSlider: function(){
228            var slider = $('.cuisine-slide');
229            if(slider.length <= 0) {
230                return;
231            }
232            slider.slick({
233                dots: false,
234                arrows:false,
235                infinite: true,
236                autoplaySpeed: 3000,
237                speed: 1200,
238                autoplay: true,
239                slidesToShow: 1,
240                slidesToScroll: 1,
241            });
242        },
243        cuisineSlider02: function(){
244            var slider = $('.cuisine-slide02');
245            if(slider.length <= 0) {
246                return;
247            }
248            slider.slick({
249                fade: true,
250                dots: false,
251                arrows:false,
252                infinite: true,
253                autoplaySpeed: 3000,
254                speed: 3000,
255                autoplay: true,
256                slidesToShow: 1,
257                slidesToScroll: 1,
258            });
259        },
260    }
261    var self = common;
262    $(document).ready(function () {
263        self.openMenu();
264        self.selectLang();
265        self.animatedSetting();
266        setTimeout(function(){
267            self.aboutSlider();
268        }, 100);
269        self.roomSlider();
270        self.cuisineSlider();
271        self.cuisineSlider02();
272        self.cuisinePageSlider();
273        self.facilityPageSlider()
274    });
275    $(window).bind('scroll', function() {
276        var scrollTop = $(this).scrollTop();
277        self.fixedHeader(scrollTop);
278        self.scrollTop(scrollTop);
279        self.scrolledIntoView(scrollTop);
280    });
281    /* Export: */
282    return common;
283}));
284
285$(document).ready(function() {
286  $('.roombox .room02_in.max').slick({
287    autoplay: true,
288    autoplaySpeed: 2000,

289    speed: 800,
290    dots: true,
291    arrows: true,
292    slidesToShow: 4,
293    slidesToScroll: 1,
294    variableWidth: true,
295
296    //レスポンシブでの動作を指定
297    responsive: [
298        {
299          breakpoint: 1080,
300          settings: {
301            slidesToShow: 3,
302          }
303        },
304        {
305          breakpoint: 769,
306          settings: {
307            slidesToShow: 1,
308           centerMode: true,
309           centerPadding: '10%',
310          }
311        }
312    ],
313  });
314});
315
316$(document).ready(function() {
317  $('.roombox .room02_in.max4').slick({
318    autoplay: true,
319    autoplaySpeed: 2000,
320    speed: 800,
321    dots: false,
322    arrows: true,
323    slidesToShow: 4,
324    slidesToScroll: 1,
325    variableWidth: false,
326
327    //レスポンシブでの動作を指定
328    responsive: [
329        {
330          breakpoint: 1080,
331          settings: {
332            slidesToShow: 3,
333           dots: true,
334          }
335        },
336        {
337          breakpoint: 769,
338          settings: {
339            slidesToShow: 1,
340           centerMode: true,
341           centerPadding: '10%',
342           dots: true,
343          }
344        }
345    ],
346  });
347});
348
349$(function() {
350  const $target = $('.target-text');
351  
352  // *** 1. 初期化処理 (ページロード時に一度だけ実行) ***
353  const initializeText = () => {
354    let htmlContent = $target.html();
355    const brPlaceholder = '|||BREAK_LINE|||';
356    htmlContent = htmlContent.replace(/<br\s*\/?>/gi, brPlaceholder);
357    $target.empty(); 
358
359    // テキスト分割と<span>要素の挿入ロジック（アニメーションは実行しない）
360    htmlContent.split(brPlaceholder).forEach(function(line, lineIndex) {
361      if (lineIndex > 0) {
362        $target.append('<br>');
363      }
364      const parts = line.match(/(\s+|\S)/g) || []; 
365      parts.forEach(function(part) {
366        if (/\s+/.test(part)) {
367          $target.append('<span>&nbsp;</span>');
368        } else {
369          part.split('').forEach(function(char) {
370            $target.append(`<span>${char}</span>`);
371          });
372        }
373      });
374    });
375
376    // *** 修正点B: 初期化後、ターゲット全体を表示準備完了状態にする ***
377    $target.css({
378      'opacity': 1,
379      'max-height': 'none',
380      'overflow': 'visible'
381    });
382    
383    // PC環境では初期化後すぐにアニメーション開始（ただし、アニメーションは実行せず即座に表示完了状態にする）
384    if (!isMobile()) {
385        $target.data('animated', true);
386        $target.find('span').css('visibility', 'visible').addClass('is-visible');
387    }
388  };
389
390  // 2. アニメーション実行関数 (Intersection Observerから呼び出される)
391  const runAnimation = () => {
392    if ($target.data('animated')) {
393      return;
394    }
395    $target.data('animated', true);
396    
397    let charIndex = 0;
398    
399    // 全ての<span>要素を取得し、アニメーションをキューイング
400    $target.find('span').each(function() {
401      const $span = $(this);
402      
403      // 非空白文字にのみアニメーションを適用 (空白文字は即時表示のまま)
404      if ($span.html().trim() !== '') {
405          // visibilityの解除とアニメーションの開始
406          $span.css('visibility', 'visible');
407          
408          $span.delay(charIndex * 50).queue(function(next) {
409              $(this).addClass('is-visible');
410              next();
411          });
412          charIndex++;
413      } else {
414          // 空白文字はvisibilityだけ解除し、アニメーションキューに入れない
415          $span.css('visibility', 'visible');
416      }
417    });
418  };
419  

420  // 3. モバイル判定と監視の開始
421  const isMobile = () => {
422    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
423  };
424  
425  // 最初にテキストを分割し、<span>を挿入する
426  initializeText();
427  
428  if (isMobile() && 'IntersectionObserver' in window) {
429    // モバイル時はObserverで監視
430    const options = { threshold: 0.3 };
431
432    const observer = new IntersectionObserver((entries, observer) => {
433      entries.forEach(entry => {
434        if (entry.isIntersecting) {
435          // アニメーション実行
436          setTimeout(runAnimation, 50); 
437          observer.unobserve(entry.target);
438        }
439      });
440    }, options);
441
442    const targetElement = $target.get(0); 
443    if (targetElement) {
444        observer.observe(targetElement);
445    }
446    
447  } else {
448    // PCまたは非対応環境では即座にアニメーションを完了させる
449    // initializeText()内で既に即時表示処理が記述されているため、ここでは何もしない
450  }
451});
452
453$(function() {
454  var $slider = $('.add_mvslider');
455
456  // スライドが切り替わる直前（フェードアウト開始時）の処理を追加
457  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
458    // これから消えていくスライドを取得し、「is-fading-out」という目印のクラスをつける
459    var $currentSlideElement = $(slick.$slides[currentSlide]);
460    $currentSlideElement.addClass('is-fading-out');
461    
462    // フェードアウトが終わる時間（slickのspeedと同じ1500ミリ秒）後に目印を外す
463    setTimeout(function() {
464      $currentSlideElement.removeClass('is-fading-out');
465    }, 1500); 
466  });
467
468  // （ここから下は既存のコードと同じです）
469  $slider.slick({
470    fade: true,             
471    speed: 2000,            
472    autoplay: true,         
473    autoplaySpeed: 3000,    
474    arrows: false,          
475    dots: false,            
476    pauseOnFocus: false,    
477    pauseOnHover: false     
478  });
479});