https://sycamorenin.com/wp-content/themes/tabi24/contents/sycamorenin/swiper/00-myjs.js

1// FancyBox ================= 
2Fancybox.bind("[data-fancybox]", {
3  backdropOpacity: 0.1, // this is not working
4});
5
6// NanoGallery ================= 
7function Demo_Mosaic_1() {
8        jQuery("#nanogallery").nanogallery2({
9
10itemsBaseURL : 'https://d3uytjpht2ze1y.cloudfront.net/sycamorenin/gallery/2025/02/',
11
12          // CONTENT SOURCE
13					items:[
14						{
15							src:          'https://vimeo.com/32875422',                           // media url
16							srct:         'https://i.vimeocdn.com/video/222726041_1280x720.jpg',  // media thumbnail url
17							title:        'Vimeo video',                                          // media title
18						},
19						{ src: 'https://www.youtube.com/watch?v=i5qOzqD9Rms', title: 'Youtube video' },
20						{ src: 'https://www.dailymotion.com/video/x7shbov',   title: 'Dailymotion video' },
21						{ src: 'berlin1.jpg',      srct: 'berlin1t.jpg',   title: 'Self hosted image' },
22						{ src: 'berlin2.jpg',      srct: 'berlin2t.jpg',   title: 'Self hosted image' },
23						{ src: 'berlin3.jpg',      srct: 'berlin3t.jpg',   title: 'Self hosted image' }
24					],
25					itemsBaseURL:    'https://nanogallery2.nanostudio.org/samples/',
26                
27          // GALLERY AND THUMBNAIL LAYOUT
28          galleryMosaic : [                       // default layout
29            { w: 2, h: 2, c: 1, r: 1 },
30            { w: 1, h: 1, c: 3, r: 1 },
31            { w: 1, h: 1, c: 3, r: 2 },
32            { w: 1, h: 2, c: 4, r: 1 },
33            { w: 2, h: 1, c: 5, r: 1 },
34            { w: 2, h: 2, c: 5, r: 2 },
35            { w: 1, h: 1, c: 4, r: 3 },
36            { w: 2, h: 1, c: 2, r: 3 },
37            { w: 1, h: 2, c: 1, r: 3 },
38            { w: 1, h: 1, c: 2, r: 4 },
39            { w: 2, h: 1, c: 3, r: 4 },
40            { w: 1, h: 1, c: 5, r: 4 },
41            { w: 1, h: 1, c: 6, r: 4 }
42          ],
43          galleryMosaicXS : [                     // layout for XS width
44            { w: 2, h: 2, c: 1, r: 1 },
45            { w: 1, h: 1, c: 3, r: 1 },
46            { w: 1, h: 1, c: 3, r: 2 },
47            { w: 1, h: 2, c: 1, r: 3 },
48            { w: 2, h: 1, c: 2, r: 3 },
49            { w: 1, h: 1, c: 2, r: 4 },
50            { w: 1, h: 1, c: 3, r: 4 }
51          ],
52          galleryMosaicSM : [                     // layout for SM width
53            { w: 2, h: 2, c: 1, r: 1 },
54            { w: 1, h: 1, c: 3, r: 1 },
55            { w: 1, h: 1, c: 3, r: 2 },
56            { w: 1, h: 2, c: 1, r: 3 },
57            { w: 2, h: 1, c: 2, r: 3 },
58            { w: 1, h: 1, c: 2, r: 4 },
59            { w: 1, h: 1, c: 3, r: 4 }
60          ],
61          galleryMaxRows: 1,
62          galleryDisplayMode: 'rows',
63          gallerySorting: 'random',
64          thumbnailDisplayOrder: 'random',
65
66          thumbnailHeight: '180', thumbnailWidth: '220',
67          thumbnailAlignment: 'scaled',
68          thumbnailGutterWidth: 0, thumbnailGutterHeight: 0,
69          thumbnailBorderHorizontal: 0, thumbnailBorderVertical: 0,
70
71          thumbnailToolbarImage: null,
72          thumbnailToolbarAlbum: null,
73          thumbnailLabel: { display: false },
74
75          // DISPLAY ANIMATION
76          // for gallery
77          galleryDisplayTransitionDuration: 1500,
78          // for thumbnails
79          thumbnailDisplayTransition: 'imageSlideUp',
80          thumbnailDisplayTransitionDuration: 1200,
81          thumbnailDisplayTransitionEasing: 'easeInOutQuint',
82          thumbnailDisplayInterval: 60,
83
84          // THUMBNAIL HOVER ANIMATION
85          thumbnailBuildInit2: 'image_scale_1.15',
86          thumbnailHoverEffect2: 'thumbnail_scale_1.00_1.05_300|image_scale_1.15_1.00',
87          touchAnimation: true,
88          touchAutoOpenDelay: 500,
89
90          // LIGHTBOX
91          viewerToolbar: { display: false },
92          viewerTools:    {
93            topLeft:   'label',
94            topRight:  'shareButton, rotateLeft, rotateRight, fullscreenButton, closeButton'
95          },
96
97          // GALLERY THEME
98          galleryTheme : { 
99            thumbnail: { background: '#111' },
100          },
101					
102          // DEEP LINKING
103          locationHash: true
104        });
105      }
106//Demo_Mosaic_1();
107
108
109// Gsap g-zoomout ================= 
110// 
111const boxes = gsap.utils.toArray('.g-zoomout');

