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&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 & 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 & 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&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.