https://heleneclinic.com/cms/wp-content/themes/helene/assets/js/top.js?v=5

1"use strict";
2// ローディング画面は廃止。キャッシュ等に残る旧HTML（.c-loading付き）でも画面を塞がないよう除去する
3$(function () {
4  $(".c-loading").remove();
5  $("body").addClass("is-loaded");
6});
7
8$(function () {
9  var urlParams = new URLSearchParams(window.location.search);
10  if (urlParams.get('video') === '2') {
11    $("video").attr("src", "mv2.mov");
12  }
13});
14
15
16$(function () {
17  // 以下のpin設定等で .top-mv が包み直される／祖先が一瞬 display:none になると、MVのCSSアニメーションが最初からやり直しになる
18  // （キャッチが表示→消える→再表示）。設定前の進行位置を控えておき、このブロックの最後で戻す
19  var mvEl = document.querySelector(".top-mv");
20  var mvAnims = mvEl && mvEl.getAnimations ? mvEl.getAnimations({ subtree: true }).map(function (a) {
21    return { target: a.effect.target, name: a.animationName, time: a.currentTime };
22  }) : null;
23  var mvAnimsAt = performance.now();
24
25  var controller = new ScrollMagic.Controller();
26
27  //パララックス
28  $(window).on('resize load', function () {
29    var windowWidth = $(window).width();
30    $('.top-concept-parallax__item').each(function () {
31      var baseY = $(this).data('y') || -200; // デフォルト値
32      var y;
33      if (windowWidth <= 600) {
34        y = baseY * 0.5;
35      } else {
36        y = baseY;
37      }
38      var tween = gsap.to(this, {
39        y: y
40      });
41
42      if (this.scene) {
43        this.scene.destroy(true);
44      }
45
46      this.scene = new ScrollMagic.Scene({
47        triggerElement: this,
48        triggerHook: 1,
49        duration: '100%'
50      })
51        .setTween(tween)
52        .addTo(controller);
53    });
54  }).trigger('resize'); // 初回実行
55
56
57  //top-mv
58  var topViewScene = new ScrollMagic.Scene({
59    triggerElement: ".top-mv",
60    duration: '300vh',
61    triggerHook: 0
62  })
63  .setTween(gsap.to(".top-mv", {
64    padding: 0,
65    ease: "power1.inOut"
66  }))
67  .on("progress", function(event) {
68    if (event.progress >= 1) {
69      $(".top-mv-video").addClass("is-full");
70    } else {
71      $(".top-mv-video").removeClass("is-full");
72    }
73    if (event.progress == 0) {
74      $(".top-mv").css("padding", "");
75    }
76  })
77  .addTo(controller);
78
79var pinTopViewScene = new ScrollMagic.Scene({
80  triggerElement: ".top-mv",
81  offset: 0,
82  duration: function () {
83    return window.innerHeight; // ウィンドウの高さに基づいて更新
84  },
85  triggerHook: 0
86})
87.setPin(".top-mv")
88.addTo(controller);
89
90  // FadeOutSceneを初期化する関数
91  function createFadeOutScene() {
92    // 既存のSceneがあれば削除
93    if (fadeOutScene) {
94      fadeOutScene.destroy(true);
95      fadeOutScene = null;
96    }
97
98    // 現在のwindowサイズに基づいてtriggerHookを設定
99    var triggerHookValue = -0.5;
100    var offsetValue = window.innerWidth <= 600 ? 1000 : 600;
101
102    if($(window).width() >= 600) { //透明化の対象
103      var hideCont = Array(".top-mv-video", ".top-mv-catch", ".top-mv-news");
104    } else {
105      var hideCont = Array(".top-mv-video", ".top-mv-catch");
106    }
107    
108    // 新しいSceneを作成
109    fadeOutScene = new ScrollMagic.Scene({
110      triggerElement: ".top-mv",
111      offset: offsetValue,
112      duration: 800, // 透明化が完了するまでのスクロール距離
113      triggerHook: triggerHookValue
114    })
115      // 開始値を1に固定（.top-mv-news のフェードイン途中の値を開始値として拾わないように）
116      .setTween(gsap.fromTo(hideCont, {
117        opacity: 1
118      }, {
119        opacity: 0,
120        ease: "power1.out"
121      }))
122      .addTo(controller);
123  }
124  // 初期化
125  var fadeOutScene;
126  createFadeOutScene();
127
128  // リサイズイベントでSceneを再作成
129  window.addEventListener("resize load", function () {
130    createFadeOutScene();
131  });
132

133  //コンセプトテキスト
134  var conceptText = new ScrollMagic.Scene({
135    triggerElement: ".top-concept-text-slider", // トリガーとなる要素
136    triggerHook: 0.5, // トリガーする位置を画面上部に設定
137    duration: '400%' // この範囲内ではis-fixedクラスを維持
138  })
139  .setPin(".top-concept-text-slider") // 要素を画面に固定
140  .on("enter", function () {
141    // is-fixedクラスを追加
142    $('.top-concept-text-slider').addClass('is-fixed');
143  })
144
145  .addTo(controller);
146  
147  // スクロールに応じた幅と高さの変更
148  // .top-concept-body__inner の初期設定
149  var $inner = $('.top-concept-body__inner');
150  $inner.css({
151    width: '60vw',
152    height: '65vh'
153  });
154
155  
156  var stepScene = new ScrollMagic.Scene({
157    triggerElement: ".top-concept-body",
158    //duration: "1000vh", // アニメーションの進行
159    duration: "1600vh", // アニメーションの進行
160    triggerHook: 0
161  })
162  .setPin(".top-concept-body") // トリガー要素を固定
163  .on("progress", function(event) {
164    var progress = event.progress;
165
166    // 幅と高さの変更
167    if (progress <= 0.4) {
168
169      var scaleProgress = progress / 0.4; // 0 から 0.4 を 0 から 1 にスケーリング
170      gsap.to(".top-concept-body__inner", {
171        width: `${60 + (40 * scaleProgress)}vw`,  // 60vwから100vwまで
172        height: `${65 + (35 * scaleProgress)}vh`, // 65vhから100vhまで
173        duration: 0.1,
174        ease: "none"
175      });
176    } else {
177      // 0.4 を超えたら 100vw, 100vh のまま固定
178      gsap.to(".top-concept-body__inner", {
179        width: "100vw",
180        height: "100vh",
181        duration: 0.1,
182        ease: "none"
183      });
184    }
185    if (progress <= 0.35) {
186      $('.top-concept-text-slider').removeClass('is-hide');
187    }else{
188      $('.top-concept-text-slider').addClass('is-hide');
189
190    }
191
192    // クラスの付与
193
194    $inner.removeClass('is-step1 is-step2 is-step3 is-step4 is-step5 is-step6 is-step7');
195    if (progress < 0.1) {
196      $inner.addClass('is-step1');
197    } else if (progress >= 0.1 && progress < 0.2) {
198      $inner.addClass('is-step2');
199    } else if (progress >= 0.2 && progress < 0.3) {
200      $inner.addClass('is-step3');
201    } else if (progress >= 0.3 && progress < 0.4) {
202      $inner.addClass('is-step4');
203    } else if (progress >= 0.4 && progress < 0.5) {
204      $inner.addClass('is-step5');
205    } else if (progress >= 0.5 && progress < 0.8) {
206      $inner.addClass('is-step6');
207    } else if (progress >= 0.8 && progress < 1) {
208      $inner.addClass('is-step7');
209    } else if (progress >= 1) {
210      $inner.addClass('is-step7');
211    }
212
213    if (progress >= 0.4){
214      gsap.to(".top-concept-body__inner", {
215        width: "100vw",
216        height: "100vh",
217        duration: 0.1,
218        ease: "none"
219      });
220
221    }
222  })
223  .addTo(controller);
224
225  // .top-concept-contents-wrapのスクロールシーンを追加
226  var contentWrapScene = new ScrollMagic.Scene({
227    triggerElement: ".top-concept-body", // トリガー要素を指定
228    triggerHook: 0, // ビューポートの上部でトリガー
229    offset: (0.4 * 1600), // progressが0.4になったタイミングで開始（1600vhの40%）
230    duration: "1000vh" // スクロールの持続時間（必要に応じて調整）
231  })
232    .setTween(gsap.to(".top-concept-contents-wrap .top-concept-contents", {
233      y: "-220vh", // 中身をスクロールに応じて上へ移動
234      ease: "none"
235    }))
236    .addTo(controller)
237    .on("end", function () {
238      // スクロール終了時に .top-concept-contents-wrap を通常の位置に戻す
239      $(".top-concept-contents-wrap").css({
240        position: "relative",
241        zIndex: 5 // 他の要素の上に残らないように z-index を下げる
242      });
243    });
244  //
245
246  // スクロールに応じた幅と高さの変更
247  var $aboutInner = $('.top-about-body__inner');
248  var aboutScene = new ScrollMagic.Scene({
249    triggerElement: ".top-about-body",
250    duration: "1000vh", // アニメーションの進行
251    triggerHook: 0
252  })
253  .setPin(".top-about-body") // トリガー要素を固定
254  .on("progress", function(event) {
255    var progress = event.progress;
256
257    if (progress == 0) {
258      $('.top-about-text-slider').removeClass('is-fixed');
259    }else if (progress <= 0.4) {
260      $('.top-about-text-slider').addClass('is-fixed');
261      var scaleProgress = progress / 0.4; // 0 から 0.4 を 0 から 1 にスケーリング

262      gsap.to(".top-about-body__inner", {
263        width: `${60 + (40 * scaleProgress)}vw`,  // 60vwから100vwまで
264        height: `${65 + (35 * scaleProgress)}vh`, // 65vhから100vhまで
265        duration: 0.1,
266        ease: "none"
267      });
268    } else {
269      gsap.to(".top-about-body__inner", {
270        width: "100vw",
271        height: "100vh",
272        duration: 0.1,
273        ease: "none"
274      });
275    }
276    // クラスの付与
277    $aboutInner.removeClass('is-step1');
278    $('.top-about-text-slider').removeClass('is-hide');
279    if (progress < 0.4) {
280    } else if (progress >= 0.4 && progress < 0.5) {
281      $('.top-about-text-slider').addClass('is-hide');
282    } else if (progress >= 0.5 && progress < 0.8) {
283      $aboutInner.addClass('is-step1');
284      $('.top-about-text-slider').addClass('is-hide');
285    } else if (progress >= 0.8 && progress < 1) {
286      $aboutInner.addClass('is-step1');
287      $('.top-about-text-slider').addClass('is-hide');
288    } else if (progress >= 1) {
289      $aboutInner.addClass('is-step1');
290      $('.top-about-text-slider').addClass('is-hide');
291    }
292  })
293  .addTo(controller);
294
295  // 冒頭で控えたMVのアニメーション進行位置を戻す
296  if (mvAnims) {
297    var mvDelta = performance.now() - mvAnimsAt;
298    mvEl.getAnimations({ subtree: true }

298).forEach(function (a) {
299      var saved = mvAnims.filter(function (s) {
300        return s.target === a.effect.target && s.name === a.animationName;
301      })[0];
302      var end = a.effect.getComputedTiming().endTime;
303      if (saved) {
304        a.currentTime = (saved.time || 0) + mvDelta;
305      } else if (isFinite(end)) {
306        // 控えた時点で終了済み（fillがbackwardsのNEWSフェード等は終了後に一覧から外れる）
307        a.currentTime = end;
308      }
309    });
310  }
311
312});
313
314//
315$(function () {
316  $('.top-mv-news__body').slick({
317    vertical: true, 
318    slidesToShow: 1,
319    autoplay: true,
320    autoplaySpeed: 6000,
321    arrows: false,
322    dots: false,
323    infinite: true,
324    speed: 1000 
325  });
326
327
328  $('.top-license-slider').slick({
329    autoplay: true,
330    autoplaySpeed: 0,
331    speed: 6000,
332    cssEase: "linear",
333    swipe: false,
334    arrows: false,
335    pauseOnFocus: false,
336    pauseOnHover: false,
337    variableWidth: true,
338    responsive: [
339      {
340        breakpoint: 750,
341        settings: {
342          //slidesToShow: 3,
343        }
344      }
345    ]
346  });
347  $('.top-license-slider-reverse').slick({
348    autoplay: true,
349    autoplaySpeed: 0,
350    speed: 6000,
351    cssEase: "linear",
352    swipe: false,
353    arrows: false,
354    pauseOnFocus: false,
355    pauseOnHover: false,
356    variableWidth: true,
357    rtl: true,
358    responsive: [
359      {
360        breakpoint: 750,
361        settings: {
362          //slidesToShow: 3,
363        }
364      }
365    ]
366  });
367  //
368  function applyMatchHeight() {
369    $('.top-feature-list__title').matchHeight();
370    $('.top-feature-list__text').matchHeight();
371  }
372  applyMatchHeight();
373  $('.top-feature-list').slick({
374    autoplay: true,
375    infinite: true,
376    autoplaySpeed: 5000,
377    speed: 600,
378    dots: false,
379    pauseOnFocus: false,
380    pauseOnHover: false,
381    prevArrow: $('.top-feature-control__prev'),
382    nextArrow: $('.top-feature-control__next'),
383    variableWidth: true,
384    responsive: [
385      {
386        breakpoint: 750,
387        settings: {
388          //slidesToShow: 3,
389        }
390      }
391    ]
392  }).on('setPosition', function () {
393    // slickのセットポジション（リサイズ・初期化など）で matchHeight を再適用
394    applyMatchHeight();
395  });
396});