112boxes.forEach(box => {
113gsap.from(box, { 
114autoAlpha: 0.8,
115scale: 0.8,
116    scrollTrigger: {
117      trigger: box,
118      scrub: true
119    }
120  })
121});
122
123
124// 
125// Swipers Hero ================= 
126// 
127
128const swiper = new Swiper('.hero02', {
129      effect: 'fade', // 'cube', 'fade', 'coverflow',
130      coverflowEffect: {
131        depth: 1000, // Depth offset in px (slides translate in Z axis)
132        modifier: 2, // Effect multipler
133        rotate: 50, // Slide rotate in degrees
134        slideShadows : false, // Enables slides shadows
135        stretch: 0, // Stretch space between slides (in px)
136      },
137    loop: true,
138    loopAdditionalSlides: 1,
139    speed: 1000, // 少しゆっくり(デフォルトは300)
140    autoplay: { 
141    delay: 5000, 	// 本番8000 (8 seconds) test: 4000
142    disableOnInteraction: true, // 矢印をクリックしても自動再生を止めない
143	//waitForTransition: false,
144  },
145    pagination: {
146     el: '.swiper-pagination',
147     clickable: true,
148    },
149//    virtual: {
150//      enabled: true,
151//    },
152  init: false, // ← イベント仕込み後に .init() するため
153  });
154
155
156// Swipers testimonial ================= 
157// 
158var swiper20 = new Swiper('.testimonial', {
159      effect: 'flip', // 'cube', 'fade', 'coverflow',
160    loop: true,
161    loopAdditionalSlides: 1,
162    speed: 1000, // 少しゆっくり(デフォルトは300)
163    autoplay: { 
164    delay: 4000, // 1.5秒後に次のスライド
165    disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
166	//waitForTransition: false,
167  },
168    pagination: {
169     el: '.swiper-pagination',
170     clickable: true,
171    },
172//    virtual: {
173//      enabled: true,
174//    },
175  });
176
177// Swipers Team ================= 
178// 
179const swiper21 = new Swiper(".team", {
180  loop: true,
181  grabCursor: true,
182  //autoHeight: true,
183  speed: 3000,
184  autoplay: {
185    delay: 0,
186    disableOnInteraction: false,
187  },
188  slidesPerView: 1,
189  breakpoints: {
190    600: {
191      slidesPerView: 3,
192      spaceBetween: 10,
193    },
194  },
195});
196
197// 
198// Swipers Postswiper Services ================= 
199// 
200const swiper10 = new Swiper(".postswiper", {
201  loop: true,
202  grabCursor: false,
203  //autoHeight: true,
204  speed: 6000,
205  //autoplay: {
206   // delay: 0,
207    //disableOnInteraction: false,
208  //},
209  slidesPerView: 1,
210  breakpoints: {
211    600: {
212      slidesPerView: 3,
213      spaceBetween: 10,
214    },
215  },
216    pagination: {
217     el: '.swiper-pagination',
218     clickable: true,
219    },
220});
221
222
223
224// 
225// Swiper GSAP Animation ================= 
226// 
227gsap.registerPlugin(SplitText);
228
229// ==============================================
230// Swiper + 動画/アニメ制御（loop対応・フル版）
231// - ポイント：document全体ではなく「スライド要素の中だけ」の <video> を制御
232// - previous：pause & reset、active：reset & play
233// - play() の Promise をcatchして自動再生ポリシーでも落ちないように保護
234// - loop:true の場合はクローン対策として realIndex を使って同一実スライド群を制御
235// ==============================================
236
237// 便利関数：指定スライド内の video を制御
238function controlVideosIn(slideEl, { pause = false, reset = false, play = false } = {}) {
239  if (!slideEl) return;
240  const vids = slideEl.querySelectorAll('video');
241  vids.forEach((v) => {
242    if (pause) v.pause();
243    if (reset) v.currentTime = 0;
244    if (play) {
245      // iOS/Chrome の自動再生対策（必要なら muted/playsinline を付与）
246      if (!v.hasAttribute('muted')) v.muted = true;
247      if (!v.hasAttribute('playsinline')) v.setAttribute('playsinline', '');
248      const p = v.play();
249      if (p && typeof p.catch === 'function') p.catch(() => {
250        // 自動再生が拒否された場合でも落ちないようにno-op
251      });
252    }
253  });
254}
255
256// 便利関数：実スライド(realIndex)から該当する全スライドDOMを取得（loop:true対策）
257function getSlidesByRealIndex(swiper, realIdx) {
258  return Array.from(swiper.slides).filter(
259    (s) => Number(s.getAttribute('data-swiper-slide-index')) === realIdx
260  );
261}
262
263// ---- ここからイベント定義 ----
264

