https://parco.jp/assets/js/feature.js

1const pageUrl = location.hostname;
2const searchWord = ['en','tw','cn','ko','th'];
3const isIncludes = (arr, target) => arr.some(el => target.includes(el));
4
5const page_init = () => {
6  introAnimation();
7  lenisScrollInit();
8  imgSetEvent();
9  imgFit();
10  if( isIncludes(searchWord, pageUrl) == false){
11    splittypeInit();
12  }
13}
14
15
16const introAnimation = () => {
17  gsap.timeline()
18  .to('.intro',{
19    duration: .5,
20    opacity: 0,
21    display: 'none',
22    ease: 'Cubic.easeOut',
23    delay: 3,
24  })
25  .add(() => {
26    if( isIncludes(searchWord, pageUrl) == false){
27      typeWriterEvent();
28    }
29  });
30}
31
32const lenisScrollInit = () => {
33  const lenis = new Lenis({
34    lerp: 0.5, // 慣性の強さ
35    duration: 1, // スクロールアニメーションの時間
36  });
37  function raf(time) {
38    lenis.raf(time);
39    requestAnimationFrame(raf);
40  }
41  requestAnimationFrame(raf);
42}
43
44const splittypeInit = () =>{
45  const text = new SplitType('.feature_list__node_title');
46}
47
48const typeWriterEvent = () =>{
49  const elements = document.querySelectorAll('.feature_list__node_title');
50  elements.forEach((elem) => {
51    gsap.to( $(elem).find('.char'), {
52      opacity: 1,
53      duration: 0,
54      stagger: 0.05,　
55      scrollTrigger: {
56        trigger: elem,
57        start: 'top bottom',
58      }
59    });
60  });
61}
62
63const imgSetEvent = () => {
64
65  let imgSrc;
66  let imgTitle;
67  let imgLink;
68  let $target;
69  
70  imgSrc = $('.feature_list__node').eq(0).find('.feature_list__node_thumb').children();
71  imgTitle = $('.feature_list__node').eq(0).find('.feature_list__node_title').text();
72  imgLink = $('.feature_list__node').eq(0).find('a').attr('href');
73
74  $(imgSrc[0]).clone(true,false).replaceAll('.feature_img__bg > *');
75  $('.feature_img__title').text(imgTitle);
76  $('.feature_img a').attr('href' , imgLink);
77
78  $('.feature_list__node').on('mouseover',function(){
79    $target = $(this);
80    imgSrc = $target.find('.feature_list__node_thumb').children();
81    imgTitle = $target.find('.feature_list__node_title').text();
82    imgLink = $target.find('a').attr('href');
83    gsap.set(".feature_img", {opacity: 0});
84    $(imgSrc[0]).clone(true,false).replaceAll('.feature_img__bg > *');
85    $('.feature_img__title').text(imgTitle);
86    $('.feature_img a').attr('href' , imgLink);
87    gsap.timeline()
88    .to('.feature_img',{
89      duration: .5,
90      opacity: 1,
91      ease: 'Cubic.easeOut',
92    });
93  });
94}
95
96const imgFit = () => {
97  function resizeFeatureImg() {
98    const wrap = document.querySelector('.feature_img');
99    const bg = document.querySelector('.feature_img__bg');
100    if (!wrap || !bg) return;
101
102    const wrapW = wrap.clientWidth;
103    const wrapH = wrap.clientHeight;
104    const targetAspect = 291 / 410;
105
106    // 基準はwrap内に収まる最大サイズ
107    const wrapAspect = wrapW / wrapH;
108
109    if (wrapAspect > targetAspect) {
110      // 横長 → 高さ基準に合わせる
111      const height = wrapH;
112      const width = height * targetAspect;
113      bg.style.width = `${width}px`;
114      bg.style.height = `${height}px`;
115    } else {
116      // 縦長 → 横幅基準に合わせる
117      const width = wrapW;
118      const height = width / targetAspect;
119      bg.style.width = `${width}px`;
120      bg.style.height = `${height}px`;
121    }
122  }
123  window.addEventListener('load', resizeFeatureImg);
124  window.addEventListener('resize', resizeFeatureImg);
125
126  //PEK-11130 右クリック禁止
127  document.oncontextmenu = function () {return false;}
128}
129
130page_init();