1"use strict"; 2/* ========================================================================== */ 3// ã°ãã¼ãã«ã¹ã³ã¼ãå¤æ° GS_ÃÃà 4// å®è¡é¢æ°ã®èµ·å 5// å®è¡é¢æ° runÃÃÃ(); 6// æºåé¢æ° setÃÃÃ(); 7/* ========================================================================== */ 8 9 10/* ã°ãã¼ãã«ã¹ã³ã¼ãå¤æ° GS_ÃÃà 11============================================================================= */ 12const GS_spSize = 767; //SPåãæ¿ãæ°å¤ 13const GS_mediaQuery = window.matchMedia(`(width <= ${GS_spSize}px)`); //ã¡ãã£ã¢ã¯ã¨ãªåæ¿å¹ 14const GS_basicDuration = 500; //åºæ¬ã®ãã©ã³ã¸ã·ã§ã³åä½ã®æé 15// const cssRoot = document.querySelector(':root'); 16// const cssRootStyle = getComputedStyle(cssRoot); 17 18// ã¡ãã£ã¢ã¯ã¨ãªåæ¿ 19// const variablesCheckBreakPoint = (GS_mediaQuery) => { 20// if (GS_mediaQuery.matches){ 21// }else{ 22// } 23// }; 24// GS_mediaQuery.addEventListener('change',variablesCheckBreakPoint); 25// variablesCheckBreakPoint(GS_mediaQuery); 26 27 28/* å®è¡é¢æ°ã®èµ·å 29============================================================================= */ 30document.addEventListener('DOMContentLoaded',() => { 31 runScrolled(); //ã¹ã¯ãã¼ã«æ¤ç¥ 32 runScrollEnd(); //ã¹ã¯ãã¼ã«ããã¿ã¼æ¤ç¥ 33 runHeaderMenuOpen(); //SPã¡ãã¥ã¼å±é 34 runHashLinkSmoothScroll(); //ã¹ã ã¼ã¹ã¹ã¯ãã¼ã« 35 runAccordion(); //ã¢ã³ã¼ãã£ãªã³ 36 runTab(); //ã¿ãåãæ¿ã 37 runHeaderOverwrap(); //ãããã¼ã«ãã¼ãã¸ã¥ã¢ã«ã被ã£ã¦ããã¨ãã®å¦ç 38 runTextanimation(); //ããã¹ãã¢ãã¡ã¼ã·ã§ã³ 39 runPararaxanimation(); //ã¢ãã¡ã¼ã·ã§ã³ 40 runLineanimation(); //ã©ã¤ã³ã¢ãã¡ã¼ã·ã§ã³ 41}); 42window.addEventListener('load', () => { 43}); 44 45 46/* å®è¡é¢æ° 47============================================================================= */ 48 49/* ã¹ã¯ãã¼ã«æ¤ç¥ ï¼1ã¹ã¯ãã¼ã«ã§htmlã«ã¯ã©ã¹æ¯ãåãï¼ 50----------------------------------------------------------------------------- */ 51function runScrolled () { 52 const ioElement = document.createElement('div'); 53 54 ioElement.style.position = 'absolute'; 55 ioElement.style.top = '0px'; 56 ioElement.style.pointerEvents = 'none'; 57 58 const breakPoint = (GS_mediaQuery) => { 59 ioElement.style.height = `${setHeaderHeight()}px`; 60 } 61 GS_mediaQuery.addEventListener('change',breakPoint); 62 breakPoint(GS_mediaQuery); 63 64 document.body.appendChild(ioElement); 65 66 setIntersectionObserver(ioElement, () => { 67 document.documentElement.classList.remove('__scrolled'); 68 }, () => { 69 document.documentElement.classList.add('__scrolled'); 70 }); 71} 72 73/* ã¹ã¯ãã¼ã«ããã¿ã¼æ¤ç¥ 74----------------------------------------------------------------------------- */ 75function runScrollEnd () { 76 const footer = document.querySelector('.g-footer'); 77 78 setIntersectionObserver(footer, () => { 79 document.documentElement.classList.add('__scroll-end'); 80 }, () => { 81 document.documentElement.classList.remove('__scroll-end'); 82 }); 83} 84 85/* ã¡ãã¥ã¼å±é 86----------------------------------------------------------------------------- */ 87function runHeaderMenuOpen () { 88 const menu_button = document.querySelector('.g-header_menu-btn'); 89 const toggle_class = '__global_menu-open'; 90 91 menu_button.addEventListener('click', () => { 92 if (document.body.classList.contains(toggle_class)) { 93 document.body.classList.remove(toggle_class); 94 } else { 95 document.body.classList.add(toggle_class); 96 } 97 }); 98 99 const MenuBreakPoint = (GS_mediaQuery) => { 100 if (!GS_mediaQuery.matches && document.body.classList.contains(toggle_class)) { 101 document.body.classList.remove(toggle_class); 102 } 103 }; 104 GS_mediaQuery.addEventListener('change',MenuBreakPoint); 105 MenuBreakPoint(GS_mediaQuery); 106} 107 108 109/* ããã·ã¥ãªã³ã¯ã¯ãªãã¯ã«ããã¹ã ã¼ã¹ã¹ã¯ãã¼ã« 110----------------------------------------------------------------------------- */ 111function runHashLinkSmoothScroll () { 112 const local = window.location;
113 const myDir = local.pathname; 114 const smoothScrollLinks = document.querySelectorAll(`a[href^="#"],a[href^="${myDir}#"]`); 115 116 smoothScrollLinks.forEach((link) => { 117 let href = link.getAttribute('href').split('#'); 118 let target = document.getElementById(href[1]); 119 const handler = (e) => { 120 e.preventDefault(); 121 setSmoothScroll(target); 122 }; 123 link.addEventListener('click', handler); 124 link.addEventListener('remove_click', () => { 125 link.removeEventListener('click', handler); 126 }); 127 }); 128} 129 130 131/* ãããã¼ã«ãã¼ãã¸ã¥ã¢ã«ã被ã£ã¦ããã¨ãã®å¦ç 132----------------------------------------------------------------------------- */ 133function runHeaderOverwrap () { 134 if(document.body.classList.contains('header-overwrap')) { 135 const kv = document.querySelector('.js-header-overwrap-kv'); 136 const toggleClass = '__kv-leave'; 137 const headerHeight = setHeaderHeight() + 10; 138 setIntersectionObserver(kv, () => { 139 document.body.classList.remove(toggleClass); 140 },() => { 141 document.body.classList.add(toggleClass); 142 },`-${headerHeight}px`); 143 } 144} 145 146 147/* ã¢ã³ã¼ãã£ãªã³ 148----------------------------------------------------------------------------- */ 149function runAccordion () { 150 const accordionButtonGroups = document.querySelectorAll(".js-accordion-group"); 151 152 accordionButtonGroups.forEach((g) => { 153 const accordionButtons = g.querySelectorAll('.js-accordion-button'); 154 155 accordionButtons.forEach((e, i) => { 156 const targetID = e.getAttribute('aria-controls'); 157 const target = document.getElementById(targetID); 158 const myTarget = document.getElementById(e.getAttribute('aria-controls')); 159 160 const inSetAccordion = () => { 161 setAccordion(e,target); 162 for (let o = 0; o < accordionButtons.length; o++) {// ä»ã«éãã¦ããã¢ã³ã¼ãã£ãªã³ãããå ´åã¯éãã 163 if (o == i) continue; 164 if (accordionButtons[o].getAttribute("aria-expanded") === "true") { 165 const otherTargetID = accordionButtons[o].getAttribute('aria-controls'); 166 const otherTarget = document.getElementById(otherTargetID);
167 setAccordion(accordionButtons[o], otherTarget); 168 } 169 } 170 if(e.getAttribute('aria-expanded') === 'false') {// ã¢ã³ã¼ãã£ãªã³ãéããã¨ãã«ã¹ã¯ãã¼ã«ä½ç½®ãã¢ã³ã¼ãã£ãªã³è¦ç´ ããä¸ã«ããå ´åã¯ä¸ã«ã¹ã¯ãã¼ã« 171 const targetRect = target.getBoundingClientRect(); 172 if(targetRect.top < 0) { 173 Common.jump(window.pageYOffset + targetRect.top,{duration:basicDuration,onComplete:null,easing:setEasing("easeInOutQuad")}); 174 } 175 } 176 } 177 178 // ã¡ãã£ã¢ã¯ã¨ãªåæ¿ 179 const checkBreakPoint = (GS_mediaQuery) => { 180 if (GS_mediaQuery.matches){//ãã¿ã³ã«ã__spãã¯ã©ã¹ãã¤ãã¦ãæã¯SPã®ã¿åä½ 181 if(e.classList.contains('__sp')) { 182 e.setAttribute('aria-expanded','false'); 183 myTarget.setAttribute('aria-hidden','true'); 184 e.addEventListener('click',inSetAccordion); 185 }else if(e.classList.contains('__pc')) { 186 e.setAttribute('aria-expanded','true'); 187 myTarget.setAttribute('aria-hidden','false'); 188 e.removeEventListener('click',inSetAccordion); 189 } 190 }else{//ãã¿ã³ã«ã__pcãã¯ã©ã¹ãã¤ãã¦ãæã¯PCã®ã¿åä½ 191 if(e.classList.contains('__sp')) { 192 e.setAttribute('aria-expanded','true'); 193 myTarget.setAttribute('aria-hidden','false'); 194 e.removeEventListener('click',inSetAccordion); 195 }else if(e.classList.contains('__pc')) { 196 e.setAttribute('aria-expanded','false'); 197 myTarget.setAttribute('aria-hidden','true'); 198 e.addEventListener('click',inSetAccordion); 199 } 200 } 201 } 202 GS_mediaQuery.addEventListener('change',checkBreakPoint); 203 checkBreakPoint(GS_mediaQuery); 204 205 if(e.classList.contains('__sp') === false && e.classList.contains('__pc') === false) { 206 e.addEventListener('click',inSetAccordion); 207 } 208 }); 209 }); 210} 211 212 213/* ã¿ãåãæ¿ã 214ãªãã·ã§ã³ã2種è¨å®ããdata-optionã§æå® 215arrow â ç¢å°è¿½å 216scroll â ã¿ãã¯ãªãã¯æã«.js-tab-target_wrapè¦ç´ ã«ã¹ã¯ãã¼ã« 217 218â¼html 219<div class="js-tab-target_wrap" data-option="arrow,scroll"> 220 <div> 221 <div class="js-tab-button" aria-controls="id1" aria-expanded="true"> 222 <div class="js-tab-button" aria-controls="id2" aria-expanded="false"> 223 </div> 224 <div class="js-tab-target_wrap"> 225 <div class="js-tab-target" id="id1" aria-hidden="false"></div> 226 <div class="js-tab-target" id="id2" aria-hidden="true"></div> 227 </div> 228</div> 229----------------------------------------------------------------------------- */ 230function runTab () { 231 const tabButtonsGroups = document.querySelectorAll('.js-tab-group'); 232 233 const setTab = (e,t) => { 234 const g = e.closest('.js-tab-group'); 235 const tp = t.closest('.js-tab-target_wrap'); 236 const d = GS_basicDuration / 2; 237 238 let targetOpacity = 1; 239 let progress = 0; 240 let addition = 0; 241 242 g.style.pointerEvents = 'none'; 243 setTimeout(() => { 244 g.style.pointerEvents = null; 245 },d*2); 246 247 if (e.getAttribute('aria-expanded') === 'false') { 248 t.style.display = 'none'; 249 e.setAttribute('aria-expanded','true'); 250 t.setAttribute('aria-hidden','false'); 251 t.style.opacity = "0"; 252 setTimeout(() => { 253 t.style.display = null; 254 },d); 255 } else { 256 t.style.display = 'flex'; 257 tp.style.height = tp.offsetHeight + 'px'; 258 e.setAttribute('aria-expanded','false'); 259 t.setAttribute('aria-hidden','true'); 260 t.style.opacity = null; 261 setTimeout(() => { 262 t.style.display = null; 263 tp.style.height = null; 264 },d); 265 } 266 267 const inSetEasingIn = setEasing("easeInQuad"); 268 const inSetEasingOut = setEasing("easeOutQuad"); 269 270 const inSetLoop = (s) => { 271 progress = s - addition; 272 if (t.getAttribute('aria-hidden') === 'false') { 273 t.style.opacity = inSetEasingIn(progress, 0, targetOpacity, d); 274 }else { 275 t.style.opacity = inSetEasingOut(progress, targetOpacity, -targetOpacity, d); 276 } 277 278 if (progress < d) { 279 window.requestAnimationFrame(inSetLoop); 280 } else { 281 t.removeAttribute("style"); 282 e.style.pointerEvents = null; 283 } 284 } 285 286 if (t.getAttribute('aria-hidden') === 'false') { 287 setTimeout(() => { 288 window.requestAnimationFrame((s) => { 289 addition = s; 290 inSetLoop(s); 291 }); 292 },d); 293 } else { 294 window.requestAnimationFrame((s) => { 295 addition = s; 296 inSetLoop(s); 297 }); 298 } 299 } 300 301 const optionArrow = (g) => { 302 const targetWrap = g.querySelector('.js-tab-target_wrap'); 303 const tabButtons = g.querySelectorAll('.js-tab-button'); 304 const length = tabButtons.length-1; 305 const actionFrag = document.createDocumentFragment(); 306 const actionWrap = document.createElement('div'); 307 const prevButton = document.createElement('button'); 308 const pager = document.createElement('div'); 309 const nextButton = document.createElement('button'); 310 311 let now = g.querySelector(`.js-tab-button[aria-expanded="true"]`).dataset.tabNumber; 312 let prev = now == 0? length : parseInt(now)-1; 313 let next = now == length? 0 : parseInt(now)+1; 314 const config = { attributes: true, childList: false, subtree: false }; 315 const observer = new MutationObserver((mutations)=>{ 316 mutations.forEach((e) => { 317 if(e.attributeName == 'data-tab-current') { 318 now = e.target.dataset.tabCurrent; 319 prev = now == 0? length : parseInt(now)-1; 320 next = now == length? 0 : parseInt(now)+1; 321 // pager.querySelector('').classList.remove('__current'); 322 pager.querySelector(`.js-tab-target-pager-item.__current:not([data-number="${now}"])`).classList.remove('__current'); 323 pager.querySelector(`.js-tab-target-pager-item[data-number="${now}"]`).classList.add('__current'); 324 } 325 }); 326 });
327 328 actionWrap.classList.add('js-tab-target_actions'); 329 prevButton.classList.add('js-tab-target-arrow','-prev'); 330 pager.classList.add('js-tab-target-pager'); 331 nextButton.classList.add('js-tab-target-arrow','-next'); 332 for(let i = 0;i <= length;i++) { 333 const pagerItem = document.createElement('button'); 334 pagerItem.classList.add('js-tab-target-pager-item'); 335 if(i == now) pagerItem.classList.add('__current'); 336 pagerItem.dataset.number = i; 337 pager.appendChild(pagerItem); 338 } 339 actionWrap.appendChild(prevButton); 340 actionWrap.appendChild(pager); 341 actionWrap.appendChild(nextButton); 342 actionFrag.appendChild(actionWrap); 343 targetWrap.appendChild(actionFrag); 344 345 observer.observe(g, config); 346 347 prevButton.addEventListener('click',() => { 348 clickTabChange(g,prev); 349 }); 350 nextButton.addEventListener('click',() => { 351 clickTabChange(g,next); 352 }); 353 354 const pagerButtons = pager.querySelectorAll('.js-tab-target-pager-item'); 355 pagerButtons.forEach((e)=>{ 356 const number = e.dataset.number; 357 e.addEventListener('click',() => { 358 clickTabChange(g,number); 359 }); 360 }); 361 } 362 363 tabButtonsGroups.forEach((g) => { 364 const option = typeof g.dataset.option !== 'undefined'? g.dataset.option.split(',') : false; 365 const optionBool = (v) => { 366 if(option) { 367 return option.some(e => v === e); 368 }else { 369 return false; 370 } 371 } 372 373 const tabButtons = g.querySelectorAll('.js-tab-button'); 374 tabButtons.forEach((e,i) => { 375 const tabTargetID = e.getAttribute('aria-controls'); 376 const target = document.getElementById(tabTargetID); 377 g.dataset.tabCurrent = i; 378 e.dataset.tabNumber = i; 379 target.dataset.tabNumber = i; 380 e.addEventListener('click',() => { 381 clickTabChange(g,i); 382 }); 383 }); 384 385 if(optionBool('arrow')) optionArrow(g); 386 }); 387 388 function clickTabChange (g,i) { 389 const button = g.querySelector(`.js-tab-button[data-tab-number="${i}"]`); 390 const tabTargetID = button.getAttribute('aria-controls'); 391 const target = document.getElementById(tabTargetID); 392 const tabButtons = g.querySelectorAll('.js-tab-button'); 393 g.dataset.tabCurrent = i; 394 setTab(button,target); 395 for (let o = 0; o < tabButtons.length; o++) {// ä»ã«éãã¦ããã¢ã³ã¼ãã£ãªã³ãããå ´åã¯éãã 396 if (o == i) continue; 397 if (tabButtons[o].getAttribute('aria-expanded') === 'true') { 398 const otherTargetID = tabButtons[o].getAttribute('aria-controls'); 399 const otherTarget = document.getElementById(otherTargetID); 400 setTab(tabButtons[o], otherTarget); 401 } 402 } 403 } 404} 405 406 407function runTextanimation () { 408 //ããã¹ãã¢ãã¡ã¼ã·ã§ã³ gsap version3å¿ è¦ 409 var targets = document.querySelectorAll('[data-inviewtextanimation]:not([data-inviewtextanimation-ok])'); 410 var targetDataAttributes = [ 411 'data-inviewtextanimation-textanimation01', 412 'data-inviewtextanimation-textanimation02', 413 'data-inviewtextanimation-textanimation03', 414 'data-inviewtextanimation-textanimation04', 415 'data-inviewtextanimation-textanimation05', 416 'data-inviewtextanimation-textanimation06', 417 'data-inviewtextanimation-textanimation07', 418 'data-inviewtextanimation-textanimation08', 419 'data-inviewtextanimation-textanimation09', 420 'data-inviewtextanimation-textanimation10', 421 'data-inviewtextanimation-textanimation11', 422 ]; 423 var random = function(dist){ 424 if(Math.random()<0.5) { 425 return Math.random()*dist; 426 } else { 427 return -Math.random()*dist; 428 } 429 }; 430 431 var animationStart = function(targetDataAttribute, element) { 432 switch(targetDataAttribute) { 433 case 'data-inviewtextanimation-textanimation01': 434 gsap.set(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:0, top:30, position:'relative'}); 435 gsap.to(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:1, top:0, ease:'elastic.out(1, 0.2)', duration:1, stagger:0.1}); 436 break; 437 case 'data-inviewtextanimation-textanimation02': 438 gsap.set(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:0, position:'relative'}); 439 gsap.to(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:1, duration:1, stagger:0.03}); 440 break; 441 case 'data-inviewtextanimation-textanimation03': 442 gsap.set(element.querySelectorAll('[data-inviewtextanimation-char]'), {top:100, scale:0, rotation:90, position:'relative', display:'inline-block'});
443 gsap.to(element.querySelectorAll('[data-inviewtextanimation-char]'), {top:0, scale:1, rotation:0, ease:'elastic.out(1, 0.4)', duration:1, stagger:0.02}); 444 break; 445 case 'data-inviewtextanimation-textanimation04': 446 gsap.set(element.querySelectorAll('[data-inviewtextanimation-char]'), {left:-50, opacity:0, rotation:200, position:'relative', display:'inline-block'}); 447 gsap.to(element.querySelectorAll('[data-inviewtextanimation-char]'), {left:0, opacity:1, rotation:0, ease:'elastic.out(1, 0.4)', duration:2.6, stagger:0.08}); 448 break; 449 case 'data-inviewtextanimation-textanimation05': 450 gsap.set(element.querySelectorAll('[data-inviewtextanimation-char]'), {scale:0, rotation:180, position:'relative', display:'inline-block'}); 451 gsap.to(element.querySelectorAll('[data-inviewtextanimation-char]'), {scale:1, rotation:0, ease:'elastic.out(1, 0.4)', duration:2.6, stagger:0.06}); 452 break; 453 case 'data-inviewtextanimation-textanimation06': 454 gsap.set(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:0, top:30, rotationY:360, position:'relative', display:'inline-block'}); 455 gsap.to(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:1, top:0, rotationY:0, ease:'power3.out', duration:2.6, stagger:0.06}); 456 break; 457 case 'data-inviewtextanimation-textanimation07': 458 gsap.set(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:0, position:'relative', display:'inline-block'}); 459 gsap.to(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:1, ease:'power3.out', duration:2.6, stagger:0.06}); 460 break; 461 case 'data-inviewtextanimation-textanimation08': 462 gsap.set(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:0, rotateX:function(){return -80+(Math.random()*160)}, rotateY:function(){return -80+(Math.random()*160)}, x:function(){return -20+(Math.random()*40)}, y:function(){return -20+(Math.random()*40)}, display:'inline-block', position:'relative'}); 463 gsap.to(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:1, rotateX:0, rotateY:0, x:0, y:0, ease:'power3.out', duration:1.8, stagger:0.01}); 464 break; 465 case 'data-inviewtextanimation-textanimation09': 466 gsap.set(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:0, top:30, display:'inline-block'}); 467 gsap.to(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:1, top:0, ease:'power2.out', duration:1.0, stagger:0.06}); 468 break; 469 case 'data-inviewtextanimation-textanimation10': 470 gsap.set(element, {perspective:60}); 471 gsap.set(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:0, scale:0, y:80, rotationX:180, display:'inline-block'}); 472 gsap.to(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:1, scale:1, y:0, rotationX:0, transformOrigin:"0% 50% -50", ease:'back', duration:1.0, stagger:0.06}, '+=0'); 473 break; 474 case 'data-inviewtextanimation-textanimation11': 475 gsap.set(element, {perspective:400}); 476 var aaa = element.querySelectorAll('[data-inviewtextanimation-char]'); 477 for(var h = 0; h < aaa.length; h++) { 478 gsap.set(aaa[h], {opacity:0, scale:0, x:random(300), y:random(300), z:random(300), display:'inline-block'}); 479 } 480 gsap.to(element.querySelectorAll('[data-inviewtextanimation-char]'), {opacity:1, scale:1, x:0, y:0, z:0, transformOrigin:'0% 50% -50', duration:1.4, stagger:0.06}, '+=0'); 481 break; 482 } 483 gsap.set(element, {opacity:1}); 484 }; 485 486 var animationInit = function(targetDataAttribute, element){ 487 var chars = element.innerHTML.split(''); 488 var innerHTMLValue = ''; 489 element.innerHTML = ''; 490 var flg = false; 491 for(var k = 0; k < chars.length; k++) { 492 if(chars[k] == ' ' || chars[k] == '' || chars[k] == "\n") continue; 493 if(chars[k] == '<') flg = true; 494 if(flg) { 495 innerHTMLValue += chars[k]; 496 }else{ 497 if(chars[k] == ' ') chars[k] = '&' + 'nbsp;'; 498 innerHTMLValue += '<' + 'span data-inviewtextanimation-char>' + chars[k] + '<' + '/span>'; 499 } 500 if(chars[k] == '>') flg = false; 501 } 502 503 //ç¹æ®æåã®ç½®æ 504 var checkstrs = {}; 505 checkstrs['&' + 'amp;'] = '&'; 506 checkstrs['&' + 'quot;'] = '"'; 507 checkstrs['&' + '#39;'] = "'"; 508 for(var key in checkstrs) { 509 var check = ''; 510 var str = key.split(''); 511 for(var h = 0; h < str.length; h++) { 512 check += '<' + 'span data-inviewtextanimation-char>' + str[h] + '<' + '/span>'; 513 } 514 innerHTMLValue = innerHTMLValue.replace(check, '<' + 'span data-inviewtextanimation-char>' + checkstrs[key] + '<' + '/span>'); 515 } 516 517 element.innerHTML = innerHTMLValue; 518 }; 519 520 for (var i = 0; i < targets.length; ++i) { 521 (function(target) { 522 //ãã©ã©ãã¯ã¹æ¸ã¿ 523 target.setAttribute('data-inviewtextanimation-ok', ''); 524 525 for (var h = 0; h < targetDataAttributes.length; h++) { 526 (function(targetDataAttribute) { 527 //ç¾å¨ã®è¦ç´ 528 if(target.hasAttribute(targetDataAttribute)) { 529 if(target.closest('[data-inviewtextanimation]')) { 530 animationInit(targetDataAttribute, target); 531 } 532 } 533 534 //åã®è¦ç´ 535 var elements = target.querySelectorAll('[' + targetDataAttribute + ']'); 536 if(elements.length) { 537 for (var j = 0; j < elements.length; j++) { 538 (function(element) { 539 if(element.closest('[data-inviewtextanimation]') == target) { 540 animationInit(targetDataAttribute, element); 541 } 542 }(elements[j])); 543 } 544 } 545 }(targetDataAttributes[h])); 546 } 547 548 //inview 549 var inviewElem = document.createElement('div'); 550 inviewElem.setAttribute('data-inviewtextanimation-inview', ''); 551 target.appendChild(inviewElem); 552 Common.inview(inviewElem, function(){
553 var allDelay = 100; 554 for (var h = 0; h < targetDataAttributes.length; h++) { 555 (function(targetDataAttribute) { 556 //ç¾å¨ã®è¦ç´ 557 if(target.hasAttribute(targetDataAttribute)) { 558 if(target.closest('[data-inviewtextanimation]')) { 559 setTimeout(function(){ 560 Common.addLoad(function(){//ç»é¢ã®èªã¿è¾¼ã¿å®äº 561 if(document.documentElement.hasClass('wf-loading')) {//ãã©ã³ããèªã¿è¾¼ãã§ããå ´å 562 var checkID = setInterval(function(){ 563 if(document.documentElement.hasClass('wf-active')) { 564 clearInterval(checkID); 565 animationStart(targetDataAttribute, target); 566 } 567 }, 33); 568 }else{ 569 animationStart(targetDataAttribute, target); 570 } 571 }); 572 }, allDelay + ((target.getAttribute(targetDataAttribute)?target.getAttribute(targetDataAttribute):0)*1000)); 573 } 574 } 575 576 //åã®è¦ç´ 577 var elements = target.querySelectorAll('[' + targetDataAttribute + ']'); 578 if(elements.length) { 579 for (var j = 0; j < elements.length; j++) { 580 (function(element) { 581 if(element.closest('[data-inviewtextanimation]') == target) { 582 setTimeout(function(){ 583 Common.addLoad(function(){//ç»é¢ã®èªã¿è¾¼ã¿å®äº 584 if(document.documentElement.hasClass('wf-loading')) {//ãã©ã³ããèªã¿è¾¼ãã§ããå ´å 585 var checkID = setInterval(function(){ 586 if(document.documentElement.hasClass('wf-active')) { 587 clearInterval(checkID); 588 animationStart(targetDataAttribute, element); 589 } 590 }, 33); 591 }else{ 592 animationStart(targetDataAttribute, element); 593 } 594 }); 595 }, allDelay + ((element.getAttribute(targetDataAttribute)?element.getAttribute(targetDataAttribute):0)*1000)); 596 } 597 }(elements[j])); 598 } 599 } 600 }(targetDataAttributes[h])); 601 } 602 }, null, '1px'); 603 }(targets[i])); 604 } 605} 606 607//ã¢ãã¡ã¼ã·ã§ã³ 608function runPararaxanimation () { 609 var init = function(){ 610 var targets = document.querySelectorAll('[data-pararax01]:not([data-pararax01-ok])'); 611 var targetDataAttributes = [ 612 'data-pararax01-opacity01', 613 'data-pararax01-opacity01b', 614 'data-pararax01-opacity02', 615 'data-pararax01-opacity03', 616 'data-pararax01-opacity04', 617 'data-pararax01-opacity05', 618 'data-pararax01-opacity06', 619 'data-pararax01-opacity07', 620 'data-pararax01-opacity08', 621 'data-pararax01-opacity09', 622 'data-pararax01-opacity10', 623 'data-pararax01-opacity11', 624 'data-pararax01-opacity12', 625 'data-pararax01-photo01a', 626 'data-pararax01-photo01b', 627 'data-pararax01-photo02a', 628 'data-pararax01-photo02b', 629 'data-pararax01-photo03a', 630 'data-pararax01-photo03b', 631 'data-pararax01-photo03c', 632 'data-pararax01-photo04a', 633 'data-pararax01-photo04b', 634 'data-pararax01-setclass', 635 ]; 636 637 //å¥ã®ã¢ãã¡ã¼ã·ã§ã³ 638 var animation = function(element){ 639 element.parentElement.style.perspective = '1000px'; 640 setTimeout(function(){ 641 element.parentElement.style.perspective = null; 642 }, 1200); 643 if(element.hasAttribute('data-pararax01-photo01a') || element.hasAttribute('data-pararax01-photo01b')) {//åçãã¯ãªãããã¹ã§æ¼åº 644 var baseSize; 645 if(element.hasAttribute('data-pararax01-photo01a')) { 646 baseSize = 50; 647 } else if(element.hasAttribute('data-pararax01-photo01b')) { 648 baseSize = 28; 649 } 650 var flg2 = false; 651 if(document.documentElement.hasClass('ie') || document.documentElement.hasClass('edge') || document.documentElement.hasClass('safari')) flg2 = true; 652 var random = function(dist){ 653 if(Math.random()<0.5) { 654 return Math.random()*dist; 655 } else { 656 return -Math.random()*dist; 657 } 658 }; 659 660 var w = element.clientWidth; 661 var h = element.clientHeight; 662 var size_w_length = Math.floor(w / baseSize); 663 var size_w = baseSize + (w % baseSize) / size_w_length; 664 var size_h_length = Math.floor(h / baseSize); 665 var size_h = baseSize + (h % baseSize) / size_h_length; 666 667 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 668 svg.setAttributeNS(null, 'width', w); 669 svg.setAttributeNS(null, 'height', h); 670 svg.setAttributeNS(null, 'viewBox', '0 0 '+w+' '+h); 671 var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs'); 672 var clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath'); 673 clipPath.id = Math.floor(Math.random()*1000000000); 674 for(var x = 0; x < size_w_length; x++) { 675 for(var y = 0; y < size_h_length; y++) { 676 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 677 rect.setAttributeNS(null, 'x', x*size_w); 678 rect.setAttributeNS(null, 'y', y*size_h); 679 rect.setAttributeNS(null, 'data-x', x); 680 rect.setAttributeNS(null, 'data-y', y); 681 rect.setAttributeNS(null, 'width', size_w+1); 682 rect.setAttributeNS(null, 'height', size_h+1); 683 if(flg2) { 684 svg.appendChild(rect); 685 } else { 686 clipPath.appendChild(rect); 687 } 688 } 689 } 690 defs.appendChild(clipPath); 691 svg.appendChild(defs); 692 element.appendChild(svg); 693 if(flg2) { 694 } else { 695 element.style.clipPath = element.style.webkitClipPath = 'url(#'+clipPath.id+')'; 696 } 697 698 var duration; 699 if(element.hasAttribute('data-pararax01-photo01a')) { 700 duration = 1.0; 701 } else if(element.hasAttribute('data-pararax01-photo01b')) { 702 duration = 1.2; 703 } 704 var rects = element.querySelectorAll('rect'); 705 var x,y; 706 var flg2 = false; 707 var dif = 0.024; 708 if(document.documentElement.hasClass('ie') || document.documentElement.hasClass('edge') || document.documentElement.hasClass('safari')) flg2 = true; 709 if(flg2) { 710 for(var h = 0; h < rects.length; h++) { 711 x = rects[h].getAttributeNS(null, 'data-x'); 712 y = rects[h].getAttributeNS(null, 'data-y'); 713 gsap.to(rects[h], {scale:0, transformOrigin:'right top', ease:'power3.out', duration:duration, delay:(y*dif)+(x*dif)+0.4}); 714 } 715 } else { 716 for(var h = 0; h < rects.length; h++) { 717 gsap.set(rects[h], {scale:0}); 718 x = rects[h].getAttributeNS(null, 'data-x'); 719 y = rects[h].getAttributeNS(null, 'data-y'); 720 gsap.to(rects[h], {scale:1, transformOrigin:'left top', duration:duration, delay:(y*dif)+(x*dif)}); 721 } 722 } 723 724 if(flg2) { 725 gsap.set({}, {delay:duration+(y*dif)+(x*dif), onComplete:function(){ 726 element.style.transform = 'rotate(0.03deg)'; 727 }}); 728 } else { 729 gsap.set({}, {delay:duration+(y*dif)+(x*dif), onComplete:function(){ 730 element.style.clipPath = element.style.webkitClipPath = null; 731 }}); 732 } 733 gsap.set({}, {delay:duration+(y*dif)+(x*dif), onComplete:function(){ 734 element.removeChild(svg); 735 }}); 736 737 element.addClass('init'); 738 } 739 740 if(element.hasAttribute('data-pararax01-photo02a') || element.hasAttribute('data-pararax01-photo02b') || element.hasAttribute('data-pararax01-photo03a') || element.hasAttribute('data-pararax01-photo03b') || element.hasAttribute('data-pararax01-photo03c')) {//åçãã¯ãªãããã¹ã§æ¼åº 741 var baseSize; 742 var flg2 = false; 743 if(document.documentElement.hasClass('ie') || document.documentElement.hasClass('edge') || document.documentElement.hasClass('safari')) flg2 = true; 744 if(flg2) { 745 baseSize = 20; 746 } else { 747 baseSize = 40; 748 } 749 var random = function(dist){ 750 if(Math.random()<0.5) { 751 return Math.random()*dist; 752 } else { 753 return -Math.random()*dist; 754 } 755 }; 756 757 var w = element.clientWidth; 758 var h = element.clientHeight; 759 var size_w_length = Math.floor(w / baseSize); 760 var size_w = baseSize + (w % baseSize) / size_w_length; 761 var size_h_length = Math.floor(h / baseSize); 762 var size_h = baseSize + (h % baseSize) / size_h_length; 763 764 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 765 svg.setAttributeNS(null, 'width', w); 766 svg.setAttributeNS(null, 'height', h); 767 svg.setAttributeNS(null, 'viewBox', '0 0 '+w+' '+h); 768 var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs'); 769 var clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath'); 770 clipPath.id = Math.floor(Math.random()*1000000000); 771 if(element.hasAttribute('data-pararax01-photo02a') || element.hasAttribute('data-pararax01-photo03a')) { 772 for(var x = 0; x < size_w_length; x++) { 773 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 774 rect.setAttributeNS(null, 'x', x*size_w); 775 rect.setAttributeNS(null, 'y', 0); 776 rect.setAttributeNS(null, 'data-x', x); 777 rect.setAttributeNS(null, 'data-y', 0); 778 rect.setAttributeNS(null, 'width', size_w+1); 779 rect.setAttributeNS(null, 'height', h); 780 if(flg2) { 781 svg.appendChild(rect); 782 } else { 783 clipPath.appendChild(rect); 784 } 785 } 786 } else if(element.hasAttribute('data-pararax01-photo02b') || element.hasAttribute('data-pararax01-photo03b') || element.hasAttribute('data-pararax01-photo03c')) { 787 for(var y = 0; y < size_h_length; y++) { 788 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 789 rect.setAttributeNS(null, 'x', 0); 790 rect.setAttributeNS(null, 'y', y*size_h); 791 rect.setAttributeNS(null, 'data-x', 0); 792 rect.setAttributeNS(null, 'data-y', y); 793 rect.setAttributeNS(null, 'width', w); 794 rect.setAttributeNS(null, 'height', size_h+1); 795 if(flg2) { 796 svg.appendChild(rect); 797 } else { 798 clipPath.appendChild(rect); 799 } 800 } 801 } 802 defs.appendChild(clipPath); 803 svg.appendChild(defs); 804 element.appendChild(svg); 805 if(flg2) { 806 } else { 807 element.style.clipPath = element.style.webkitClipPath = 'url(#'+clipPath.id+')'; 808 } 809 810 var duration = 1.0; 811 var rects = element.querySelectorAll('rect'); 812 var x,y; 813 var flg2 = false; 814 var dif = 0.1; 815 if(document.documentElement.hasClass('ie') || document.documentElement.hasClass('edge') || document.documentElement.hasClass('safari')) flg2 = true; 816 if(flg2) { 817 for(var h = 0; h < rects.length; h++) { 818 if(element.hasAttribute('data-pararax01-photo02a')) { 819 gsap.to(rects[h], {scaleX:0, transformOrigin:'left top', duration:duration, delay:
819h*dif}); 820 } else if(element.hasAttribute('data-pararax01-photo02b')) { 821 gsap.to(rects[h], {scaleY:0, transformOrigin:'left top', duration:duration, delay:h*dif}); 822 } else if(element.hasAttribute('data-pararax01-photo03a')) { 823 gsap.to(rects[h], {scaleY:0, transformOrigin:'left top', duration:duration, delay:h*dif}); 824 } else if(element.hasAttribute('data-pararax01-photo03b')) { 825 gsap.to(rects[h], {scaleX:0, transformOrigin:'left top', duration:duration, delay:h*dif}); 826 } else if(element.hasAttribute('data-pararax01-photo03c')) { 827 gsap.to(rects[h], {scaleX:0, transformOrigin:'right top', duration:duration, delay:h*dif}); 828 } 829 } 830 } else { 831 for(var h = 0; h < rects.length; h++) { 832 if(element.hasAttribute('data-pararax01-photo02a')) { 833 gsap.set(rects[h], {scaleX:0, transformOrigin:'left top'}); 834 gsap.to(rects[h], {scaleX:1, transformOrigin:'left top', duration:duration, delay:h*dif}); 835 } else if(element.hasAttribute('data-pararax01-photo02b')) { 836 gsap.set(rects[h], {scaleY:0, transformOrigin:'left top'}); 837 gsap.to(rects[h], {scaleY:1, transformOrigin:'left top', duration:duration, delay:h*dif}); 838 } else if(element.hasAttribute('data-pararax01-photo03a')) { 839 gsap.set(rects[h], {scaleY:0, transformOrigin:'left top'}); 840 gsap.to(rects[h], {scaleY:1, transformOrigin:'left top', duration:duration, delay:h*dif}); 841 } else if(element.hasAttribute('data-pararax01-photo03b')) { 842 gsap.set(rects[h], {scaleX:0, transformOrigin:'left top'}); 843 gsap.to(rects[h], {scaleX:1, transformOrigin:'left top', duration:duration, delay:h*dif}); 844 } else if(element.hasAttribute('data-pararax01-photo03c')) { 845 gsap.set(rects[h], {scaleX:0, transformOrigin:'right top'}); 846 gsap.to(rects[h], {scaleX:1, transformOrigin:'right top', duration:duration, delay:h*dif}); 847 } 848 } 849 } 850 851 if(flg2) { 852 gsap.set({}, {delay:duration+(rects.length*dif), onComplete:function(){ 853 element.style.transform = 'rotate(0.03deg)'; 854 }}); 855 } else { 856 gsap.set({}, {delay:duration+(rects.length*dif), onComplete:function(){ 857 element.style.clipPath = element.style.webkitClipPath = null; 858 }}); 859 } 860 gsap.set({}, {delay:duration+(rects.length*dif), onComplete:function(){ 861 element.removeChild(svg); 862 }}); 863 864 element.addClass('init'); 865 } 866 867 if(element.hasAttribute('data-pararax01-photo04a') || element.hasAttribute('data-pararax01-photo04b')) {//åçãã¯ãªãããã¹ã§æ¼åº 868 var baseSize; 869 var flg2 = false; 870 if(document.documentElement.hasClass('ie') || document.documentElement.hasClass('edge') || document.documentElement.hasClass('safari')) flg2 = true; 871 if(flg2) { 872 baseSize = 40; 873 } else { 874 baseSize = 80; 875 } 876 var random = function(dist){ 877 if(Math.random()<0.5) { 878 return Math.random()*dist; 879 } else { 880 return -Math.random()*dist; 881 } 882 }; 883 884 var w = element.clientWidth; 885 var h = element.clientHeight; 886 var size_w_length = Math.floor(w / baseSize); 887 var size_w = baseSize + (w % baseSize) / size_w_length; 888 var size_h_length = Math.floor(h / baseSize); 889 var size_h = baseSize + (h % baseSize) / size_h_length; 890 var main_size_length; 891 var main_size; 892 if(size_w_length < size_h_length) { 893 main_size_length = size_h_length; 894 main_size = size_h; 895 } else { 896 main_size_length = size_w_length; 897 main_size = size_w; 898 } 899 900 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 901 svg.setAttributeNS(null, 'width', w); 902 svg.setAttributeNS(null, 'height', h); 903 svg.setAttributeNS(null, 'viewBox', '0 0 '+w+' '+h); 904 var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs'); 905 var clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath'); 906 clipPath.id = Math.floor(Math.random()*1000000000); 907 for(var h = -20; h < main_size_length+20; h++) { 908 var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 909 rect.setAttributeNS(null, 'x', -w*0.5); 910 rect.setAttributeNS(null, 'y', h*main_size); 911 rect.setAttributeNS(null, 'data-x', 0); 912 rect.setAttributeNS(null, 'data-y', h); 913 rect.setAttributeNS(null, 'width', w*2.0); 914 rect.setAttributeNS(null, 'height', main_size+1); 915 if(flg2) { 916 svg.appendChild(rect); 917 } else { 918 clipPath.appendChild(rect); 919 } 920 } 921 defs.appendChild(clipPath); 922 svg.appendChild(defs); 923 element.appendChild(svg); 924 if(flg2) { 925 } else { 926 element.style.clipPath = element.style.webkitClipPath = 'url(#'+clipPath.id+')'; 927 } 928 929 var duration = 1.4; 930 var rects = element.querySelectorAll('rect'); 931 var x,y; 932 var flg2 = false; 933 var dif = 0.06; 934 if(document.documentElement.hasClass('ie') || document.documentElement.hasClass('edge') || document.documentElement.hasClass('safari')) flg2 = true; 935 if(flg2) { 936 for(var h = 0; h < rects.length; h++) { 937 if(element.hasAttribute('data-pararax01-photo04a')) { 938 gsap.set(rects[h], {scaleY:1, rotate:45, transformOrigin:'center top'}); 939 gsap.to(rects[h], {scaleY:0, transformOrigin:'center top', duration:duration, delay:
939h*dif}); 940 } else if(element.hasAttribute('data-pararax01-photo04b')) { 941 gsap.set(rects[h], {scaleY:1, rotate:-45, transformOrigin:'center top'}); 942 gsap.to(rects[h], {scaleY:0, transformOrigin:'center top', duration:duration, delay:h*dif}); 943 } 944 } 945 } else { 946 for(var h = 0; h < rects.length; h++) { 947 if(element.hasAttribute('data-pararax01-photo04a')) { 948 gsap.set(rects[h], {scaleY:0, rotate:45, transformOrigin:'center top'}); 949 gsap.to(rects[h], {scaleY:1, transformOrigin:'center top', duration:duration, delay:h*dif}); 950 } else if(element.hasAttribute('data-pararax01-photo04b')) { 951 gsap.set(rects[h], {scaleY:0, rotate:-45, transformOrigin:'center top'}); 952 gsap.to(rects[h], {scaleY:1, transformOrigin:'center top', duration:duration, delay:h*dif}); 953 } 954 } 955 } 956 957 if(flg2) { 958 gsap.set({}, {delay:duration+(rects.length*dif)-1, onComplete:function(){ 959 element.style.transform = 'rotate(0.03deg)'; 960 }}); 961 } else { 962 gsap.set({}, {delay:duration+(rects.length*dif), onComplete:function(){ 963 element.style.clipPath = element.style.webkitClipPath = null; 964 }}); 965 } 966 gsap.set({}, {delay:duration+(rects.length*dif)-1, onComplete:function(){ 967 element.removeChild(svg); 968 }}); 969 970 element.addClass('init'); 971 } 972 973 if(element.hasClass('pararax01_pattern01')) {//ä¸ç·ã®ã¢ãã¡ã¼ã·ã§ã³å°ç¨ 974 for(var aaaa = 0; aaaa < element.querySelectorAll('.pararax01_pattern01_underline').length; aaaa++) { 975 element.querySelectorAll('.pararax01_pattern01_underline')[aaaa].style.transitionDuration = element.querySelectorAll('.pararax01_pattern01_underline')[aaaa].innerText.length*0.04+'s'; 976 } 977 } 978 }; 979 980 for (var i = 0; i < targets.length; ++i) { 981 (function(target) { 982 //ãã©ã©ãã¯ã¹æ¸ã¿ 983 target.setAttribute('data-pararax01-ok', ''); 984 985 //inview 986 var inviewElem = document.createElement('div'); 987 inviewElem.setAttribute('data-pararax01-inview', ''); 988 target.appendChild(inviewElem); 989 Common.inview(inviewElem, function(){ 990 var allDelay = 100; 991 for (var h = 0; h < targetDataAttributes.length; h++) { 992 (function(targetDataAttribute) { 993 //ç¾å¨ã®è¦ç´ 994 if(target.getAttribute(targetDataAttribute)) { 995 if(target.closest('[data-pararax01]')) { 996 setTimeout(function(){ 997 animation(target); 998 target.addClass('active'); 999 }, allDelay + ((target.getAttribute(targetDataAttribute)?target.getAttribute(targetDataAttribute):0)*1000)); 1000 } 1001 } 1002 1003 //åã®è¦ç´ 1004 var elements = target.querySelectorAll('[' + targetDataAttribute + ']'); 1005 if(elements.length) { 1006 for (var j = 0; j < elements.length; j++) { 1007 (function(element) { 1008 if(element.closest('[data-pararax01]') == target) { 1009 setTimeout(function(){ 1010 animation(element); 1011 element.addClass('active'); 1012 }, allDelay + ((element.getAttribute(targetDataAttribute)?element.getAttribute(targetDataAttribute):0)*1000)); 1013 } 1014 }(elements[j])); 1015 } 1016 } 1017 }(targetDataAttributes[h])); 1018 } 1019 }, null, '1px'); 1020 }(targets[i])); 1021 } 1022 }; 1023 Common.addLoad(function(){//ç»é¢ã®èªã¿è¾¼ã¿å®äº 1024 if(document.documentElement.hasClass('wf-loading')) {//ãã©ã³ããèªã¿è¾¼ãã§ããå ´å 1025 var checkID = setInterval(function(){ 1026 if(document.documentElement.hasClass('wf-active')) { 1027 clearInterval(checkID); 1028 init(); 1029 } 1030 }, 33); 1031 }else{ 1032 init(); 1033 } 1034 }); 1035} 1036 1037 1038function runLineanimation () { 1039 var areas = document.querySelectorAll('[data-svganimation02]'); 1040 1041 var tools = { 1042 //rect 1043 getRectLength:function(el){ 1044 return (el.getAttribute('width')*2)+(el.getAttribute('height')*2); 1045 }, 1046 //polygon 1047 getPolygonLength:function(el){ 1048 var points = el.getAttribute('points'); 1049 points = points.split(" "); 1050 var x1 = null, x2, y1 = null, y2 , lineLength = 0, x3, y3; 1051 for(var i = 0; i < points.length; i++){ 1052 var coords = points[i].split(","); 1053 if(coords.length < 2) continue; 1054 if(x1 == null && y1 == null){ 1055 1056 if(/(\r\n|\n|\r)/gm.test(coords[0])){ 1057 coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); 1058 coords[0] = coords[0].replace(/\s+/g,""); 1059 } 1060 1061 if(/(\r\n|\n|\r)/gm.test(coords[1])){ 1062 coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); 1063 coords[0] = coords[1].replace(/\s+/g,""); 1064 } 1065 1066 x1 = coords[0]; 1067 y1 = coords[1]; 1068 x3 = coords[0]; 1069 y3 = coords[1]; 1070 1071 }else{ 1072 1073 if(coords[0] != "" && coords[1] != ""){ 1074 1075 if(/(\r\n|\n|\r)/gm.test(coords[0])){ 1076 coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm,""); 1077 coords[0] = coords[0].replace(/\s+/g,""); 1078 } 1079 1080 if(/(\r\n|\n|\r)/gm.test(coords[1])){ 1081 coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm,""); 1082 coords[0] = coords[1].replace(/\s+/g,""); 1083 } 1084 1085 x2 = coords[0]; 1086 y2 = coords[1]; 1087 1088 lineLength += Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2));
1089 1090 x1 = x2; 1091 y1 = y2; 1092 if(i == points.length-2){ 1093 lineLength += Math.sqrt(Math.pow((x3-x1), 2)+Math.pow((y3-y1),2)); 1094 } 1095 1096 } 1097 } 1098 1099 } 1100 return lineLength; 1101 }, 1102 //line 1103 getLineLength:function(el){ 1104 var x1 = el.getAttribute('x1'); 1105 var x2 = el.getAttribute('x2'); 1106 var y1 = el.getAttribute('y1'); 1107 var y2 = el.getAttribute('y2'); 1108 var lineLength = Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2)); 1109 return lineLength; 1110 1111 }, 1112 //circle 1113 getCircleLength:function(el){ 1114 return 2 * Math.PI * el.getAttribute('r'); 1115 }, 1116 //path 1117 getPathLength:function(el){ 1118 return el.getTotalLength(); 1119 }, 1120 //ellipse 1121 getEllipseLength:function(el){ 1122 var rx = parseInt(el.attr('rx')); 1123 var ry = parseInt(el.attr('ry')); 1124 var h = Math.pow((rx-ry), 2) / Math.pow((rx+ry), 2); 1125 var totalLength = (Math.PI * ( rx + ry )) * (1 + ( (3 * h) / ( 10 + Math.sqrt( 4 - (3 * h) )) )); 1126 return totalLength; 1127 } 1128 , 1129 //polyline 1130 getPolylineLength:function(el){ 1131 var totalLength = 0; 1132 var prevPos; 1133 for (var i = 0 ; i < el.points.numberOfItems;i++) { 1134 var pos = el.points.getItem(i); 1135 if (i > 0) { 1136 totalLength += Math.sqrt(Math.pow((pos.x - prevPos.x), 2) + Math.pow((pos.y - prevPos.y), 2)); 1137 } 1138 prevPos = pos; 1139 } 1140 return totalLength; 1141 }, 1142 getLength:function(el) { 1143 var len; 1144 switch(el.tagName.toLowerCase()) { 1145 case 'rect': 1146 len = tools.getRectLength(el); 1147 break; 1148 case 'circle': 1149 len = tools.getCircleLength(el); 1150 break; 1151 case 'ellipse': 1152 len = tools.getEllipseLength(el); 1153 break; 1154 case 'line': 1155 len = tools.getLineLength(el); 1156 break; 1157 case 'path': 1158 len = tools.getPathLength(el); 1159 break; 1160 case 'polyline': 1161 len = tools.getPolylineLength(el); 1162 break; 1163 case 'polygon': 1164 len = tools.getPolygonLength(el); 1165 break; 1166 default: 1167 break; 1168 } 1169 len += 30; 1170 return len; 1171 } 1172 }; 1173 1174 for(var j = 0; j < areas.length; j++) { 1175 (function(area){ 1176 if(document.documentElement.hasClass('ie')) { 1177 } else { 1178 //ã©ã¤ã³ãå¼ãã¦æåãåããã¢ãã¡ã¼ã·ã§ã³ã®åã®è¨å® 1179 var targets = area.querySelectorAll('[data-svganimation02-target]'); 1180 (function(){ 1181 for(var i = 0; i < targets.length; i++) { 1182 var len = tools.getLength(targets[i]); 1183 if(targets[i].getAttributeNS(null, 'lineanimationrevease')) { 1184 targets[i].setAttributeNS(null, 'style', 'stroke-dashoffset: ' + len + 'px; stroke-dasharray: ' + len + ', ' + len + ';'); 1185 } else { 1186 targets[i].setAttributeNS(null, 'style', 'stroke-dashoffset: ' + (-len) + 'px; stroke-dasharray: ' + len + ', ' + len + ';'); 1187 } 1188 targets[i].setAttributeNS(null, 'data-drawline-value', -len); 1189 } 1190 })(); 1191 1192 Common.inview(area, function(){ 1193 var d_all = parseFloat(area.getAttribute('data-svganimation02')); 1194 if(d_all) { 1195 d_all = d_all*1000; 1196 } else { 1197 d_all = 0; 1198 } 1199 setTimeout(function(){ 1200 //ã©ã¤ã³ãå¼ãã¦æåãåããã¢ãã¡ã¼ã·ã§ã³ 1201 for(var i = 0; i < targets.length; i++) { 1202 var delay = targets[i].getAttributeNS(null, 'data-svganimation02-target'); 1203 if(!delay) delay = 0.0; 1204 delay = parseFloat(delay); 1205 gsap.to(targets[i], {duration:1.7, strokeDashoffset:0, delay:delay, ease:'power2.out'}); 1206 } 1207 }, d_all); 1208 }); 1209 } 1210 })(areas[j]); 1211 } 1212} 1213 1214 1215/* æºåé¢æ° 1216============================================================================= */ 1217 1218/* ãããã¼é«ãåå¾é¢æ° 1219----------------------------------------------------------------------------- */ 1220function setHeaderHeight () { 1221 let result; 1222 const checkBreakPoint = (GS_mediaQuery) => { 1223 if (GS_mediaQuery.matches){ 1224 result = document.querySelector('.g-header-logo').clientHeight; 1225 }else{ 1226 result = document.querySelector('.g-header').clientHeight; 1227 } 1228 }; 1229 GS_mediaQuery.addEventListener('change',checkBreakPoint); 1230 checkBreakPoint(GS_mediaQuery); 1231 1232 return result; 1233} 1234 1235/* ã¹ã ã¼ã¹ã¹ã¯ãã¼ã«èµ·åé¢æ° â»requestAnimationFrame 1236setSmoothScroll('ã¿ã¼ã²ããã®ã»ã¬ã¯ã¿â»åãã¼ã¸å ã«è¢«ããçºçããªãããã«æ³¨æ', '追å åã®scrollTopã®å¤' , 'ã
1236¢ãã¡ã¼ã·ã§ã³ã®æé'); 1237----------------------------------------------------------------------------- */ 1238const setSmoothScroll = (t, o = 0, d = GS_basicDuration) => { 1239 const target = t; 1240 let isScroll = false; 1241 const inSetEasing = setEasing('easeInOutQuad'); 1242 1243 if (target) { 1244 const clientRect = target.getBoundingClientRect(); 1245 const currentLocation = window.pageYOffset; 1246 const destination = 1247 0 < currentLocation + clientRect.top + o - setHeaderHeight() 1248 ? currentLocation + clientRect.top + o - setHeaderHeight() 1249 : 0; 1250 const length = destination - currentLocation; 1251 let progress = 0; 1252 let addition = 0; 1253 1254 isScroll = true; 1255 const inSetLoop = (s) => { 1256 progress = s - addition; 1257 window.scrollTo(0, inSetEasing(progress, currentLocation, length, d)); 1258 if (isScroll && progress < d) { 1259 window.requestAnimationFrame(inSetLoop); 1260 } else { 1261 isScroll = false; 1262 } 1263 }; 1264 window.requestAnimationFrame((s) => { 1265 addition = s; 1266 inSetLoop(s); 1267 }); 1268 1269 // window.addEventListener('wheel', () => { 1270 // isScroll = false; 1271 // }); 1272 } 1273} 1274 1275 1276/* ã¢ã³ã¼ãã£ãªã³èµ·åé¢æ° â»requestAnimationFrame 1277setAccordion('ã¯ãªãã¯è¦ç´ ï¼Elementåå¾æ¸ï¼', 'ééããè¦ç´ ï¼Elementåå¾æ¸ï¼' , 'ã¢ãã¡ã¼ã·ã§ã³ã®æé'); 1278----------------------------------------------------------------------------- */ 1279const setAccordion = (e, t, d) => { 1280 d = typeof d !== "undefined" ? d : GS_basicDuration; 1281 1282 let targetHeight = 0; 1283 let progress = 0; 1284 let addition = 0; 1285 1286 for (let i = 0; i < t.childElementCount; i++) { 1287 targetHeight += t.children[i].offsetHeight; 1288 } 1289 1290 if (e.getAttribute("aria-expanded") === "false") { 1291 t.style.height = "0px"; 1292 e.setAttribute("aria-expanded", true); 1293 t.setAttribute("aria-hidden", false); 1294 } else { 1295 t.style.height = targetHeight + "px"; 1296 e.setAttribute("aria-expanded", false); 1297 t.setAttribute("aria-hidden", true); 1298 } 1299 1300 const inSetEasing = setEasing("easeInOutQuad"); 1301 1302 const inSetLoop = (s) => { 1303 progress = s - addition; 1304 e.style.pointerEvents = 'none'; 1305 if (t.getAttribute("aria-hidden") === "false") { 1306 t.style.height = inSetEasing(progress, 0, targetHeight, d) + "px"; 1307 } else { 1308 t.style.height = inSetEasing(progress, targetHeight, -targetHeight, d) + "px"; 1309 } 1310 1311 if (progress < d) { 1312 window.requestAnimationFrame(inSetLoop); 1313 } else { 1314 t.removeAttribute("style"); 1315 e.style.pointerEvents = null; 1316 } 1317 }; 1318 1319 window.requestAnimationFrame((s) => { 1320 addition = s; 1321 inSetLoop(s); 1322 }); 1323} 1324 1325/* IntersectionObserver ã«ããã¹ã¯ãã¼ã«æ¤ç¥ 1326setIntersectionObserver(element, () => { 1327//ç»é¢å¤ 1328}, () => { 1329 setTimeout(() => { 1330//ç»é¢å 1331}); 1332----------------------------------------------------------------------------- */ 1333const setIntersectionObserver = (t, e, l, r = '0px') => { 1334 1335 new IntersectionObserver( 1336 l ? (entries, observer) => { 1337 if (entries[0].isIntersecting) { 1338 e(entries[0].target); 1339 } else { 1340 l(entries[0].target); 1341 } 1342 } : (entries, observer) => { 1343 if (entries[0].isIntersecting) { 1344 e(entries[0].target); 1345 observer.disconnect(); 1346 } 1347 }, 1348 { threshold: [0.0, 0.5, 1.0], rootMargin: r } 1349 ).observe(t); 1350} 1351 1352 1353/* ã¤ã¼ã¸ã³ã°é¢æ° 1354----------------------------------------------------------------------------- */ 1355const setEasing = (type) => { 1356 // linearTween 1357 if (type === 'linearTween') { 1358 return (t, b, c, d) => c * t / d + b; 1359 } 1360 // Quad 1361 else if (type === 'easeInQuad') { 1362 return (t, b, c, d) => c * (t /= d) * t + b; 1363 } else if (type === 'easeOutQuad') { 1364 return (t, b, c, d) => -c * (t /= d) * (t - 2) + b; 1365 } else if (type === 'easeInOutQuad') { 1366 return (t, b, c, d) => { 1367 if ((t /= d / 2) < 1) return c / 2 * t * t + b; 1368 return -c / 2 * ((--t) * (t - 2) - 1) + b; 1369 }; 1370 } 1371 // Sine 1372 else if (type === 'easeInSine') { 1373 return (t, b, c, d) => -c * Math.cos(t / d * (Math.PI / 2)) + c + b; 1374 } else if (type === 'easeOutSine') { 1375 return (t, b, c, d) => c * Math.sin(t / d * (Math.PI / 2)) + b; 1376 } else if (type === 'easeInOutSine') { 1377 return (t, b, c, d) => -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; 1378 } 1379 // Expo 1380 else if (type === 'easeInExpo') { 1381 return (t, b, c, d) => (t === 0 ? b : c * Math.pow(2, 10 * (t / d - 1)) + b); 1382 } else if (type === 'easeOutExpo') { 1383 return (t, b, c, d) => (t === d ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b); 1384 } else if (type === 'easeInOutExpo') { 1385 return (t, b, c, d) => { 1386 if (t === 0) return b; 1387 if (t === d) return b + c; 1388 if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b; 1389 return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; 1390 }; 1391 } 1392 // Circ 1393 else if (type === 'easeInCirc') { 1394 return (t, b, c, d) => -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; 1395 } else if (type === 'easeOutCirc') { 1396 return (t, b, c, d) => c * Math.sqrt(1 - (t = t / d - 1) * t) + b; 1397 } else if (type === 'easeInOutCirc') { 1398 return (t, b, c, d) => { 1399 if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; 1400 return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; 1401 }; 1402 } 1403 1404 // Cubic 1405 else if (type === 'easeInCubic') { 1406 return (t, b, c, d) => c * (t /= d) * t * t + b; 1407 } else if (type === 'easeOutCubic') { 1408 return (t, b, c, d) => c * ((t = t / d - 1) * t * t + 1) + b; 1409 } else if (type === 'easeInOutCubic') { 1410 return (t, b, c, d) => { 1411 if ((t /= d / 2) < 1) return c / 2 * t * t * t + b; 1412 return c / 2 * ((t -= 2) * t * t + 2) + b; 1413 }; 1414 } 1415 1416 // Quart 1417 else if (type === 'easeInQuart') { 1418 return (t, b, c, d) => c * (t /= d) * t * t * t + b; 1419 } else if (type === 'easeOutQuart') { 1420 return (t, b, c, d) => -c * ((t = t / d - 1) * t * t * t - 1) + b; 1421 } else if (type === 'easeInOutQuad') { 1422 return (t, b, c, d) => { 1423 if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; 1424 return -c / 2 * ((t -= 2) * t * t * t - 2) + b; 1425 }; 1426 } 1427 1428 // Quint 1429 else if (type === 'easeInQuint') { 1430 return (t, b, c, d) => c * (t /= d) * t * t * t * t + b; 1431 } 1432 else if (type === 'easeOutQuint') { 1433 return (t, b, c, d) => c * ((t = t / d - 1) * t * t * t * t + 1) + b; 1434 } 1435 else if (type === 'easeInOutQuint') { 1436 return (t, b, c, d) => { 1437 if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b; 1438 return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; 1439 }; 1440 } 1441 1442// Elastic 1443 else if(type === 'easeInElastic') { 1444 return (t, b, c, d) => { 1445 let s=1.70158;let p=0;let a=c; 1446 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 1447 if (a < Math.abs(c)) { a=c; s=p/4; } 1448 else s = p/(2*Math.PI) * Math.asin (c/a); 1449 return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 1450 }; 1451 } 1452 else if(type === 'easeOutElastic') { 1453 return (t, b, c, d) => { 1454 let s=1.70158;let p=0;let a=c; 1455 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 1456 if (a < Math.abs(c)) { a=c; s=p/4; } 1457 else s = p/(2*Math.PI) * Math.asin (c/a); 1458 return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 1459 }; 1460 } 1461 else if(type === 'easeInOutElastic') { 1462 return (t, b, c, d) => { 1463 let s=1.70158;let p=0;let a=c; 1464 if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); 1465 if (a < Math.abs(c)) { a=c; s=p/4; } 1466 else s = p/(2*Math.PI) * Math.asin (c/a); 1467 if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 1468 return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 1469 }; 1470 } 1471// Bounce 1472 else if(type === 'easeInBounce') { 1473 return (t, b, c, d) => { 1474 return c - setEasing('easeOutBounce') (d-t, 0, c, d) + b; 1475 }; 1476 } 1477 else if(type === 'easeOutBounce') { 1478 return (t, b, c, d) => { 1479 if ((t/=d) < (1/2.75)) { 1480 return c*(7.5625*t*t) + b; 1481 } else if (t < (2/2.75)) { 1482 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 1483 } else if (t < (2.5/2.75)) { 1484 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 1485 } else { 1486 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 1487 } 1488 }; 1489 } 1490 else if(type === 'easeInOutBounce') { 1491 return (t, b, c, d) => { 1492 if (t < d/2) return setEasing('easeInBounce') (t*2, 0, c, d) * .5 + b; 1493 return setEasing('easeOutBounce') (t*2-d, 0, c, d) * .5 + c*.5 + b; 1494 }; 1495 } 1496}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.