https://www.powerweb.co.jp/assets/js/top.js

1
2
3//KeyVisual
4(function(){
5  const ioElement = document.createElement('div');
6  ioElement.style.position = 'absolute';
7  ioElement.style.top = '0px';
8  ioElement.style.pointerEvents = 'none';
9  ioElement.style.height = '10px';
10  document.body.appendChild(ioElement);
11
12  const kv = document.getElementById('top__kv');
13  const anim = kv.querySelector('.kv__anime');
14  const anim_item_arrows = kv.querySelectorAll('svg');
15  const service = document.getElementById('top__service');
16
17  anim.addEventListener('animationend',function(){
18    setIntersectionObserver2(ioElement,function(){
19      if(kv.classList.contains('__arrow-go')) {
20        anim_item_arrows.forEach(function(e) {
21          e.classList.add('arrow');
22        });
23        kv.classList.remove('__arrow-go');
24        kv.classList.add('__re-anime');
25      }
26    },function(){
27      if(!kv.classList.contains('__arrow-go')) {
28        kv.classList.add('__arrow-go');
29        kv.classList.remove('__re-anime');
30        anim_item_arrows.forEach(function(e) {
31          e.classList.remove('arrow');
32        });
33      }
34    });
35  });
36})();
37
38
39// (function(){
40//   const swiper = new Swiper(".swiper", {
41//     loop: true,
42//     loopAdditionalSlides: 2,
43//     loopedSlides: 2,
44//     speed: 500,
45//     navigation: {
46//       nextEl: ".swiper-button-next",
47//       prevEl: ".swiper-button-prev",
48//     },
49//     pagination: {
50//       el: ".swiper-pagination",
51//       type: "bullets",
52//       clickable: true,
53//     },
54//     spaceBetween: 30,
55//     breakpoints: {
56//       768: {
57//         centeredSlides: true,
58//         slidesPerView: 1,
59//         spaceBetween: 30,
60//       },
61//     },
62//   });
63
64//   const swiperClickClassName = "userVoice__swiper-notClick";
65//   const swiperClick = document.querySelectorAll("." + swiperClickClassName)[0];
66//   const swiperClickAction = () => {
67//     swiperClick.classList.remove(swiperClickClassName);
68//   };
69//   swiperClick.addEventListener("touchstart", swiperClickAction);
70// })();
71
72
73(function(){
74
75  if(document.getElementsByClassName('top_umv_slider' ).length) {
76
77    const mySwiper = new Swiper('.top_umv_slider', {
78      loop: true,
79      slidesPerView: 1,
80      autoplay: {
81        delay: 5000,
82      },
83      spaceBetween: '4%',
84      breakpoints: {
85        769: {
86          centeredSlides: true,
87          slidesPerView: 3,
88          spaceBetween: '4%',
89          autoplay: {
90            delay: 5000,
91          },
92          pagination: {
93            el: ".swiper-pagination",
94            type: "bullets",
95            clickable: true,
96          },
97        },
98      },
99
100
101    });
102  }    
103})();