PageSourceSearch

https://www.sktextile.com.tw/

html sktextile.com.tw collected 2026-10-04 18:05:47 UTC 93,371 bytes, 1,975 lines download raw bytes

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" lang="zh-TW">
4
5    <head>
6        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
8        <link rel="icon" href="https://www.sktextile.com.tw/ridea/npm/images/frontend/1690517180.ico" type="image/vnd.microsoft.icon" />
9        <link rel="icon" type="image/png" sizes="32x32" href="https://www.sktextile.com.tw/favicon-32x32.png">
10        <link rel="icon" type="image/png" sizes="16x16" href="https://www.sktextile.com.tw/favicon-16x16.png">
11        <link rel="manifest" href="https://www.sktextile.com.tw/site.webmanifest">
12        <link rel="mask-icon" href="https://www.sktextile.com.tw/safari-pinned-tab.svg" color="#5bbad5">
13        <link rel="apple-touch-icon" href="https://www.sktextile.com.tw/android-chrome-200X200.png">
14        <meta name="csrf-token" content="ej8aRCuALcE8oNF36nLacOgrHrp1tdE10qI6X3vk" />
15        
16                    <title>SHINKONG TEXTILE | 新光紡織股份有限公司</title>
17            <meta name     = "description"    content="Established in 1955, Shinkong Textile is a top-tier supplier of high-performance textiles, partnering with iconic global brands to produce exceptional value-added products." />
18            <meta name     = "keywords"       content="SHINKONG TEXTILE" />
19            <meta property = "og:title"       content="SHINKONG TEXTILE | 新光紡織股份有限公司" />
20            <meta property = "og:description" content="Established in 1955, Shinkong Textile is a top-tier supplier of high-performance textiles, partnering with iconic global brands to produce exceptional value-added products." />
21            <meta property = "og:image"       content="https://www.sktextile.com.tw/images/seo/1690509581463.jpg" />
22            <meta property = "og:url"         content="https://www.sktextile.com.tw" />
23            <meta property = "og:type"        content="website" />
24            <meta property = "og:image:width"  content="1200"/>
25            <meta property = "og:image:height" content="630"/>
26            <meta name="thumbnail"             content="https://www.sktextile.com.tw/images/thumbnail" />
27        
28        
29        
30        
31        <link rel="stylesheet" href="https://www.sktextile.com.tw/ridea/npm/css/frontend/theme.min.css">
32
33        
34                                    <link rel="stylesheet" href="https://www.sktextile.com.tw/ridea/npm/css/frontend/theme_en.min.css">
35                    
36        <link rel="stylesheet" href="https://www.sktextile.com.tw/ridea/npm/css/frontend/swiper.css">
37
38        
39        
40        
41        
41<script type="text/javascript" src="https://www.sktextile.com.tw/ridea/npm/js/frontend/manifest.js"></script>
41
42        
42<script type="text/javascript" src="https://www.sktextile.com.tw/ridea/npm/js/frontend/vendor.js"></script>
42
43        
43<script type="text/javascript" src="https://www.sktextile.com.tw/ridea/npm/js/frontend/app.js"></script>
43
44
45        
46        
47        
47<script type="text/javascript">
48            
49            
50            
51            $.ajaxSetup({
52                headers: {
53                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
54                }
55            });
56        </script>
56
57    </head>
58
59    <body>
60        <div id="rd-content">
61            
62            
63            
64            
65            
66            
67            
68            <div class="top" id="rd-header">
69    <a data-link-pause="true" href="https://www.sktextile.com.tw" class="logo">
70        <img class="logo-img" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\shin_logo.svg" alt="">
71    </a>
72    
73                                                            <a data-link-pause="true" href="https://www.sktextile.com.tw/tw" class="lang_top pc_pad">
74                    <span></span> 中 文
75                </a>
76                        </div>
77
78
79<div class="menu_nav">
80        <div class="menu">
81            <a href="#" class="menu-link rd-menu-link">
82                <p class="hamburger-icon">
83                    <span class="hamburger-bar hamburger-bar-1"></span>
84                    <span class="hamburger-bar hamburger-bar-2"></span>
85                    <span class="hamburger-bar hamburger-bar-3"></span>
86                </p>
87            </a>
88        </div>
89        
90        <div class="menu-overlay">
91            <nav class="overlay-menu">
92                <div class="w50">
93                    <div class="skong_menu_rpt">
94                        <div class="pt"></div>
95                        <div class="logo_wbk">
96                            <div class="logo_wbkpt"></div>
97                        </div>
98                        <p class="pc">Copyright © Shinkong Textile Co.,Ltd. All Rights Reserved.</p>
99                    </div>
100                </div>
101                <div class="w50">
102                    
103                    <div class="menu_open">
104                        <a href="#" class="menu-link rd-menu-link">
105                            <p class="hamburger-icon">
106                                <span class="hamburger-bar hamburger-bar-1"></span>
107                                <span class="hamburger-bar hamburger-bar-2"></span>
108                                <span class="hamburger-bar hamburger-bar-3"></span>
109                            </p>
110                        </a>
111                    </div>
112                    <div class="hbg_left clearfix">
113                        
114                        <div class="menu_text">
115                            <img src="https://www.sktextile.com.tw/ridea\npm\images\frontend\hbg_m.svg" alt="">
116                            <img src="https://www.sktextile.com.tw/ridea\npm\images\frontend\hbg_e.svg" alt="">
117                            <img src="https://www.sktextile.com.tw/ridea\npm\images\frontend\hbg_n.svg" alt="">
118                            <img src="https://www.sktextile.com.tw/ridea\npm\images\frontend\hbg_u.svg" alt="">
119                        </div>
120                        
121                        <div class="hbg_aitem">
122                            <a href="javascript:;" class="go-to-top-button"><p>TOP</p></a>
123                            <a data-link-pause="true" href="https://www.sktextile.com.tw/about-us"><p>ABOUT US</p></a>
124                            <a data-link-pause="true" href="https://www.sktextile.com.tw/news/list"><p>NEWS&amp;STORIES</p></a>
125                            <a data-link-pause="true" href="https://www.sktextile.com.tw/product"><p>PRODUCTS</p></a>
126                            <a data-link-pause="true" href="https://www.sktextile.com.tw/innovation/list"><p>INNOVATIONS</p></a>
127                            <a data-link-pause="true" href="https://www.sktextile.com.tw/investors"><p>INVESTORS</p></a>
128                            <a data-link-pause="true" href="https://www.sktextile.com.tw/careers"><p>CAREERS</p></a>
129                            <a data-link-pause="true" href="https://www.sktextile.com.tw/contact"><p>CONTACTS US</p></a>
130                        </div>
131                        <div class="other_item_menu">
132                            <div class="item_search">
133                                <form method="GET" action="https://www.sktextile.com.tw/search-result">
134                                    <input type="submit" class="search" value="">
135                                    <input name="q" placeholder="Item Search">
136                                </form>
137                            </div>
138                            
139                                                                                                                                                                                                            <a data-link-pause="true" href="https://www.sktextile.com.tw/tw" class="lang_top">
140                                            <span></span> 中 文
141                                        </a>
142                                                                                                                        </div>
143                    </div>
144                </div>
145            </nav>
146        </div>
147    </div>
148
149            <div class="cookie_jpbox">
150            <div class="menu_open">
151                <a href="javascript:;" class="menu-link show rd-privacy-close-button">
152                    <p class="hamburger-icon">
153                        <span class="hamburger-bar hamburger-bar-1"></span>
154                        <span class="hamburger-bar hamburger-bar-2"></span>
155                        <span class="hamburger-bar hamburger-bar-3"></span>
156                    </p>
157                </a>
158            </div>
159            <div class="cookie_text">
160                <p>This website uses cookies to ensure you get the best experience <a href="https://www.sktextile.com.tw/privacy">Privacy Policy</a></p>
161            </div>
162            <div class="">
163                <button type="button" class="rd-privacy-decline-button">Decline</button>
164                <button type="button" class="black rd-privacy-accept-button">Accept</button>
165            </div>
166        </div>
167    
167<script>
168    let privacy_site_url = 'https://www.sktextile.com.tw/privacy-ajax';
169
170    $(document).ready(function() {
171                    $('.cookie_jpbox').animate({opacity: 1}, 1000);
172        
173        $(".rd-menu-link").click(function(event) {
174            event.preventDefault();
175            $(".menu-overlay").toggleClass("open");
176            // $(".menu").toggleClass("open");
177            $(".menu_open a").toggleClass("show");
178            $(".menu_text img").toggleClass("move");
179            $(".logo_wbk").toggleClass("show");
180            $(".hbg_aitem").toggleClass("show");
181            $(".item_search").toggleClass("show");
182            $(".skong_menu_rpt p").toggleClass("show");
183        });
184
185        $('.rd-privacy-accept-button').on('click', function(){
186            cookieAjax('accept');
187            closePrivacyPopup();
188        });
189        
190        $('.rd-privacy-decline-button').on('click', function(){
191            cookieAjax('decline');
192            closePrivacyPopup();
193        });
194        
195        $('.rd-privacy-close-button').on('click', function(){
196            closePrivacyPopup();
197        });
198    });
199
200    function closePrivacyPopup(){
201        $('.cookie_jpbox').css('opacity', 0);
202    }
203
204    function cookieAjax(type){
205        $.ajax({
206                url: privacy_site_url + '?type=' + type,
207                type: "get",
208                datatype: "json",
209            })
210            .done(function(data)
211            {
212                if(data.result == 'accept'){
213                    var xhr = new XMLHttpRequest();
214                    xhr.open('GET', 'https://www.googletagmanager.com/gtag/js?id=G-29DVH988ZQ', true);
215                    xhr.onreadystatechange = function() {
216                        if (xhr.readyState === 4 && xhr.status === 200) {
217                            var script = document.createElement('script');
218                            script.type = 'text/javascript';
219                            script.src = 'https://www.googletagmanager.com/gtag/js?id=G-29DVH988ZQ';
220                            document.getElementsByTagName('head')[0].appendChild(script);
221
222                            var script2 = document.createElement('script');
223                            script2.type = 'text/javascript';
224                            script2.innerHTML = 'window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag(\'js\', new Date());gtag(\'config\', \'G-29DVH988ZQ\');';
225                            document.getElementsByTagName('head')[0].appendChild(script2);
226                        }
227                    };
228                    xhr.send();
229                }
230            });
231    }
232</script>
232
233
234            <div>
235                
236                
237                
238                    
239    
240    <div id="index_loading" style="position:fixed;width:100%;height:100%;left:0;top:0;z-index:999; background-color:#fff"></div>
241
242    <div class="" style="overflow:hidden;">
243    <div class="index_banner" id="rd-section-1">
244        <div class="cv_ww"></div>
245        <div id="rd-section-1-bg" style="height: 100%;width: 100%">
246            <!--rd-section-1-bg height: 100%;width: 100% -->
247            <div class="indpt" data-depth="0.5">
248                <!-- data-depth="0.5" -->
249                <div class="pt ban_cloth" data-paroller-factor='0.2'></div>
250            </div>
251        </div>
252        <div class="banner_text">
253            <img class="rd_banner_logo_img" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\shinlogo_l.svg" alt="">
254            <div class="text title_move">
255                <p id="rd-index-banner-text">“To stand still is to lag behind.”
256                    <span>– Ho-Su Wu, Founder of the Shinkong Group</span>
257                </p>
258            </div>
259        </div>
260        <a href="javascript:;" class="scrolldown for_index" id="rd-scroll-down"></a>
261    </div>
262    <div id="rd-scroll-down-anchor"></div>
263    <div class="indr_fixd">
264        <p id="draggable-number">01</p>
265        <span id="draggable-line"><b id="draggable"></b></span>
266        <p id="draggable-max-number">08</p>
267    </div>
268    <div class="indarea_box">
269        
270        
271        
272        <div class="index_area1 area_right clearfix" id="rd-section-2" data-id="1" data-pc-color="#000" data-mobile-color="#000">
273            
274            <div style="width:100%;height:100%" class="rd_index_area_1" id="rd-sun-banner-1">
275                <div class="w73 sun_w73">
276                    <div class="cloth_pt sun_pt">
277                        <img id="rd-sun-text-1" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\S_bk.svg" alt="" style="opacity: 0">
278                        <img id="rd-sun-text-2" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\U_bk.svg" alt="" style="opacity: 0">
279                        <img id="rd-sun-text-3" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\N_bk.svg" alt="" style="opacity: 0">
280                    </div>
281                </div>
282                <div class="w27 sun_w27">
283                    <div class="cloth_type">
284                        <div class="ct_top">
285                            <div class="cticon_box" id="rd-sun-text-4">
286                                <img src="https://www.sktextile.com.tw/ridea\npm\images\frontend\sun_icon.svg" alt="">
287                                <p>SUN</p>
288                            </div>
289                            
290                            <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/sun" class="explore mb_pad rd-sun-text-5">
291                                <span></span>
292                                <div class="view">
293                                    <p>Explore</p>
294                                    <p>Explore</p>
295                                </div>
296                            </a>
297                        </div>
298                        <div class="ct_dw sun_dw">
299                            <div class="my-paroller sun-paroller">
300                                <div class="fly_cloth fly_sun rd-fly-sun"></div>
301                            </div>
302                            <p id="rd-sun-text-6"> UV Protection</p>
303                        </div>
304                        
305                        <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/sun" class="explore pc_pad rd-sun-text-5">
306                            <span></span>
307                            <div class="view">
308                                <p>Explore</p>
309                                <p>Explore</p>
310                            </div>
311                        </a>
312                    </div>
313                </div>
314                <div id="rd-sun-delay"></div>
315            </div>
316        </div>
317        
318        <div class="index_area1 area_left clearfix" id="rd-section-3" data-id="2" data-pc-color="#000" data-mobile-color="#fff">
319            <div style="width:100%;height:100%" class="rd_index_area_1" id="rd-light-banner-1">
320                <div class="w73 light_w73">
321                    <div class="cloth_pt light_pt">
322                        <img id="rd-light-text-1" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\L.svg" alt="">
323                        <img id="rd-light-text-2" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\I.svg" alt="">
324                        <img id="rd-light-text-3" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\G.svg" alt="">
325                        <img id="rd-light-text-4" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\H.svg" alt="">
326                        <img id="rd-light-text-5" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\T.svg" alt="">
327                    </div>
328                </div>
329                <div class="w27 light_w27">
330                    <div class="cloth_type">
331                        <div class="ct_top">
332                            <div class="cticon_box" id="rd-light-text-6">
333                                <img src="https://www.sktextile.com.tw/ridea\npm\images\frontend\light_icon.svg" alt="">
334                                <p>LIGHT</p>
335                            </div>
336                            
337                            <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/light" class="explore mb_pad rd-light-text-7">
338                                <span></span>
339                                <div class="view">
340                                    <p>Explore</p>
341                                    <p>Explore</p>
342                                </div>
343                            </a>
344                        </div>
345                        <div class="ct_dw light_dw">
346                            <div class="my-paroller light-paroller">
347                                <div class="fly_cloth fly_light rd-fly-light"></div>
348                            </div>
349                            <p id="rd-light-text-8">Reflective Luminosity</p>
350                        </div>
351                        
352                        <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/light" class="explore pc_pad rd-light-text-7">
353                            <span></span>
354                            <div class="view">
355                                <p>Explore</p>
356                                <p>Explore</p>
357                            </div>
358                        </a>
359                    </div>
360                </div>
361                <div id="rd-light-delay"></div>
362            </div>
363        </div>
364        
365        <div class="index_area1 area_right clearfix" id="rd-section-4" data-id="3" data-pc-color="#fff" data-mobile-color="#fff">
366            <div style="width:100%;height:100%" class="rd_index_area_1" id="rd-earth-banner-1">
367                <div class="w73 earth_w73">
368                    <div class="cloth_pt earth_pt">
369                        <img id="rd-earth-text-1" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\E.svg" alt="">
370                        <img id="rd-earth-text-2" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\A.svg" alt="">
371                        <img id="rd-earth-text-3" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\R.svg" alt="">
372                        <img id="rd-earth-text-4" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\T.svg" alt="">
373                        <img id="rd-earth-text-5" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\H.svg" alt="">
374                    </div>
375                </div>
376                <div class="w27 earth_w27">
377                    <div class="cloth_type">
378                        <div class="ct_top">
379                            <div class="cticon_box" id="rd-earth-text-6">
380                                <img src="https://www.sktextile.com.tw/ridea\npm\images\frontend\earth_icon.svg" alt="">
381                                <p>EARTH</p>
382                            </div>
383                            
384                            <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/earth" class="explore mb_pad rd-earth-text-7">
385                                <span></span>
386                                <div class="view">
387                                    <p>Explore</p>
388                                    <p>Explore</p>
389                                </div>
390                            </a>
391                        </div>
392                        <div class="ct_dw earth_dw">
393                            <div class="my-paroller earth-paroller">
394                                <div class="fly_cloth fly_earth rd-fly-earth"></div>
395                            </div>
396                            <p id="rd-earth-text-8">Eco-Responsibility</p>
397                        </div>
398                        
399                        <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/earth" class="explore pc_pad rd-earth-text-7">
400                            <span></span>
401                            <div class="view">
402                                <p>Explore</p>
403                                <p>Explore</p>
404                            </div>
405                        </a>
406                    </div>
407                </div>
408                <div id="rd-earth-delay"></div>
409            </div>
410        </div>
411        
412        <div class="index_area1 area_left clearfix" id="rd-section-5" data-id="4" data-pc-color="#000" data-mobile-color="#000">
413            <div style="width:100%;height:100%" class="rd_index_area_1" id="rd-warmth-banner-1">
414                <div class="w73 warmth_w73">
415                    <div class="cloth_pt warmth_pt">
416                        <img id="rd-warmth-text-1" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\W_bk.svg" alt="">
417                        <img id="rd-warmth-text-2" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\A_bk.svg" alt="">
418                        <img id="rd-warmth-text-3" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\R_bk.svg" alt="">
419                        <img id="rd-warmth-text-4" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\M_bk.svg" alt="">
420                        <img id="rd-warmth-text-5" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\T_bk.svg" alt="">
421                        <img id="rd-warmth-text-6" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\H_bk.svg" alt="">
422                    </div>
423                </div>
424                <div class="w27 warmth_w27">
425                    <div class="cloth_type">
426                        <div class="ct_top">
427                            <div class="cticon_box" id="rd-warmth-text-7">
428                                <img src="https://www.sktextile.com.tw/ridea\npm\images\frontend\warmth_icon.svg" alt="">
429                                <p>WARMTH</p>
430                            </div>
431                            
432                            <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/warmth" class="explore mb_pad rd-warmth-text-8">
433                                <span></span>
434                                <div class="view">
435                                    <p>Explore</p>
436                                    <p>Explore</p>
437                                </div>
438                            </a>
439                        </div>
440                        <div class="ct_dw warmth_dw">
441                            <div class="my-paroller warmth-paroller">
442                                <div class="fly_cloth fly_warmth rd-fly-warmth"></div>
443                            </div>
444                            <p id="rd-warmth-text-9">Thermal Insulation &amp; Retention</p>
445                        </div>
446                        
447                        <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/warmth" class="explore pc_pad rd-warmth-text-8">
448                            <span></span>
449                            <div class="view">
450                                <p>Explore</p>
451                                <p>Explore</p>
452                            </div>
453                        </a>
454                    </div>
455                </div>
456                <div id="rd-warmth-delay"></div>
457            </div>
458        </div>
459        
460        <div class="index_area1 area_right clearfix" id="rd-section-6" data-id="5" data-pc-color="#fff" data-mobile-color="#fff">
461            <div style="width:100%;height:100%" class="rd_index_area_1" id="rd-rain-banner-1">
462                <div class="w73 rain_w73">
463                    <div class="cloth_pt rain_pt">
464                        <img id="rd-rain-text-1" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\R.svg" alt="">
465                        <img id="rd-rain-text-2" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\A.svg" alt="">
466                        <img id="rd-rain-text-3" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\I.svg" alt="">
467                        <img id="rd-rain-text-4" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\N.svg" alt="">
468                    </div>
469                </div>
470                <div class="w27 rain_w27">
471                    <div class="cloth_type">
472                        <div class="ct_top">
473                            <div class="cticon_box" id="rd-rain-text-5">
474                                <img class="pc_pad" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\rain_icon.svg" alt="">
475                                <img class="mb_pad" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\rain_icon_li.svg" alt="">
476                                <p>RAIN</p>
477                            </div>
478                            
479                            <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/rain" class="explore mb_pad rd-rain-text-7">
480                                <span></span>
481                                <div class="view">
482                                    <p>Explore</p>
483                                    <p>Explore</p>
484                                </div>
485                            </a>
486                        </div>
487                        <div class="ct_dw rain_dw">
488                        
489                            <div class="my-paroller rain-paroller">
490                                <div class="fly_cloth fly_rain rd-fly-rain"></div>
491                            </div>
492                            <p id="rd-rain-text-6">Water Resistance</p>
493                        </div>
494                        
495                        <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/rain" class="explore pc_pad rd-rain-text-7">
496                            <span></span>
497                            <div class="view">
498                                <p>Explore</p>
499                                <p>Explore</p>
500                            </div>
501                        </a>
502                    </div>
503                </div>
504                <div id="rd-rain-delay"></div>
505            </div>
506        </div>
507        
508        <div class="index_area1 area_left clearfix" id="rd-section-7" data-id="6" data-pc-color="#000" data-mobile-color="#000">
509            <div style="width:100%;height:100%" class="rd_index_area_1" id="rd-mobility-banner-1">
510                <div class="w73 mobility_w73">
511                    <div class="cloth_pt mobility_pt">
512                        <img id="rd-mobility-text-1" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\M.svg" alt="">
513                        <img id="rd-mobility-text-2" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\O.svg" alt="">
514                        <img id="rd-mobility-text-3" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\B.svg" alt="">
515                        <img id="rd-mobility-text-4" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\I.svg" alt="">
516                        <img id="rd-mobility-text-5" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\L.svg" alt="">
517                        <img id="rd-mobility-text-6" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\I.svg" alt="">
518                        <img id="rd-mobility-text-7" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\T.svg" alt="">
519                        <img id="rd-mobility-text-8" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\Y.svg" alt="">
520                    </div>
521                </div>
522                <div class="w27 mobility_w27">
523                    <div class="cloth_type">
524                        <div class="ct_top">
525                            <div class="cticon_box" id="rd-mobility-text-9">
526                                <img src="https://www.sktextile.com.tw/ridea\npm\images\frontend\mobility_icon.svg" alt="">
527                                <p>MOBILITY</p>
528                            </div>
529                            
530                            <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/mobility" class="explore mb_pad rd-mobility-text-11">
531                                <span></span>
532                                <div class="view">
533                                    <p>Explore</p>
534                                    <p>Explore</p>
535                                </div>
536                            </a>
537                        </div>
538                        <div class="ct_dw mobility_dw">
539                            <div class="my-paroller mobility-paroller">
540                                <div class="fly_cloth fly_mobility rd-fly-mobility"></div>
541                            </div>
542                            <p id="rd-mobility-text-10">Stretch</p>
543                        </div>
544                        
545                        <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/mobility" class="explore pc_pad rd-mobility-text-11">
546                            <span></span>
547                            <div class="view">
548                                <p>Explore</p>
549                                <p>Explore</p>
550                            </div>
551                        </a>
552                    </div>
553                </div>
554                <div id="rd-mobility-delay"></div>
555            </div>
556        </div>
557        
558        <div class="index_area1 area_right clearfix" id="rd-section-8" data-id="7" data-pc-color="#000" data-mobile-color="#000">
559            <div style="width:100%;height:100%" class="rd_index_area_1" id="rd-cool-banner-1">
560                <div class="w73 cool_w73">
561                    <div class="cloth_pt cool_pt">
562                        <img id="rd-cool-text-1" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\C.svg" alt="">
563                        <img id="rd-cool-text-2" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\O.svg" alt="">
564                        <img id="rd-cool-text-3" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\O.svg" alt="">
565                        <img id="rd-cool-text-4" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\L.svg" alt="">
566                    </div>
567                </div>
568                <div class="w27 cool_w27">
569                    <div class="cloth_type">
570                        <div class="ct_top">
571                            <div class="cticon_box" id="rd-cool-text-5">
572                                <img class="pc_pad" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\cool_icon.svg" alt="">
573                                <img class="mb_pad" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\cool_icon2.svg" alt="">
574                                <p>COOL</p>
575                            </div>
576                            
577                            <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/cool" class="explore mb_pad rd-cool-text-7">
578                                <span></span>
579                                <div class="view">
580                                    <p>Explore</p>
581                                    <p>Explore</p>
582                                </div>
583                            </a>
584                        </div>
585                        <div class="ct_dw cool_dw">
586                            <div class="my-paroller cool-paroller">
587                                <div class="fly_cloth fly_cool rd-fly-cool"></div>
588                            </div>
589                            <p id="rd-cool-text-6">Heat Blocking &amp; Dissipation</p>
590                        </div>
591                        
592                        <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/cool" class="explore pc_pad rd-cool-text-7">
593                            <span></span>
594                            <div class="view">
595                                <p>Explore</p>
596                                <p>Explore</p>
597                            </div>
598                        </a>
599                    </div>
600                </div>
601                <div id="rd-cool-delay"></div>
602            </div>
603        </div>
604        
605        <div class="index_area1 area_left clearfix" id="rd-section-9" data-id="8" data-pc-color="#000" data-mobile-color="#000">
606            <div style="width:100%;height:100%" class="rd_index_area_1" id="rd-wind-banner-1">
607                <div class="w73 wind_w73">
608                    <div class="cloth_pt wind_pt">
609                        <img id="rd-wind-text-1" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\W_bk.svg" alt="">
610                        <img id="rd-wind-text-2" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\I_bk.svg" alt="">
611                        <img id="rd-wind-text-3" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\N_bk.svg" alt="">
612                        <img id="rd-wind-text-4" src="https://www.sktextile.com.tw/ridea\npm\images\frontend\D_bk.svg" alt="">
613                    </div>
614                </div>
615                <div class="w27 wind_w27">
616                    <div class="cloth_type">
617                        <div class="ct_top">
618                            <div class="cticon_box" id="rd-wind-text-5">
619                                <img src="https://www.sktextile.com.tw/ridea\npm\images\frontend\wind_icon.svg" alt="">
620                                <p>WIND</p>
621                            </div>
622                            
623                            <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/wind" class="explore mb_pad rd-wind-text-7">
624                                <span></span>
625                                <div class="view">
626                                    <p>Explore</p>
627                                    <p>Explore</p>
628                                </div>
629                            </a>
630                        </div>
631                        <div class="ct_dw wind_dw">
632                            <div class="my-paroller wind-paroller">
633                                <div class="fly_cloth fly_wind rd-fly-wind"></div>
634                            </div>
635                            <p id="rd-wind-text-6">Wind Resistance</p>
636                        </div>
637                        
638                        <a data-link-pause="true" href="https://www.sktextile.com.tw/product/performance-functions/wind" class="explore pc_pad rd-wind-text-7">
639                            <span></span>
640                            <div class="view">
641                                <p>Explore</p>
642                                <p>Explore</p>
643                            </div>
644                        </a>
645                    </div>
646                </div>
647                <div id="rd-wind-delay"></div>
648            </div>
649        </div>
650    </div>
651</div>
652
653<script>
654
655    $( window ).on('load', function(){
656        $('.cticon_box').css('opacity', 0);
657        $('.explore').css('opacity', 0);
658        $('.ct_dw p').css('opacity', 0);
659        $('.cloth_pt img').css('opacity', 0);
660        $('.fly_cloth').css({'position': 'absolute', 'z-index' : 93});
661
662        let windowHeight = $(window).height();
663        let windowWidth = $(window).width();
664        let paddingTopPercent = 74;
665
666        setTimeout(() => {
667            if(windowWidth > 992){
668            paddingTopPercent = 151 * (windowHeight / windowWidth);
669
670            if(paddingTopPercent < 75){
671                paddingTopPercent = 75;
672            }
673
674            paddingTopPercent = paddingTopPercent + 1;
675
676            $('.cloth_pt').css('padding-top', paddingTopPercent + '%');
677        }
678        }, 500);
679        
680    });
681
682    $(function () {
683
684        
685        if($(window).width() > 992){
686            var animation = lottie.loadAnimation({
687                container: document.getElementById('index_loading'),
688                renderer: 'svg',
689                loop: false,
690                autoplay: false,
691                path: 'https://www.sktextile.com.tw/ridea/loading_data.json',
692            })
693        }else{
694            var animation = lottie.loadAnimation({
695                container: document.getElementById('index_loading'),
696                renderer: 'svg',
697                loop: false,
698                autoplay: false,
699                path: 'https://www.sktextile.com.tw/ridea/loading_mb.json',
700            })
701        }
702
703
704        animation.setSpeed(2);
705
706        animation.play();
707        $('html, body').css({
708            overflow: 'hidden',
709            height: '100%'
710        });
711        
712        animation.addEventListener('complete', function(){
713           $('#index_loading').fadeOut('slow');
714           $('html, body').css({
715                overflow: 'auto',
716                height: 'auto'
717            });
718            $('#rd-section-1').addClass('news_move');
719        });
720        //$('#index_loading').hide();
721
722        $('#draggable').css('height', '12.5%');
723
724        
725        $('#rd-scroll-down').on('click', function(){
726            $('html, body').animate({
727                scrollTop: $('#rd-scroll-down-anchor').offset().top
728            }, 3000);
729        });
730
731        scrollAnimate();
732        draggable();
733
734        
735        let scene = document.getElementById('rd-section-1-bg');
736        let parallaxInstance = new Parallax(scene,{hoverOnly: true});
737        parallaxInstance.scalar(3.0,3.0)
738        parallaxInstance.disable()
739
740        
741        $('#rd-section-1').mouseover(function () {
742            parallaxInstance.enable()
743        })
744        
745        $('#rd-section-1').mouseout(function () {
746            parallaxInstance.disable()
747            $('.indpt').css('transform', 'translate3d(0px, 0px, 0px)');
748        })
749
750        
751        
752        let old_window_width = $(window).width();
753        window.addEventListener('resize', function(){
754            let new_window_width = $(window).width();
755            if(new_window_width != old_window_width){
756                location.reload();
757            }
758        });
759
760        let sceneSunFrabic = gsap.timeline({repeat:-1, yoyo: true});
761        sceneSunFrabic.to(".rd-fly-sun", {y: 30, duration: 1.5}, 0);
762
763        let sceneLightFrabic = gsap.timeline({repeat:-1, yoyo: true});
764        sceneLightFrabic.to(".rd-fly-light", {y: 30, duration: 1.5}, 0);
765
766        let sceneEarthFrabic = gsap.timeline({repeat:-1, yoyo: true});
767        sceneEarthFrabic.to(".rd-fly-earth", {y: 30, duration: 1.5}, 0);
768
769        let sceneWarmthFrabic = gsap.timeline({repeat:-1, yoyo: true});
770        sceneWarmthFrabic.to(".rd-fly-warmth", {y: 30, duration: 1.5}, 0);
771
772        let sceneRainFrabic = gsap.timeline({repeat:-1, yoyo: true});
773        sceneRainFrabic.to(".rd-fly-rain", {y: 30, duration: 1.5}, 0);
774
775        let sceneMobilityFrabic = gsap.timeline({repeat:-1, yoyo: true});
776        sceneMobilityFrabic.to(".rd-fly-mobility", {y: 30, duration: 1.5}, 0);
777
778        let sceneCoolFrabic = gsap.timeline({repeat:-1, yoyo: true});
779        sceneCoolFrabic.to(".rd-fly-cool", {y: 30, duration: 1.5}, 0);
780
781        let sceneWindFrabic = gsap.timeline({repeat:-1, yoyo: true});
782        sceneWindFrabic.to(".rd-fly-wind", {y: 30, duration: 1.5}, 0);
783
784        $(window).on('scroll', function() {
785            $('.rd-fly-sun').isInViewport() ? sceneSunFrabic.play() : sceneSunFrabic.pause();
786            $('.rd-fly-light').isInViewport() ? sceneLightFrabic.play() : sceneLightFrabic.pause();
787            $('.rd-fly-earth').isInViewport() ? sceneEarthFrabic.play() : sceneEarthFrabic.pause();
788            $('.rd-fly-warmth').isInViewport() ? sceneWarmthFrabic.play() : sceneWarmthFrabic.pause();
789            $('.rd-fly-rain').isInViewport() ? sceneRainFrabic.play() : sceneRainFrabic.pause();
790            $('.rd-fly-mobility').isInViewport() ? sceneMobilityFrabic.play() : sceneMobilityFrabic.pause();
791            $('.rd-fly-cool').isInViewport() ? sceneCoolFrabic.play() : sceneCoolFrabic.pause();
792            $('.rd-fly-wind').isInViewport() ? sceneWindFrabic.play() : sceneWindFrabic.pause();
793        });
794    })
795
796    function isInViewport() {
797        var elementTop = $(this).offset().top;
798        var elementBottom = elementTop + $(this).outerHeight();
799
800        var viewportTop = $(window).scrollTop();
801        var viewportBottom = viewportTop + $(window).height();
802
803        return elementBottom > viewportTop && elementTop < viewportBottom;
804    };
805
806    function scrollAnimate() {
807
808        ScrollTrigger.create({});
809
810        createIndexScrollTrigger();
811
812        createScrollTrigger('#rd-section-2', 'move', 'move_out')
813        createScrollTrigger('#rd-section-3', 'move2', 'move_out2')
814        createScrollTrigger('#rd-section-4', 'move3', 'move_out3')
815        createScrollTrigger('#rd-section-5', 'move4', 'move_out4')
816        createScrollTrigger('#rd-section-6', 'move5', 'move_out5')
817        createScrollTrigger('#rd-section-7', 'move6', 'move_out6')
818        createScrollTrigger('#rd-section-8', 'move7', 'move_out7')
819        createScrollTrigger('#rd-section-9', 'move8', 'move_out8')
820
821    }
822
823    
824    function createIndexScrollTrigger(){
825        ScrollTrigger.matchMedia({
826            "(min-width: 993px)": function(){
827                /**==============
828         * 
829         * 首頁區塊
830         *  
831        ================= */
832
833        // 首圖鎖定
834        ScrollTrigger.create({
835            trigger: ".index_banner",
836            start: "top top",
837            end: "bottom+=500px top",
838            scrub: 1,
839            markers:false,
840            pin: true,   // pin the trigger element while active
841        });
842
843        // 首圖文字消失/顯示動畫
844        let sceneIndexText = gsap.timeline();
845        ScrollTrigger.create({
846            animation: sceneIndexText,
847            trigger: "#rd-section-1-bg",
848            start: "top+=100px top",
849            end: "bottom+=200px top",
850            scrub: 1,
851            markers:false,
852        });
853  
854        // 計算 header logo 起始位置
855        let window_height = $(window).height();
856        let logo_move_height = window_height * 0.5;
857
858        const getOffsetTop = element => {
859            let offsetTop = 0;
860            while(element) {
861              offsetTop += element.offsetTop;
862              element = element.offsetParent;
863            }
864            return offsetTop;
865        }
866        
867        const someElement = document.getElementById('rd-index-banner-text');
868        const indexBannerText = getOffsetTop(someElement);
869
870        if(logo_move_height > indexBannerText - 50){
871            logo_move_height = indexBannerText - 50;
872        }
873
874        sceneIndexText.fromTo(".logo", { y: logo_move_height }, {y:-0}, 0)
875        sceneIndexText.fromTo(".logo-img", { width: '130%', 'x': -60}, { width: '100%', 'x': 0}, 0)
876        // sceneIndexText.fromTo(".rd_banner_logo_img", { y: 0,  opacity:1 },{y:-100,  opacity:0}, 0)
877        sceneIndexText.fromTo(".scrolldown", { y: 0,  opacity:1 },{y:0,  opacity:0}, 0)
878
879        // 滾動視差
880        let sceneIndexParallaxImg = gsap.timeline();
881        ScrollTrigger.create({
882            animation: sceneIndexParallaxImg,
883            trigger: ".indpt",
884            start: "bottom+=500px top",
885            end: "bottom+=1600px top",
886            scrub: 1,
887            markers:false,
888        });
889        sceneIndexParallaxImg.fromTo("#rd-section-1-bg", { y: 0},{y: -100}, 0)
890
891        // 首圖微微放大 + 上移
892        let sceneIndexImg = gsap.timeline();
893        ScrollTrigger.create({
894            animation: sceneIndexImg,
895            trigger: ".indpt",
896            start: "top top",
897            end: "bottom+=1600px top",
898            scrub: 1,
899            markers:false,
900        });
901        sceneIndexImg.fromTo(".pt", {backgroundSize: 100, backgroundPosition: '50% 30%'}, {backgroundSize: 120, backgroundPosition: '50% 50%'}, 0)
902
903        /**==============
904         * 
905         * SUN 區塊
906         *  
907        ================= */
908
909        // SUN 區塊
910        ScrollTrigger.create({
911            trigger: "#rd-section-2",
912            start: "top top",
913            end: "bottom+=1100px top",
914            scrub: 1,
915            markers:false,
916            pin: true,   // pin the trigger element while active
917        });
918
919        // SUN 文字入場動畫
920        let sceneSunIn = gsap.timeline();
921        ScrollTrigger.create({
922            animation: sceneSunIn,
923            trigger: "#rd-sun-banner-1",
924            start: "top center-=20%",
925            end: "bottom center-=20%",
926            scrub: 1,
927            markers:false,
928        });
929        sceneSunIn.fromTo("#rd-sun-text-1", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
930        sceneSunIn.fromTo("#rd-sun-text-2", { y: 100,  opacity:0 },{y:0,  opacity:1}, 0)
931        sceneSunIn.fromTo("#rd-sun-text-3", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
932        sceneSunIn.fromTo("#rd-sun-text-4", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
933        sceneSunIn.fromTo("#rd-sun-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
934        sceneSunIn.fromTo(".rd-sun-text-5", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
935        sceneSunIn.fromTo("#rd-sun-delay", { x: 0,  opacity:0 },{x:0,  opacity:0}, ">")
936        
937        // SUN 文字出場動畫
938        let sceneSunOut = gsap.timeline();
939        ScrollTrigger.create({
940            animation: sceneSunOut,
941            trigger: "#rd-sun-banner-1",
942            start: "top+=800px top",
943            end: "bottom+=900px top",
944            scrub: 1,
945            markers:false,
946        });
947        sceneSunOut.fromTo("#rd-sun-text-1", { y: 0,  opacity:1, width:'8%'},{y:0,  opacity:0, width:'10%'}, 0)
948        sceneSunOut.fromTo("#rd-sun-text-2", { y: 0,  opacity:1, width:'8%'},{y:0,  opacity:0, width:'10%'}, ">")
949        sceneSunOut.fromTo("#rd-sun-text-3", { y: 0,  opacity:1, width:'8%'},{y:0,  opacity:0, width:'10%'}, ">")
950        sceneSunOut.fromTo("#rd-sun-text-4", { y: 0,  opacity:1 },{y:0,  opacity:0}
950, ">")
951        sceneSunOut.fromTo("#rd-sun-text-6", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
952        sceneSunOut.fromTo(".rd-sun-text-5", { x: 0,  opacity:1 },{x:100,  opacity:0}, ">")
953
954        // SUN 飛布滾動視差
955        let sceneSunFrabic = gsap.timeline();
956        ScrollTrigger.create({
957            animation: sceneSunFrabic,
958            trigger: "#rd-sun-banner-1",
959            start: "bottom+=900px top",
960            end: "bottom+=2000px top",
961            scrub: 1,
962            markers:false,
963        });
964        sceneSunFrabic.fromTo(".sun-paroller", { y: 0,  opacity:1 },{y:-500,  opacity:1}, 0)
965        
966        /**==============
967         * 
968         * LIGHT 區塊
969         *  
970        ================= */
971
972        // LIGHT 區塊
973        ScrollTrigger.create({
974            trigger: "#rd-section-3",
975            start: "top top",
976            end: "bottom+=1300px top",
977            scrub: 1,
978            markers:false,
979            pin: true,   // pin the trigger element while active
980        });
981
982        // LIGHT 文字入場動畫
983        let sceneLightIn = gsap.timeline();
984        ScrollTrigger.create({
985            animation: sceneLightIn,
986            trigger: "#rd-light-banner-1",
987            start: "top center-=20%",
988            end: "bottom center-=20%",
989            scrub: 1,
990            markers:false,
991        });
992        sceneLightIn.fromTo("#rd-light-text-1", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
993        sceneLightIn.fromTo("#rd-light-text-2", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
994        sceneLightIn.fromTo("#rd-light-text-3", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
995        sceneLightIn.fromTo("#rd-light-text-4", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
996        sceneLightIn.fromTo("#rd-light-text-5", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
997        sceneLightIn.fromTo("#rd-light-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
998        sceneLightIn.fromTo("#rd-light-text-8", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
999        sceneLightIn.fromTo(".rd-light-text-7", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1000        sceneLightIn.fromTo("#rd-light-delay", { x: 0,  opacity:0 },{x:0,  opacity:0}, ">")
1001
1002
1003        // LIGHT 文字出場動畫
1004        let sceneLightOut = gsap.timeline();
1005        ScrollTrigger.create({
1006            animation: sceneLightOut,
1007            trigger: "#rd-light-banner-1",
1008            start: "top+=800px top",
1009            end: "bottom+=1100px top",
1010            scrub: 1,
1011            markers:false,
1012        });
1013        sceneLightOut.fromTo("#rd-light-text-1", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, 0)
1014        sceneLightOut.fromTo("#rd-light-text-2", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1015        sceneLightOut.fromTo("#rd-light-text-3", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1016        sceneLightOut.fromTo("#rd-light-text-4", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1017        sceneLightOut.fromTo("#rd-light-text-5", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1018        sceneLightOut.fromTo("#rd-light-text-6", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1019        sceneLightOut.fromTo("#rd-light-text-8", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1020        sceneLightOut.fromTo(".rd-light-text-7", { x: 0,  opacity:1 },{x:100,  opacity:0}, ">")
1021        
1022        // LIGHT 飛布滾動視差
1023        let sceneLightFrabic = gsap.timeline();
1024        ScrollTrigger.create({
1025            animation: sceneLightFrabic,
1026            trigger: "#rd-light-banner-1",
1027            start: "bottom+=1100px top",
1028            end: "bottom+=2200px top",
1029            scrub: 1,
1030            markers:false,
1031        });
1032        sceneLightFrabic.fromTo(".light-paroller", { y: 0,  opacity:1 },{y:-500,  opacity:1}, 0)
1033
1034        /**==============
1035         * 
1036         * EARTH 區塊
1037         *  
1038        ================= */
1039
1040        // EARTH 區塊
1041        ScrollTrigger.create({
1042            trigger: "#rd-section-4",
1043            start: "top top",
1044            end: "bottom+=1300px top",
1045            scrub: 1,
1046            markers:false,
1047            pin: true,   // pin the trigger element while active
1048        });
1049        
1050        // EARTH 文字入場動畫
1051        let sceneEarthIn = gsap.timeline();
1052        ScrollTrigger.create({
1053            animation: sceneEarthIn,
1054            trigger: "#rd-earth-banner-1",
1055            start: "top center-=20%",
1056            end: "bottom center-=20%",
1057            scrub: 1,
1058            markers:false,
1059        });
1060        sceneEarthIn.fromTo("#rd-earth-text-1", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1061        sceneEarthIn.fromTo("#rd-earth-text-2", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1062        sceneEarthIn.fromTo("#rd-earth-text-3", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1063        sceneEarthIn.fromTo("#rd-earth-text-4", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1064        sceneEarthIn.fromTo("#rd-earth-text-5", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1065        sceneEarthIn.fromTo("#rd-earth-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1066        sceneEarthIn.fromTo("#rd-earth-text-8", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1067        sceneEarthIn.fromTo(".rd-earth-text-7", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1068        sceneEarthIn.fromTo("#rd-earth-delay", { x: 0,  opacity:0 },{x:0,  opacity:0}, ">")
1069
1070        // EARTH 文字出場動畫
1071        let sceneEarthOut = gsap.timeline();
1072        ScrollTrigger.create({
1073            animation: sceneEarthOut,
1074            trigger: "#rd-earth-banner-1",
1075            start: "top+=800px top",
1076            end: "bottom+=1100px top",
1077            scrub: 1,
1078            markers:false,
1079        });
1080        sceneEarthOut.fromTo("#rd-earth-text-1", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, 0)
1081        sceneEarthOut.fromTo("#rd-earth-text-2", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1082        sceneEarthOut.fromTo("#rd-earth-text-3", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1083        sceneEarthOut.fromTo("#rd-earth-text-4", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1084        sceneEarthOut.fromTo("#rd-earth-text-5", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1085        sceneEarthOut.fromTo("#rd-earth-text-6", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1086        sceneEarthOut.fromTo("#rd-earth-text-8", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1087        sceneEarthOut.fromTo(".rd-earth-text-7", { x: 0,  opacity:1 },{x:100,  opacity:0}, ">")
1088        
1089        // EARTH 飛布滾動視差
1090        let sceneEarthFrabic = gsap.timeline();
1091        ScrollTrigger.create({
1092            animation: sceneEarthFrabic,
1093            trigger: "#rd-earth-banner-1",
1094            start: "bottom+=1100px top",
1095            end: "bottom+=2200px top",
1096            scrub: 1,
1097            markers:false,
1098        });
1099        sceneEarthFrabic.fromTo(".earth-paroller", { y: 0,  opacity:1 },{y:-500,  opacity:1}, 0)
1100
1101        /**==============
1102         * 
1103         * WARMTH 區塊
1104         *  
1105        ================= */
1106
1107        // WARMTH 區塊
1108        ScrollTrigger.create({
1109            trigger: "#rd-section-5",
1110            start: "top top",
1111            end: "bottom+=1400px top",
1112            scrub: 1,
1113            markers:false,
1114            pin: true,   // pin the trigger element while active
1115        });
1116
1117        // WARMTH 文字入場動畫
1118        let sceneWarmthIn = gsap.timeline();
1119        ScrollTrigger.create({
1120            animation: sceneWarmthIn,
1121            trigger: "#rd-warmth-banner-1",
1122            start: "top center-=20%",
1123            end: "bottom center-=20%",
1124            scrub: 1,
1125            markers:false,
1126        });
1127        sceneWarmthIn.fromTo("#rd-warmth-text-1", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1128        sceneWarmthIn.fromTo("#rd-warmth-text-2", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1129        sceneWarmthIn.fromTo("#rd-warmth-text-3", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1130        sceneWarmthIn.fromTo("#rd-warmth-text-4", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1131        sceneWarmthIn.fromTo("#rd-warmth-text-5", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1132        sceneWarmthIn.fromTo("#rd-warmth-text-6", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1133        sceneWarmthIn.fromTo("#rd-warmth-text-7", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1134        sceneWarmthIn.fromTo("#rd-warmth-text-9", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1135        sceneWarmthIn.fromTo(".rd-warmth-text-8", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1136        sceneWarmthIn.fromTo("#rd-warmth-delay", { x: 0,  opacity:0 },{x:0,  opacity:0}
1136, ">")
1137
1138        // WARMTH 文字出場動畫
1139        let sceneWarmthOut = gsap.timeline();
1140        ScrollTrigger.create({
1141            animation: sceneWarmthOut,
1142            trigger: "#rd-warmth-banner-1",
1143            start: "top+=800px top",
1144            end: "bottom+=1200px top",
1145            scrub: 1,
1146            markers:false,
1147        });
1148        sceneWarmthOut.fromTo("#rd-warmth-text-1", { y: 0,  opacity:1, width:'9.5%' },{y:0,  opacity:0, width:'11.5%'}, 0)
1149        sceneWarmthOut.fromTo("#rd-warmth-text-2", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1150        sceneWarmthOut.fromTo("#rd-warmth-text-3", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1151        sceneWarmthOut.fromTo("#rd-warmth-text-4", { y: 0,  opacity:1, width:'9.5%' },{y:0,  opacity:0, width:'11.5%'}, ">")
1152        sceneWarmthOut.fromTo("#rd-warmth-text-5", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1153        sceneWarmthOut.fromTo("#rd-warmth-text-6", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1154        sceneWarmthOut.fromTo("#rd-warmth-text-7", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1155        sceneWarmthOut.fromTo("#rd-warmth-text-9", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1156        sceneWarmthOut.fromTo(".rd-warmth-text-8", { x: 0,  opacity:1 },{x:100,  opacity:0}, ">")
1157         
1158        // WARMTH 飛布滾動視差
1159        let sceneWarmthFrabic = gsap.timeline();
1160        ScrollTrigger.create({
1161            animation: sceneWarmthFrabic,
1162            trigger: "#rd-warmth-banner-1",
1163            start: "bottom+=1200px top",
1164            end: "bottom+=2300px top",
1165            scrub: 1,
1166            markers:false,
1167        });
1168        sceneWarmthFrabic.fromTo(".warmth-paroller", { y: 0,  opacity:1 },{y:-500,  opacity:1}, 0)
1169
1170        /**==============
1171         * 
1172         * RAIN 區塊
1173         *  
1174        ================= */
1175
1176        // RAIN 區塊
1177        ScrollTrigger.create({
1178            trigger: "#rd-section-6",
1179            start: "top top",
1180            end: "bottom+=1300px top",
1181            scrub: 1,
1182            markers:false,
1183            pin: true,   // pin the trigger element while active
1184        });
1185         
1186        // RAIN 文字入場動畫
1187        let sceneRainIn = gsap.timeline();
1188        ScrollTrigger.create({
1189            animation: sceneRainIn,
1190            trigger: "#rd-rain-banner-1",
1191            start: "top center-=20%",
1192            end: "bottom center-=20%",
1193            scrub: 1,
1194            markers:false,
1195        });
1196        sceneRainIn.fromTo("#rd-rain-text-1", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1197        sceneRainIn.fromTo("#rd-rain-text-2", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1198        sceneRainIn.fromTo("#rd-rain-text-3", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1199        sceneRainIn.fromTo("#rd-rain-text-4", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1200        sceneRainIn.fromTo("#rd-rain-text-5", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1201        sceneRainIn.fromTo("#rd-rain-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1202        sceneRainIn.fromTo(".rd-rain-text-7", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1203        sceneRainIn.fromTo("#rd-rain-delay", { x: 0,  opacity:0 },{x:0,  opacity:0}, ">")
1204
1205        // RAIN 文字出場動畫
1206        let sceneRainOut = gsap.timeline();
1207        ScrollTrigger.create({
1208            animation: sceneRainOut,
1209            trigger: "#rd-rain-banner-1",
1210            start: "top+=800px top",
1211            end: "bottom+=1100px top",
1212            scrub: 1,
1213            markers:false,
1214        });
1215        sceneRainOut.fromTo("#rd-rain-text-1", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, 0)
1216        sceneRainOut.fromTo("#rd-rain-text-2", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1217        sceneRainOut.fromTo("#rd-rain-text-3", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1218        sceneRainOut.fromTo("#rd-rain-text-4", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1219        sceneRainOut.fromTo("#rd-rain-text-5", { y: 0,  opacity:1 },{y:0,  opacity:0}
1219, ">")
1220        sceneRainOut.fromTo("#rd-rain-text-6", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1221        sceneRainOut.fromTo(".rd-rain-text-7", { x: 0,  opacity:1 },{x:100,  opacity:0}, ">")
1222        
1223        // RAIN 飛布滾動視差
1224        let sceneRainFrabic = gsap.timeline();
1225        ScrollTrigger.create({
1226            animation: sceneRainFrabic,
1227            trigger: "#rd-rain-banner-1",
1228            start: "bottom+=1100px top",
1229            end: "bottom+=2200px top",
1230            scrub: 1,
1231            markers:false,
1232        });
1233        sceneRainFrabic.fromTo(".rain-paroller", { y: 0,  opacity:1 },{y:-500,  opacity:1}, 0)
1234
1235        /**==============
1236         * 
1237         * MOBILITY 區塊
1238         *  
1239        ================= */
1240
1241        // MOBILITY 區塊
1242        ScrollTrigger.create({
1243            trigger: "#rd-section-7",
1244            start: "top top",
1245            end: "bottom+=1500px top",
1246            scrub: 1,
1247            markers:false,
1248            pin: true,   // pin the trigger element while active
1249        });
1250        
1251        // MOBILITY 文字入場動畫
1252        let sceneMobilityIn = gsap.timeline();
1253        ScrollTrigger.create({
1254            animation: sceneMobilityIn,
1255            trigger: "#rd-mobility-banner-1",
1256            start: "top center-=20%",
1257            end: "bottom center-=20%",
1258            scrub: 1,
1259            markers:false,
1260        });
1261        sceneMobilityIn.fromTo("#rd-mobility-text-1", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1262        sceneMobilityIn.fromTo("#rd-mobility-text-2", { y: -75,  opacity:0 },{y:0,  opacity:1}, 0)
1263        sceneMobilityIn.fromTo("#rd-mobility-text-3", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1264        sceneMobilityIn.fromTo("#rd-mobility-text-4", { y: -75,  opacity:0 },{y:0,  opacity:1}, 0)
1265        sceneMobilityIn.fromTo("#rd-mobility-text-5", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1266        sceneMobilityIn.fromTo("#rd-mobility-text-6", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1267        sceneMobilityIn.fromTo("#rd-mobility-text-7", { y: -75,  opacity:0 },{y:0,  opacity:1}, 0)
1268        sceneMobilityIn.fromTo("#rd-mobility-text-8", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1269        sceneMobilityIn.fromTo("#rd-mobility-text-9", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1270        sceneMobilityIn.fromTo("#rd-mobility-text-10", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1271        sceneMobilityIn.fromTo(".rd-mobility-text-11", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1272        sceneMobilityIn.fromTo("#rd-mobility-delay", { x: 0,  opacity:0 },{x:0,  opacity:0}, ">")
1273
1274        // MOBILITY 文字出場動畫
1275        let sceneMobilityOut = gsap.timeline();
1276        ScrollTrigger.create({
1277            animation: sceneMobilityOut,
1278            trigger: "#rd-mobility-banner-1",
1279            start: "top+=800px top",
1280            end: "bottom+=1300px top",
1281            scrub: 1,
1282            markers:false,
1283        });
1284        sceneMobilityOut.fromTo("#rd-mobility-text-1", { y: 0,  opacity:1, width:'9.5%' },{y:0,  opacity:0, width:'11.5%'}, 0)
1285        sceneMobilityOut.fromTo("#rd-mobility-text-2", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1286        sceneMobilityOut.fromTo("#rd-mobility-text-3", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1287        sceneMobilityOut.fromTo("#rd-mobility-text-4", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1288        sceneMobilityOut.fromTo("#rd-mobility-text-5", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1289        sceneMobilityOut.fromTo("#rd-mobility-text-6", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1290        sceneMobilityOut.fromTo("#rd-mobility-text-7", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1291        sceneMobilityOut.fromTo("#rd-mobility-text-8", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1292        sceneMobilityOut.fromTo("#rd-mobility-text-9", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1293        sceneMobilityOut.fromTo("#rd-mobility-text-10", { y: 0,  opacity:1 },{y:0,  opacity:0}
1293, ">")
1294        sceneMobilityOut.fromTo(".rd-mobility-text-11", { x: 0,  opacity:1 },{x:100,  opacity:0}, ">")
1295         
1296        // MOBILITY 飛布滾動視差
1297        let sceneMobilityFrabic = gsap.timeline();
1298        ScrollTrigger.create({
1299            animation: sceneMobilityFrabic,
1300            trigger: "#rd-mobility-banner-1",
1301            start: "bottom+=1300px top",
1302            end: "bottom+=2400px top",
1303            scrub: 1,
1304            markers:false,
1305        });
1306        sceneMobilityFrabic.fromTo(".mobility-paroller", { y: 0,  opacity:1 },{y:-500,  opacity:1}, 0)
1307        
1308        /**==============
1309         * 
1310         * COOL 區塊
1311         *  
1312        ================= */
1313
1314        // COOL 區塊
1315        ScrollTrigger.create({
1316            trigger: "#rd-section-8",
1317            start: "top top",
1318            end: "bottom+=1200px top",
1319            scrub: 1,
1320            markers:false,
1321            pin: true,   // pin the trigger element while active
1322        });
1323
1324        // COOL 文字入場動畫
1325        let sceneCoolIn = gsap.timeline();
1326        ScrollTrigger.create({
1327            animation: sceneCoolIn,
1328            trigger: "#rd-cool-banner-1",
1329            start: "top center-=20%",
1330            end: "bottom center-=20%",
1331            scrub: 1,
1332            markers:false,
1333        });
1334        sceneCoolIn.fromTo("#rd-cool-text-1", { y: -125,  opacity:0 },{y:0,  opacity:1}, 0)
1335        sceneCoolIn.fromTo("#rd-cool-text-2", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1336        sceneCoolIn.fromTo("#rd-cool-text-3", { y: -75,  opacity:0 },{y:0,  opacity:1}, 0)
1337        sceneCoolIn.fromTo("#rd-cool-text-4", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1338        sceneCoolIn.fromTo("#rd-cool-text-5", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1339        sceneCoolIn.fromTo("#rd-cool-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1340        sceneCoolIn.fromTo(".rd-cool-text-7", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1341        sceneCoolIn.fromTo("#rd-cool-delay", { x: 0,  opacity:0 },{x:0,  opacity:0}, ">")
1342
1343        // COOL 文字出場動畫
1344        let sceneCoolOut = gsap.timeline();
1345        ScrollTrigger.create({
1346            animation: sceneCoolOut,
1347            trigger: "#rd-cool-banner-1",
1348            start: "top+=800px top",
1349            end: "bottom+=1000px top",
1350            scrub: 1,
1351            markers:false,
1352        });
1353        sceneCoolOut.fromTo("#rd-cool-text-1", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, 0)
1354        sceneCoolOut.fromTo("#rd-cool-text-2", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1355        sceneCoolOut.fromTo("#rd-cool-text-3", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1356        sceneCoolOut.fromTo("#rd-cool-text-4", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1357        sceneCoolOut.fromTo("#rd-cool-text-5", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1358        sceneCoolOut.fromTo("#rd-cool-text-6", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1359        sceneCoolOut.fromTo(".rd-cool-text-7", { x: 0,  opacity:1 },{x:100,  opacity:0}, ">")
1360 
1361        // COOL 飛布滾動視差
1362        let sceneCoolFrabic = gsap.timeline();
1363        ScrollTrigger.create({
1364            animation: sceneCoolFrabic,
1365            trigger: "#rd-cool-banner-1",
1366            start: "bottom+=1000px top",
1367            end: "bottom+=2100px top",
1368            scrub: 1,
1369            markers:false,
1370        });
1371        sceneCoolFrabic.fromTo(".cool-paroller", { y: 0,  opacity:1 },{y:-500,  opacity:1}, 0)
1372
1373        /**==============
1374         * 
1375         * WIND 區塊
1376         *  
1377        ================= */
1378
1379        // WIND 區塊
1380        ScrollTrigger.create({
1381            trigger: "#rd-section-9",
1382            start: "top top",
1383            end: "bottom+=1200px top",
1384            scrub: 1,
1385            markers:false,
1386            pin: true,   // pin the trigger element while active
1387        });
1388
1389        // WIND 文字入場動畫
1390        let sceneWindIn = gsap.timeline();
1391        ScrollTrigger.create({
1392            animation: sceneWindIn,
1393            trigger: "#rd-wind-banner-1",
1394            start: "top center-=20%",
1395            end: "bottom center-=20%",
1396            scrub: 1,
1397            markers:false,
1398        });
1399        sceneWindIn.fromTo("#rd-wind-text-1", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1400        sceneWindIn.fromTo("#rd-wind-text-2", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1401        sceneWindIn.fromTo("#rd-wind-text-3", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1402        sceneWindIn.fromTo("#rd-wind-text-4", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1403        sceneWindIn.fromTo("#rd-wind-text-5", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1404        sceneWindIn.fromTo("#rd-wind-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1405        sceneWindIn.fromTo(".rd-wind-text-7", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1406        sceneWindIn.fromTo("#rd-wind-delay", { x: 0,  opacity:0 },{x:0,  opacity:0}
1406, ">")
1407
1408        // WIND 文字出場動畫
1409        let sceneWindOut = gsap.timeline();
1410        ScrollTrigger.create({
1411            animation: sceneWindOut,
1412            trigger: "#rd-wind-banner-1",
1413            start: "top+=800px top",
1414            end: "bottom+=1000px top",
1415            scrub: 1,
1416            markers:false,
1417        });
1418        sceneWindOut.fromTo("#rd-wind-text-1", { y: 0,  opacity:1, width:'9.5%' },{y:0,  opacity:0, width:'11.5%'}, 0)
1419        sceneWindOut.fromTo("#rd-wind-text-2", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1420        sceneWindOut.fromTo("#rd-wind-text-3", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1421        sceneWindOut.fromTo("#rd-wind-text-4", { y: 0,  opacity:1, width:'8%' },{y:0,  opacity:0, width:'10%'}, ">")
1422        sceneWindOut.fromTo("#rd-wind-text-5", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1423        sceneWindOut.fromTo("#rd-wind-text-6", { y: 0,  opacity:1 },{y:0,  opacity:0}, ">")
1424        sceneWindOut.fromTo(".rd-wind-text-7", { x: 0,  opacity:1 },{x:100,  opacity:0}, ">")
1425         
1426        // WIND 飛布滾動視差
1427        let sceneWindFrabic = gsap.timeline();
1428        ScrollTrigger.create({
1429            animation: sceneWindFrabic,
1430            trigger: "#rd-wind-banner-1",
1431            start: "bottom+=1000px top",
1432            end: "bottom+=2100px top",
1433            scrub: 1,
1434            markers:false,
1435        });
1436        sceneWindFrabic.fromTo(".wind-paroller", { y: 0,  opacity:1 },{y:-500,  opacity:1}, 0)            },
1437            "(max-width: 992px)": function() {
1438                /**==============
1439         * 
1440         * SUN 區塊
1441         *  
1442        ================= */
1443
1444        // SUN 文字入場動畫
1445        let sceneSunW73In = gsap.timeline();
1446        ScrollTrigger.create({
1447            animation: sceneSunW73In,
1448            trigger: ".sun_w73",
1449            start: "top center+=25%",
1450            end: "bottom center+=25%",
1451            scrub: 1,
1452            markers: false,
1453        });
1454        sceneSunW73In.fromTo("#rd-sun-text-1", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1455        sceneSunW73In.fromTo("#rd-sun-text-2", { y: 100,  opacity:0 },{y:0,  opacity:1}, 0)
1456        sceneSunW73In.fromTo("#rd-sun-text-3", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1457
1458        let sceneSunW27In = gsap.timeline();
1459        ScrollTrigger.create({
1460            animation: sceneSunW27In,
1461            trigger: ".sun_w27",
1462            start: "top center+=25%",
1463            end: "bottom center+=25%",
1464            scrub: 1,
1465            markers: false,
1466        });
1467        sceneSunW27In.fromTo("#rd-sun-text-4", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1468        sceneSunW27In.fromTo("#rd-sun-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1469        sceneSunW27In.fromTo(".rd-sun-text-5", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1470        
1471        /**==============
1472         * 
1473         * LIGHT 區塊
1474         *  
1475        ================= */
1476
1477        // LIGHT 文字入場動畫
1478        let sceneLightW73In = gsap.timeline();
1479        ScrollTrigger.create({
1480            animation: sceneLightW73In,
1481            trigger: ".light_w73",
1482            start: "top center+=25%",
1483            end: "bottom center+=25%",
1484            scrub: 1,
1485            markers:false,
1486        });
1487        sceneLightW73In.fromTo("#rd-light-text-1", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1488        sceneLightW73In.fromTo("#rd-light-text-2", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1489        sceneLightW73In.fromTo("#rd-light-text-3", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1490        sceneLightW73In.fromTo("#rd-light-text-4", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1491        sceneLightW73In.fromTo("#rd-light-text-5", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1492
1493        let sceneLightW27In = gsap.timeline();
1494        ScrollTrigger.create({
1495            animation: sceneLightW27In,
1496            trigger: ".light_w27",
1497            start: "top center+=25%",
1498            end: "bottom center+=25%",
1499            scrub: 1,
1500            markers:false,
1501        });
1502        sceneLightW27In.fromTo("#rd-light-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1503        sceneLightW27In.fromTo("#rd-light-text-8", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1504        sceneLightW27In.fromTo(".rd-light-text-7", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1505
1506        /**==============
1507         * 
1508         * EARTH 區塊
1509         *  
1510        ================= */
1511        
1512        // EARTH 文字入場動畫
1513        let sceneEarthW73In = gsap.timeline();
1514        ScrollTrigger.create({
1515            animation: sceneEarthW73In,
1516            trigger: ".earth_w73",
1517            start: "top center+=25%",
1518            end: "bottom center+=25%",
1519            scrub: 1,
1520            markers:false,
1521        });
1522        sceneEarthW73In.fromTo("#rd-earth-text-1", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1523        sceneEarthW73In.fromTo("#rd-earth-text-2", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1524        sceneEarthW73In.fromTo("#rd-earth-text-3", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1525        sceneEarthW73In.fromTo("#rd-earth-text-4", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1526        sceneEarthW73In.fromTo("#rd-earth-text-5", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1527
1528        let sceneEarthW27In = gsap.timeline();
1529        ScrollTrigger.create({
1530            animation: sceneEarthW27In,
1531            trigger: ".earth_w27",
1532            start: "top center+=25%",
1533            end: "bottom center+=25%",
1534            scrub: 1,
1535            markers:false,
1536        });
1537        sceneEarthW27In.fromTo("#rd-earth-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1538        sceneEarthW27In.fromTo("#rd-earth-text-8", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1539        sceneEarthW27In.fromTo(".rd-earth-text-7", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1540
1541        /**==============
1542         * 
1543         * WARMTH 區塊
1544         *  
1545        ================= */
1546
1547        // WARMTH 文字入場動畫
1548        let sceneWarmthW73In = gsap.timeline();
1549        ScrollTrigger.create({
1550            animation: sceneWarmthW73In,
1551            trigger: ".warmth_w73",
1552            start: "top center+=25%",
1553            end: "bottom center+=25%",
1554            scrub: 1,
1555            markers:false,
1556        });
1557        sceneWarmthW73In.fromTo("#rd-warmth-text-1", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1558        sceneWarmthW73In.fromTo("#rd-warmth-text-2", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1559        sceneWarmthW73In.fromTo("#rd-warmth-text-3", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1560        sceneWarmthW73In.fromTo("#rd-warmth-text-4", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1561        sceneWarmthW73In.fromTo("#rd-warmth-text-5", { y: 50,  opacity:0 },{y:0,  opacity:1}, 0)
1562        sceneWarmthW73In.fromTo("#rd-warmth-text-6", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1563
1564        let sceneWarmthW27In = gsap.timeline();
1565        ScrollTrigger.create({
1566            animation: sceneWarmthW27In,
1567            trigger: ".warmth_w27",
1568            start: "top center+=25%",
1569            end: "bottom center+=25%",
1570            scrub: 1,
1571            markers:false,
1572        });
1573        sceneWarmthW27In.fromTo("#rd-warmth-text-7", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1574        sceneWarmthW27In.fromTo("#rd-warmth-text-9", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1575        sceneWarmthW27In.fromTo(".rd-warmth-text-8", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1576
1577        /**==============
1578         * 
1579         * RAIN 區塊
1580         *  
1581        ================= */
1582         
1583        // RAIN 文字入場動畫
1584        let sceneRainW73In = gsap.timeline();
1585        ScrollTrigger.create({
1586            animation: sceneRainW73In,
1587            trigger: ".rain_w73",
1588            start: "top center+=25%",
1589            end: "bottom center+=25%",
1590            scrub: 1,
1591            markers:false,
1592        });
1593        sceneRainW73In.fromTo("#rd-rain-text-1", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1594        sceneRainW73In.fromTo("#rd-rain-text-2", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1595        sceneRainW73In.fromTo("#rd-rain-text-3", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1596        sceneRainW73In.fromTo("#rd-rain-text-4", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1597
1598        let sceneRainW27In = gsap.timeline();
1599        ScrollTrigger.create({
1600            animation: sceneRainW27In,
1601            trigger: ".rain_w27",
1602            start: "top center+=25%",
1603            end: "bottom center+=25%",
1604            scrub: 1,
1605            markers:false,
1606        });
1607        sceneRainW27In.fromTo("#rd-rain-text-5", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1608        sceneRainW27In.fromTo("#rd-rain-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1609        sceneRainW27In.fromTo(".rd-rain-text-7", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1610
1611        /**==============
1612         * 
1613         * MOBILITY 區塊
1614         *  
1615        ================= */
1616        
1617        // MOBILITY 文字入場動畫
1618        let sceneMobilityW73In = gsap.timeline();
1619        ScrollTrigger.create({
1620            animation: sceneMobilityW73In,
1621            trigger: ".mobility_w73",
1622            start: "top center+=25%",
1623            end: "bottom center+=25%",
1624            scrub: 1,
1625            markers:false,
1626        });
1627        sceneMobilityW73In.fromTo("#rd-mobility-text-1", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1628        sceneMobilityW73In.fromTo("#rd-mobility-text-2", { y: -75,  opacity:0 },{y:0,  opacity:1}, 0)
1629        sceneMobilityW73In.fromTo("#rd-mobility-text-3", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1630        sceneMobilityW73In.fromTo("#rd-mobility-text-4", { y: -75,  opacity:0 },{y:0,  opacity:1}, 0)
1631        sceneMobilityW73In.fromTo("#rd-mobility-text-5", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1632        sceneMobilityW73In.fromTo("#rd-mobility-text-6", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1633        sceneMobilityW73In.fromTo("#rd-mobility-text-7", { y: -75,  opacity:0 },{y:0,  opacity:1}, 0)
1634        sceneMobilityW73In.fromTo("#rd-mobility-text-8", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1635                
1636        // MOBILITY 文字入場動畫
1637        let sceneMobilityW27In = gsap.timeline();
1638        ScrollTrigger.create({
1639            animation: sceneMobilityW27In,
1640            trigger: ".mobility_w27",
1641            start: "top center+=25%",
1642            end: "bottom center+=25%",
1643            scrub: 1,
1644            markers:false,
1645        });
1646        sceneMobilityW27In.fromTo("#rd-mobility-text-9", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1647        sceneMobilityW27In.fromTo("#rd-mobility-text-10", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1648        sceneMobilityW27In.fromTo(".rd-mobility-text-11", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1649
1650        /**==============
1651         * 
1652         * COOL 區塊
1653         *  
1654        ================= */
1655
1656        // COOL 文字入場動畫
1657        let sceneCoolW73In = gsap.timeline();
1658        ScrollTrigger.create({
1659            animation: sceneCoolW73In,
1660            trigger: ".cool_w73",
1661            start: "top center+=25%",
1662            end: "bottom center+=25%",
1663            scrub: 1,
1664            markers:false,
1665        });
1666        sceneCoolW73In.fromTo("#rd-cool-text-1", { y: -125,  opacity:0 },{y:0,  opacity:1}, 0)
1667        sceneCoolW73In.fromTo("#rd-cool-text-2", { y: -100,  opacity:0 },{y:0,  opacity:1}, 0)
1668        sceneCoolW73In.fromTo("#rd-cool-text-3", { y: -75,  opacity:0 },{y:0,  opacity:1}, 0)
1669        sceneCoolW73In.fromTo("#rd-cool-text-4", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1670
1671        let sceneCoolW27In = gsap.timeline();
1672        ScrollTrigger.create({
1673            animation: sceneCoolW27In,
1674            trigger: ".cool_w27",
1675            start: "top center+=25%",
1676            end: "bottom center+=25%",
1677            scrub: 1,
1678            markers:false,
1679        });
1680        sceneCoolW27In.fromTo("#rd-cool-text-5", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1681        sceneCoolW27In.fromTo("#rd-cool-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1682        sceneCoolW27In.fromTo(".rd-cool-text-7", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1683
1684        /**==============
1685         * 
1686         * WIND 區塊
1687         *  
1688        ================= */
1689
1690        // WIND 文字入場動畫
1691        let sceneWindW73In = gsap.timeline();
1692        ScrollTrigger.create({
1693            animation: sceneWindW73In,
1694            trigger: ".wind_w73",
1695            start: "top center+=25%",
1696            end: "bottom center+=25%",
1697            scrub: 1,
1698            markers:false,
1699        });
1700        sceneWindW73In.fromTo("#rd-wind-text-1", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1701        sceneWindW73In.fromTo("#rd-wind-text-2", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1702        sceneWindW73In.fromTo("#rd-wind-text-3", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1703        sceneWindW73In.fromTo("#rd-wind-text-4", { y: -50,  opacity:0 },{y:0,  opacity:1}, 0)
1704
1705        let sceneWindW27In = gsap.timeline();
1706        ScrollTrigger.create({
1707            animation: sceneWindW27In,
1708            trigger: ".wind_w27",
1709            start: "top center+=25%",
1710            end: "bottom center+=25%",
1711            scrub: 1,
1712            markers:false,
1713        });
1714        sceneWindW27In.fromTo("#rd-wind-text-5", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1715        sceneWindW27In.fromTo("#rd-wind-text-6", { y: 0,  opacity:0 },{y:0,  opacity:1}, 0)
1716        sceneWindW27In.fromTo(".rd-wind-text-7", { x: 0,  opacity:0 },{x:0,  opacity:1}, 0)
1717            }
1718        });
1719    }
1720
1721    function createScrollTrigger(trigger, move, move_out) {
1722        let draggable_height = $('#draggable-line').height();
1723        let id = $(trigger).data('id');
1724        let move_distance = ((id - 1) / 8) * draggable_height;
1725
1726        ScrollTrigger.matchMedia({
1727            // desktop
1728            "(min-width: 993px)": function(){
1729                let color = $(trigger).data('pc-color');
1730                ScrollTrigger.create({
1731                    trigger: trigger,
1732                    start: "top-=20% top",
1733                    end: "bottom+=500px top+=25%",
1734                    markers:false,
1735                    onEnter: function () {
1736                        $('#draggable').css('transform', 'translate3d(0px, '+ move_distance +'px, 0px)');
1737                        $('#draggable-number').html('0' + id);
1738                        $('#draggable-number').css('color', color);
1739                        $('#draggable-max-number').css('color', color);
1740                    },
1741                    onEnterBack: function () {
1742                        $('#draggable').css('transform', 'translate3d(0px, '+ move_distance +'px, 0px)');
1743                        $('#draggable-number').html('0' + id);
1744                        $('#draggable-number').css('color', color);
1745                        $('#draggable-max-number').css('color', color);
1746                    },
1747                });
1748            },
1749            // mobile
1750            "(max-width: 992px)": function() {
1751                let color = $(trigger).data('mobile-color');
1752                ScrollTrigger.create({
1753                    trigger: trigger,
1754                    start: "top-=60% top",
1755                    end: "bottom top-=40%",
1756                    markers:false,
1757                    onEnter: function () {
1758                        $('#draggable').css('transform', 'translate3d(0px, '+ move_distance +'px, 0px)');
1759                        $('#draggable-number').html('0' + id);
1760                        $('#draggable-number').css('color', color);
1761                        $('#draggable-max-number').css('color', color);
1762                    },
1763                    onEnterBack: function () {
1764                        $('#draggable').css('transform', 'translate3d(0px, '+ move_distance +'px, 0px)');
1765                        $('#draggable-number').html('0' + id);
1766                        $('#draggable-number').css('color', color);
1767                        $('#draggable-max-number').css('color', color);
1768                    },
1769                });
1770            },
1771        });
1772    }
1773
1774    function draggable(){
1775        let drag = Draggable.create('#draggable', {
1776            type:'x',
1777            bounds: '#draggable-line',
1778            inertia:true,
1779        });
1780
1781        // draggable create return array
1782        // 關閉手動拖拉
1783        drag[0].disable();
1784    }
1785</script>
1785
1786
1787            </div>
1788
1789            
1790            
1791            
1792            <div class="footer" id="rd-footer">
1793    <div class="item">
1794        <div class="f_lg">
1795            <a data-link-pause="true" href="https://www.sktextile.com.tw">
1796                <img src="https://www.sktextile.com.tw/ridea\npm\images\frontend\footer_logo.svg" alt="" style="max-width:100%">
1797            </a>
1798        </div>
1799        <div class="f_nav">
1800            <a href="javascript:;" class="go-to-top-button">TOP</a>
1801            <a data-link-pause="true" href="https://www.sktextile.com.tw/about-us">ABOUT US</a>
1802            <a data-link-pause="true" href="https://www.sktextile.com.tw/news/list">NEWS&amp;STORIES</a>
1803            <a data-link-pause="true" href="https://www.sktextile.com.tw/product">PRODUCTS</a>
1804            <a data-link-pause="true" href="https://www.sktextile.com.tw/innovation/list">INNOVATIONS</a>
1805            <a data-link-pause="true" href="https://www.sktextile.com.tw/investors">INVESTORS</a>
1806            <a data-link-pause="true" href="https://www.sktextile.com.tw/careers">CAREERS</a>
1807            <a data-link-pause="true" href="https://www.sktextile.com.tw/contact">CONTACTS US</a>
1808        </div>
1809        <div class="f_ct">
1810            
1811        <p>E-mail: [email protected] </p>
1812        <p>Address: 15F, No 44, Sec. 2, Zhongshan North Road, Taipei, 10448, Taiwan</p>
1813        <p>Telephone: +886(2)2507-1258</p>
1814        <p>Fax: +886(2)2507-2576</p>
1815     
1816            <!-- <p>E-mail : [email protected]</p>
1817            <p>Address : 15F, No 44, Sec. 2, Zhongshan North Road, Taipei 10448, Taiwan</p>
1818            <p>Telephone : +886(2) 2507-1258</p>
1819            <p>Fax : +886(2) 2507-2576</p> -->
1820        </div>
1821        <a href="https://www.sktextile.com.tw/privacy" class="ft_privacy">Privacy Policy</a>
1822    </div>
1823    <p class="f_cp">Copyright © Shinkong Textile Co.,Ltd. All Rights Reserved.</p>
1824</div>
1825
1826<div id="mobile_landscape" class="mobile_landscape">
1827    <div class="mobile_landscape_text">請以直式瀏覽網站<br>以獲得最佳瀏覽體驗。</div>
1828</div>
1829
1830<script>
1831    let isMobileDevice = '0';
1832
1833    $(function () {
1834        // 禁用右鍵選單
1835        document.addEventListener('contextmenu', function (e) {
1836        e.preventDefault();
1837        });
1838
1839        // 禁用右鍵點擊事件
1840        document.addEventListener('mousedown', function (e) {
1841        if (e.button === 2) {
1842            e.preventDefault();
1843        }
1844        });
1845        // 全站滾輪滑動控制
1846        // $.scrollSpeed(450, 900);
1847
1848        // gsap.timeline()
1849        //     .fromTo("#rd-footer",
1850        //         {y:0},
1851        //         {y: -150, scrollTrigger: {
1852        //                 trigger: "#rd-content",
1853        //                 markers: false,
1854        //                 start: "80% top",
1855        //                 end: "bottom center",
1856        //                 scrub: 1,
1857        //             }})
1858        // ;
1859
1860        window.addEventListener('resize', function(){
1861            mobileLandscape();
1862        });
1863        
1864        mobileLandscape();
1865
1866        setTimeout(() => {
1867            $('.logo').css('opacity', 1);
1868        }, 100);
1869
1870        // 與 top.blade.php 中的 top 按鈕共用
1871        $('.go-to-top-button').on('click', function(){
1872            $('.menu-overlay').removeClass('open');
1873            $('.rd-menu-link').removeClass('show');
1874            $('.hbg_aitem').removeClass('show');
1875            $(".menu_text img").removeClass("move");
1876            $(".logo_wbk").removeClass("show");
1877            $(".item_search").removeClass("show");
1878            $(".skong_menu_rpt p").removeClass("show");
1879            $('html, body').animate({scrollTop: 0}, 2000);
1880        });
1881
1882        // 全站淡出
1883        $('a').on('click', function(){
1884            let link = $(this).attr('href');
1885
1886            if($(this).data('link-pause') == true){
1887                gsap.to('#rd-content',{
1888                    opacity:0, duration:0.3, onComplete: function(){
1889                        location.href = link;
1890                    }
1891                })
1892
1893                return false;
1894            }
1895        });
1896
1897        // 監聽如果是從 "回上一頁" 進來的,顯示 rd-content
1898        window.addEventListener('pageshow', function(event) {
1899            if (event.persisted) {
1900                $('.menu-overlay').removeClass('open');
1901                $('.rd-menu-link').removeClass('show');
1902                $('.hbg_aitem').removeClass('show');
1903                $(".menu_text img").removeClass("move");
1904                $(".logo_wbk").removeClass("show");
1905                $(".item_search").removeClass("show");
1906                $(".skong_menu_rpt p").removeClass("show");
1907                
1908                gsap.to('#rd-content',{
1909                    opacity:1, duration:0
1910                })
1911            }
1912        });
1913        
1914        allWebsitebannerScroll();
1915
1916        // 監聽滾輪,啟動視差
1917        window.addEventListener('scroll', function(){
1918            allWebsitebannerScroll();
1919        });
1920
1921        // 設置下拉定位錨點
1922        const scrollDownAnchor = document.getElementById("rd-scroll-down-anchor");
1923
1924        $('#rd-scroll-down2').on('click', function(){
1925            $('html, body').animate({
1926                scrollTop: $('#rd-scroll-down-anchor').offset().top - 20
1927            }, 2000);
1928        });
1929    })
1930
1931    function mobileLandscape(){
1932        if(isMobileDevice == '1' && $(window).width() > $(window).height()){
1933            $('#mobile_landscape').css('display', 'flex');
1934            $('html, body').css({
1935                overflow: 'hidden',
1936                height: '100%'
1937            });
1938        }else{
1939            $('#mobile_landscape').css('display', 'none');
1940            $('html, body').css({
1941                overflow: 'auto',
1942                height: 'auto'
1943            });
1944        }
1945    }
1946
1947    function allWebsitebannerScroll(){
1948        const scrollDownAnchor = document.getElementById("rd-scroll-down-anchor");
1949        let scrollPositionY = window.pageYOffset;
1950
1951        // 當下拉程度超過錨點時,則不再繼續執行滾動視差
1952        if(scrollDownAnchor && scrollPositionY > scrollDownAnchor.offsetTop){
1953            scrollPositionY = scrollDownAnchor.offsetTop;
1954        }
1955        
1956        if ($(".ban_cloth")[0] && $(".in_banner")[0]){
1957            let sceneBannerImg = gsap.timeline();
1958            ScrollTrigger.create({
1959                animation: sceneBannerImg,
1960                trigger: ".in_banner",
1961                start: "top top",
1962                scrub: 1,
1963                markers:false,
1964            });
1965            sceneBannerImg.fromTo(".ban_cloth", {backgroundPosition: '50% 50%'}, {backgroundPosition: '50% 0%'}, 0)
1966        }
1967       
1968    }
1969
1970    
1971    </script>
1971
1972
1973        </div>
1974    </body>
1975</html>

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.