265// 初期表示時の整え（★初期化後にやる）
266swiper.on('init', function () {
267  // 1) 各スライドに GSAP タイムラインを用意（init後ならクローン含めて全slidesにアクセス可）
268  swiper.slides.forEach((slide) => {
269    const title      = slide.querySelector(".heroTitle");
270    const subTitle   = slide.querySelector(".heroSubTitle");
271    const subTitle2  = slide.querySelector(".heroSubTitle2");
272    const message    = slide.querySelector(".heroMessage");
273    const bottom     = slide.querySelector(".heroBottom");
274
275    // 要素が無い場合に備えて安全に処理
276    let charsSplit = null;
277    if (subTitle) {
278      try {
279        charsSplit = SplitText.create(subTitle, { type: "chars" });
280      } catch (e) {
281        // SplitTextが要素未存在で落ちないように
282        charsSplit = null;
283      }
284    }
285
286    const tl = gsap.timeline({ paused: true });
287    if (title)     tl.from(title,     { xPercent: 500, opacity: 0, duration: 1 });
288    if (subTitle)  tl.from(subTitle,  { xPercent: 50, yPercent: 50, scale: 2, opacity: 0, ease: "back", duration: 1 });
289    if (message)   tl.from(message,   { xPercent: 50, yPercent: 100, scale: 2, opacity: 0, ease: "back", duration: 1 });
290    if (charsSplit && charsSplit.chars && charsSplit.chars.length) {
291      tl.from(charsSplit.chars, { x: 200, opacity: 0, yPercent: 50, stagger: 0.05 }, "-=0.5");
292    }
293    if (subTitle2) tl.from(subTitle2, { xPercent: 50, yPercent: 100, scale: 1.2, opacity: 0, ease: "back", duration: 1 });
294
295    slide.animation = tl;
296  });
297
298  // 2) 全スライド内の動画を一旦停止＆リセット
299  swiper.slides.forEach((slide) => controlVideosIn(slide, { pause: true, reset: true }));
300
301  // 3) 現在のアクティブ実スライド群（loop時は同一realIndexのクローンが複数ある）
302  const currReal = swiper.realIndex;
303  const currSlides = getSlidesByRealIndex(swiper, currReal);
304
305  // 4) アニメーション＆動画を現在スライド側で開始
306  currSlides.forEach((s) => {
307    if (s?.animation?.restart) s.animation.restart();
308    controlVideosIn(s, { reset: true, play: true });
309  });
310});
311
312// 変更時：アニメと動画をスライド単位で切り替え（トランジション開始で同期）
313swiper.on('slideChangeTransitionStart', function () {
314  const prevReal = swiper.previousRealIndex;
315  const currReal = swiper.realIndex;
316
317  const prevSlides = getSlidesByRealIndex(swiper, prevReal);
318  const currSlides = getSlidesByRealIndex(swiper, currReal);
319
320  // 前スライド群：アニメ停止・動画停止＆リセット
321  prevSlides.forEach((s) => {
322    if (s?.animation?.pause) s.animation.pause(0);
323    controlVideosIn(s, { pause: true, reset: true });
324  });
325
326  // 現スライド群：アニメ再始動・動画頭出し＆再生
327  currSlides.forEach((s) => {
328    if (s?.animation?.restart) s.animation.restart();
329    controlVideosIn(s, { reset: true, play: true });
330  });
331});
332
333// ---- 初期化実行（init:false のため必須） ----
334swiper.init();
335
336
337
338
339
340
341
342