代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="utf-8">
<title>首页</title>
<meta name="keywords" />
<meta name="description" />
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./css/animate.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/swiper.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/split-type.js"></script>
<script src="./js/gsap.min.js"></script>
<script src="./js/ScrollTrigger.min.js"></script>
<link rel="stylesheet" href="./css/scroll.css">
<style>
.main_warp {
background-color: #fff;
position: relative;
z-index: 10;
}
.foot_warp {
width: 100%;
height: 80vh;
position: relative;
background: #212121;
}
.foot {
position: fixed;
left: 0;
bottom: 0;
width: 90%;
padding: 40px 5%;
}
body {
position: relative;
}
.header .a1{
animation-delay: 1200ms;
}
.loading {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 10000;
background-color: white;
}
#progress-bar {
width: 100%;
height: 10px;
margin-top: 2vw;
background-color: #fff;
}
.progress {
height: 100%;
background-color: #000;
transition: width 0.5s linear;
width: 0;
}
.header .logo svg{
animation-delay: 1000ms;
}
</style>
</head>
<body>
<div class="loading">
<div class="logo animated fadeInDown">
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="37" viewBox="0 0 250 37" fill="none">
<path d="M0 0.278809H38.7303V6.96607H0V0.278809Z" fill="#333333" />
<path d="M0 14.4892H26.749V20.8979H0V14.4892Z" fill="#333333" />
<path d="M0 30.0928H39.009V36.7801H0V30.0928Z" fill="#333333" />
<path d="M0 0.278809H8.6377V36.7801H0V0.278809Z" fill="#333333" />
<path d="M66.873 0.278809H75.2321V36.5015H73.003C69.6175 36.5015 66.873 33.757 66.873 30.3715V0.278809Z"
fill="#333333" />
<path
d="M101.145 0.278809H109.504V30.3715C109.504 33.757 106.76 36.5015 103.374 36.5015H101.145V0.278809Z"
fill="#333333" />
<path d="M73.003 30.0928H101.703V36.5015H73.003V30.0928Z" fill="#333333" />
<path
d="M200.617 0.278809H211.205L228.726 18.5401C229.576 19.4258 228.948 20.8979 227.721 20.8979H221.236L200.617 0.278809Z"
fill="#333333" />
<path
d="M249.936 0.278809H239.348L222.731 17.5971C221.542 18.8369 222.421 20.8979 224.139 20.8979H229.317L249.936 0.278809Z"
fill="#333333" />
<path d="M221.236 20.8979H229.317V36.7801H221.236V20.8979Z" fill="#333333" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M167.459 0H133.744V23.4054H167.459C171.152 23.4054 174.146 20.4114 174.146 16.7182V6.68726C174.146 2.99398 171.152 0 167.459 0ZM164.673 6.68726H141.825V16.9968H164.673C165.288 16.9968 165.787 16.4977 165.787 15.8822V7.80181C165.787 7.4146 165.59 7.07338 165.29 6.87365C165.113 6.75583 164.901 6.68726 164.673 6.68726Z"
fill="#333333" />
<path d="M133.744 17.2754H142.103V36.7799H133.744V17.2754Z" fill="#333333" />
<path d="M151.855 23.1268H162.444L179.998 36.7799H166.902L151.855 23.1268Z" fill="#333333" />
</svg>
</div>
<div id="progress-bar">
<div class="progress"></div>
</div>
</div>
<div class="home">
<div class="header">
<div class="links">
<div class="item animated fadeIn">
<a href="./about.html" class="a1">About Us</a>
<div class="aList animated fadeIn">
<a href="./values.html">Vision & Values</a>
<a href="./quality.html">Quality & Competence</a>
<a href="./research.html">Research & Development</a>
<a href="./about_team.html">Our Team</a>
</div>
</div>
<div class="item animated fadeIn" style="animation-delay: 200ms;">
<a href="./products.html" class="a1">Products</a>
</div>
<div class="item animated fadeIn" style="animation-delay: 600ms;">
<a href="./values.html" class="a1">Sustainable development</a>
</div>
</div>
<a href="./index.html" class="logo">
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="37" viewBox="0 0 250 37" fill="none">
<path d="M0 0.278809H38.7303V6.96607H0V0.278809Z" fill="#333333" />
<path d="M0 14.4892H26.749V20.8979H0V14.4892Z" fill="#333333" />
<path d="M0 30.0928H39.009V36.7801H0V30.0928Z" fill="#333333" />
<path d="M0 0.278809H8.6377V36.7801H0V0.278809Z" fill="#333333" />
<path
d="M66.873 0.278809H75.2321V36.5015H73.003C69.6175 36.5015 66.873 33.757 66.873 30.3715V0.278809Z"
fill="#333333" />
<path
d="M101.145 0.278809H109.504V30.3715C109.504 33.757 106.76 36.5015 103.374 36.5015H101.145V0.278809Z"
fill="#333333" />
<path d="M73.003 30.0928H101.703V36.5015H73.003V30.0928Z" fill="#333333" />
<path
d="M200.617 0.278809H211.205L228.726 18.5401C229.576 19.4258 228.948 20.8979 227.721 20.8979H221.236L200.617 0.278809Z"
fill="#333333" />
<path
d="M249.936 0.278809H239.348L222.731 17.5971C221.542 18.8369 222.421 20.8979 224.139 20.8979H229.317L249.936 0.278809Z"
fill="#333333" />
<path d="M221.236 20.8979H229.317V36.7801H221.236V20.8979Z" fill="#333333" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M167.459 0H133.744V23.4054H167.459C171.152 23.4054 174.146 20.4114 174.146 16.7182V6.68726C174.146 2.99398 171.152 0 167.459 0ZM164.673 6.68726H141.825V16.9968H164.673C165.288 16.9968 165.787 16.4977 165.787 15.8822V7.80181C165.787 7.4146 165.59 7.07338 165.29 6.87365C165.113 6.75583 164.901 6.68726 164.673 6.68726Z"
fill="#333333" />
<path d="M133.744 17.2754H142.103V36.7799H133.744V17.2754Z" fill="#333333" />
<path d="M151.855 23.1268H162.444L179.998 36.7799H166.902L151.855 23.1268Z" fill="#333333" />
</svg>
</a>
<div class="links2">
<div class="item animated fadeIn" style="animation-delay: 600ms;">
<a href="./product_line.html" class="a1">Facilities</a>
</div>
<div class="item animated fadeIn" style="animation-delay: 400ms;">
<a href="./news.html" class="a1">News</a>
</div>
<div class="item animated fadeIn" style="animation-delay: 200ms;">
<a href="./contact.html" class="a1">Contact us</a>
</div>
<div class="lan animated fadeIn">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<path
d="M11 21C16.5229 21 21 16.5229 21 11C21 5.47715 16.5229 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5229 5.47715 21 11 21Z"
stroke="#333333" />
<path
d="M1 9.41996C2.50742 8.70816 3.62233 8.60901 4.3447 9.12246C5.4283 9.89271 5.56415 13.0318 8.02875 11.5315C10.4934 10.0313 6.97335 9.41996 7.7375 7.24671C8.50165 5.07346 11.0041 6.76161 11.2529 4.38111C11.4187 2.79407 9.5204 2.18682 5.5578 2.55936"
stroke="#333333" />
<path
d="M17.0007 3C14.1435 5.4943 13.1456 7.00055 14.007 7.51865C15.299 8.29585 15.8473 7.20165 17.424 7.51865C19.0007 7.8357 18.6593 9.97285 17.83 9.97285C17.0007 9.97285 12.7056 9.4259 12.922 11.9325C13.1383 14.439 15.7217 14.8101 15.7217 16.2105C15.7217 17.1441 15.1501 18.573 14.007 20.4971"
stroke="#333333" stroke-linecap="round" />
<path
d="M2.05273 15.4636C2.50848 15.2648 2.85106 15.1191 3.08048 15.0264C5.00404 14.2492 6.43134 14.0659 7.36229 14.4768C9.00854 15.2033 8.37564 16.6706 8.89129 17.2112C9.40689 17.7518 10.6945 17.5945 10.6945 18.6229C10.6945 19.3084 10.4642 20.0829 10.0037 20.9462"
stroke="#333333" stroke-linecap="round" />
</svg>
<p>EN</p>
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M6.34311 5.59619L11.6464 0.292893L12.3535 1L6.34311 7.01041L0.332701 1L1.03981 0.292893L6.34311 5.59619Z"
fill="#333333" />
</svg>
</a>
</div>
</div>
</div>
<div class="pheader">
<div class="menu">
<a href="./index.html" target="_self" class="animated fadeInUpLeft">
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="37" viewBox="0 0 250 37" fill="none">
<path d="M0 0.278809H38.7303V6.96607H0V0.278809Z" fill="#333333" />
<path d="M0 14.4892H26.749V20.8979H0V14.4892Z" fill="#333333" />
<path d="M0 30.0928H39.009V36.7801H0V30.0928Z" fill="#333333" />
<path d="M0 0.278809H8.6377V36.7801H0V0.278809Z" fill="#333333" />
<path
d="M66.873 0.278809H75.2321V36.5015H73.003C69.6175 36.5015 66.873 33.757 66.873 30.3715V0.278809Z"
fill="#333333" />
<path
d="M101.145 0.278809H109.504V30.3715C109.504 33.757 106.76 36.5015 103.374 36.5015H101.145V0.278809Z"
fill="#333333" />
<path d="M73.003 30.0928H101.703V36.5015H73.003V30.0928Z" fill="#333333" />
<path
d="M200.617 0.278809H211.205L228.726 18.5401C229.576 19.4258 228.948 20.8979 227.721 20.8979H221.236L200.617 0.278809Z"
fill="#333333" />
<path
d="M249.936 0.278809H239.348L222.731 17.5971C221.542 18.8369 222.421 20.8979 224.139 20.8979H229.317L249.936 0.278809Z"
fill="#333333" />
<path d="M221.236 20.8979H229.317V36.7801H221.236V20.8979Z" fill="#333333" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M167.459 0H133.744V23.4054H167.459C171.152 23.4054 174.146 20.4114 174.146 16.7182V6.68726C174.146 2.99398 171.152 0 167.459 0ZM164.673 6.68726H141.825V16.9968H164.673C165.288 16.9968 165.787 16.4977 165.787 15.8822V7.80181C165.787 7.4146 165.59 7.07338 165.29 6.87365C165.113 6.75583 164.901 6.68726 164.673 6.68726Z"
fill="#333333" />
<path d="M133.744 17.2754H142.103V36.7799H133.744V17.2754Z" fill="#333333" />
<path d="M151.855 23.1268H162.444L179.998 36.7799H166.902L151.855 23.1268Z" fill="#333333" />
</svg>
</a>
<div class="navbox">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
<div class="menuList">
<div class="lan">
<a href="">CN</a>
<a href="">EN</a>
</div>
<div class="item animated fadeInUp">
<div class="tb">
<a href="./index.html">Home</a>
</div>
</div>
<div class="item animated fadeInUp">
<div class="tb">
<a href="./about.html">About Us</a>
<img src="./images/arrow.svg" alt="">
</div>
<div class="types_top">
<a class="animated fadeIn" href="./values.html">Vision & Values</a>
<a class="animated fadeIn" href="./quality.html" style="animation-delay: 100ms;">Quality &
Competence</a>
<a class="animated fadeIn" href="./research.html" style="animation-delay: 200ms;">Research &
Development</a>
<a class="animated fadeIn" href="./about_team.html" style="animation-delay: 300ms;">Our Team</a>
</div>
</div>
<div class="item animated fadeInUp">
<div class="tb">
<a href="./products.html">Products</a>
</div>
</div>
<div class="item animated fadeInUp">
<div class="tb">
<a href="./values.html">Sustainable development</a>
</div>
</div>
<div class="item animated fadeInUp">
<div class="tb">
<a href="./product_line.html">Facilities</a>
</div>
</div>
<div class="item animated fadeInUp">
<div class="tb">
<a href="./news.html">News</a>
</div>
</div>
<div class="item animated fadeInUp">
<div class="tb">
<a href="./contact.html">Contact us</a>
</div>
</div>
</div>
<div class="main_warp">
<div class="banner">
<video id="video" preload="metadata" loop="loop" autoplay="autoplay" muted="muted"
playsinline="playsinline" webkit-playsinline="webkit-playsinline" x5-video-player-type="h5"
x5-video-player-fullscreen="true" data-object-fit="cover" x5-video-orientation="portrait"
data-autoplay="">
<source src="./images/banner.mp4">
</video>
<div class="dt">
<p class="p1 animated fadeInUp" style="animation-delay: 1000ms;">
Crafting Luxury In<br>
Every Detail
</p>
<div class="scroll animated fadeInUp" style="animation-delay:1000ms;">
<p>Scroll to discover</p>
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="10" viewBox="0 0 19 10" fill="none">
<path d="M18 0.485352L9.51472 8.97063L1.02944 0.485352" stroke="white" />
</svg>
</div>
</div>
</div>
<div class="section1">
<div class="t1">
Our technical innovation<br>
elevates fragrance packaging<br>
to an art form
</div>
<div class="gsap-how-to-earn w-embed w-script">
<style>
.t1 {
clip-path: inset(0 0 0 0);
overflow: hidden;
}
.t1>.word {
clip-path: inset(0 0 0 0);
overflow: hidden;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", (event) => {
let typeSplit = new SplitType(".t1", {
types: "words, chars",
tagName: "span"
});
gsap.from(".t1 .char", {
scrollTrigger: {
trigger: '.section1',
start: 'top 100%',
toggleActions: "play none none reverse",
},
yPercent: 100,
duration: 1,
ease: "back.out(2)",
stagger: { amount: 0.5 },
});
});
</script>
</div>
<a href="" class="wow fadeInUp">
<p>Explore our stories</p>
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none">
<path d="M0 1H8V9" stroke="black" stroke-width="0.8" />
<path d="M7.9987 1L0.332031 8.66667" stroke="black" stroke-width="0.8" />
</svg>
</a>
<div class="u">
<svg xmlns="http://www.w3.org/2000/svg" width="380" height="512" viewBox="0 0 380 512" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.248047 0L0.999165 301.2C0.999165 368.4 11.3992 416.667 32.1992 446C63.6658 489.733 118.066 511.6 195.399 511.6C259.933 511.6 306.599 494 335.399 458.8C364.733 423.067 379.399 366.267 379.399 288.4V0H354.599V10.8L355.399 66L354.599 130V175.6C354.599 279.067 353.799 337.733 352.199 351.6C341.533 443.867 295.666 490 214.599 490C170.333 490 136.999 477.2 114.599 451.6C92.1992 426 80.9992 378 80.9992 307.6V21.2C80.9992 13.046 81.0214 5.97935 81.0657 0H0.248047Z"
fill="#F3F3F3" />
</svg>
</div>
<div class="y">
<svg xmlns="http://www.w3.org/2000/svg" width="509" height="337" viewBox="0 0 509 337" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M508.4 8.79998C508.4 13.0667 503.867 15.2 494.8 15.2C465.467 15.7333 447.334 20.8 440.4 30.4C434 36.2667 411.067 81.6 371.6 166.4C354 204.267 337.467 237.6 322 266.4C311.334 286.133 305.2 299.733 303.6 307.2C302.406 312.377 301.657 322.31 301.354 337H222.8V327.2C217.467 315.467 202 284.267 176.4 233.6L96.4004 75.2C88.4004 59.7333 78.8004 42.4 67.6004 23.2C61.7337 17.8667 48.9337 15.2 29.2004 15.2C10.0004 15.2 0.400391 12.2667 0.400391 6.40001C0.400391 2.13333 4.66706 0 13.2004 0C24.4004 0 46.8004 0.533323 80.4004 1.59998C99.6004 2.13333 113.467 2.40002 122 2.40002L214.8 1.59998C218.534 1.06665 222.8 0.799988 227.6 0.799988C237.2 0.799988 242 3.46665 242 8.79998C242 13.6 232.934 16 214.8 16C181.734 16 165.2 21.8666 165.2 33.6C165.2 42.6667 182 79.2 215.6 143.2L288.4 281.6C301.734 257.6 316.934 228 334 192.8L381.2 97.6C398.8 63.4667 407.6 41.0667 407.6 30.4C407.6 23.4667 403.067 19.4667 394 18.4C375.334 15.7333 362.8 14.6667 356.4 15.2C344.667 15.7333 338.8 13.0667 338.8 7.2C338.8 2.93333 343.867 0.799988 354 0.799988L400.4 1.59998L426.8 0.799988C481.2 -0.800023 508.4 1.86664 508.4 8.79998Z"
fill="#F3F3F3" />
</svg>
</div>
<div class="pic">
<img class="rellax" data-rellax-speed="3" data-rellax-percentage="0.5" src="./images/h1.png" alt="">
</div>
</div>
<div class="scroll_section">
<div class="section2" id="scroll-box">
<div class="bg">
<img src="./images/hbg1.png" alt="">
</div>
<div class="text rellax" data-rellax-speed="3" data-rellax-percentage="0.2">
<p class="p1 wow fadeInUp">Fused lugs</p>
<div class="des wow fadeInUp">
The lugs are joined to the titanium case with an invisible weld. A testament to a very
particular savoir-faire. Their taut, keen angles evoke the sword of the samurai.
</div>
</div>
</div>
<div class="section3" id="scroll-box2">
<div class="bg">
<img src="./images/hbg2.png" alt="">
</div>
<div class="text rellax" data-rellax-speed="3" data-rellax-percentage="0.2">
<p class="p1 wow fadeInUp">A commanding crown</p>
<div class="des wow fadeInUp">
The crown is the most direct connection between the watch and its wearer. This fluted crown,
imposing in size, is polished and the inner face of each tooth is microbead-blasted.
</div>
</div>
</div>
<div class="section4" id="scroll-box3">
<div class="bg">
<video id="video2" preload="metadata" muted="muted" playsinline="playsinline"
webkit-playsinline="webkit-playsinline" x5-video-player-type="h5"
x5-video-player-fullscreen="true" data-object-fit="cover" x5-video-orientation="portrait"
data-autoplay="">
<source src="./images/banner.mp4">
</video>
</div>
<div class="text rellax" data-rellax-speed="3" data-rellax-percentage="0.2">
<p class="p1 wow fadeInUp">The concave setting</p>
<div class="des wow fadeInUp">
We had to create a special diamond cut, developed exclusively for our brand, to set the
stones on concave surfaces, such as the outer lugs and the case band.
</div>
</div>
</div>
</div>
<div class="section5 c-hero">
<!-- <div class="t wow fadeInUp">actual finished product</div> -->
<div class="c-hero-sticky js-scroll-trigger" data-start="top top" data-end="bottom+=20% top">
<div class="c-hero-img js-iv l" data-x="0" data-y="0">
<div class="c-bg-img js-bg-img" data-assets="true" data-delay="0" data-pre="./images/hp0.png"
data-d2x="./images/hp0.png" data-d1x="./images/hp0.png" data-mob="./images/hp0.png">
<!-- <div class="poster"></div>-->
<div class="elem"></div>
</div>
</div>
<div class="c-hero-img js-iv l" data-x="1" data-y="0">
<div class="c-bg-img js-bg-img" data-assets="true" data-delay="0.1" data-pre="./images/hp1.png"
data-d2x="./images/hp1.png" data-d1x="./images/hp1.png" data-mob="./images/hp1.png">
<div class="poster"></div>
<div class="elem"></div>
</div>
</div>
<div class="c-hero-img js-iv l" data-x="1" data-y="1">
<div class="c-bg-img js-bg-img" data-assets="true" data-delay="0.2" data-pre="./images/hp2.png"
data-d2x="./images/hp2.png" data-d1x="./images/hp2.png" data-mob="./images/hp2.png">
<div class="poster"></div>
<div class="elem"></div>
</div>
</div>
<div class="c-hero-img js-iv l" data-x="2" data-y="0">
<div class="c-bg-img js-bg-img" data-assets="true" data-delay="0.3" data-pre="./images/hp3.png"
data-d2x="./images/hp3.png" data-d1x="./images/hp3.png" data-mob="./images/hp3.png">
<div class="poster"></div>
<div class="elem"></div>
</div>
</div>
<div class="c-hero-clip js-iv">
<div class="c-hero-mv">
<div class="c-bg-img js-bg-img" data-assets="true" data-delay="0.4"
data-pre="./images/hp4.png" data-d2x="./images/hp4.png" data-d1x="./images/hp4.png"
data-mob="./images/hp4.png">
<div class="poster"></div>
<div class="elem"></div>
</div>
</div>
</div>
<div class="c-hero-img js-iv r" data-x="3" data-y="0">
<div class="c-bg-img js-bg-img" data-assets="true" data-delay="0.5" data-pre="./images/hp5.png"
data-d2x="./images/hp5.png" data-d1x="./images/hp5.png" data-mob="./images/hp5.png">
<div class="poster"></div>
<div class="elem"></div>
</div>
</div>
</div>
<a href="" class="wow fadeInUp">
<p>Explore our stories</p>
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none">
<path d="M0 1H8V9" stroke="black" stroke-width="0.8" />
<path d="M7.9987 1L0.332031 8.66667" stroke="black" stroke-width="0.8" />
</svg>
</a>
</div>
<div class="section6" style="display: none;">
<div class="bg">
<img src="./images/hbg5.png" alt="">
</div>
<div class="text">
<div class="t wow fadeInUp">
Customize your own<br>
products
</div>
<a href="" class="wow fadeInUp">
<p>Explore our stories</p>
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9" fill="none">
<path d="M0 1H8V9" stroke="white" stroke-width="0.8" />
<path d="M7.9987 1L0.332031 8.66667" stroke="white" stroke-width="0.8" />
</svg>
</a>
</div>
</div>
<div class="section6">
<div class="bg">
<img src="http://qiniu-ouyu.mfdemo.cn/ouyu-mf/2024/01/24/65b06a21e4b0dfc55eb61e13.jpg" alt="">
</div>
<div class="text">
<div class="t wow fadeInUp">
COntact US
</div>
</div>
</div>
</div>
<div class="foot_warp">
<div class="foot">
<div id="goTop">
<p>GO</p>
<div class="line"></div>
<p>UP</p>
</div>
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" width="57" height="63" viewBox="0 0 57 63" fill="none">
<path d="M0 54.5537H8.77652V56.0691H0V54.5537Z" fill="white" />
<path d="M0 57.7739H6.06148V59.2261H0V57.7739Z" fill="white" />
<path d="M0 61.3097H8.83966V62.8251H0V61.3097Z" fill="white" />
<path d="M0 54.5537H1.95735V62.8251H0V54.5537Z" fill="white" />
<path
d="M15.1543 54.5537H17.0485V62.762H16.5434C15.7762 62.762 15.1543 62.1401 15.1543 61.3729V54.5537Z"
fill="white" />
<path
d="M22.9206 54.5537H24.8148V61.3729C24.8148 62.1401 24.1929 62.762 23.4257 62.762H22.9206V54.5537Z"
fill="white" />
<path d="M16.5434 61.3097H23.0469V62.762H16.5434V61.3097Z" fill="white" />
<path
d="M45.4609 54.5537H47.8603L51.8306 58.6918C52.0232 58.8925 51.8809 59.2261 51.6028 59.2261H50.1333L45.4609 54.5537Z"
fill="white" />
<path
d="M56.6368 54.5537H54.2375L50.4721 58.4781C50.2026 58.7591 50.4017 59.2261 50.7911 59.2261H51.9644L56.6368 54.5537Z"
fill="white" />
<path d="M50.1333 59.2261H51.9644V62.8251H50.1333V59.2261Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M37.9466 54.4907H30.3066V59.7945H37.9466C38.7836 59.7945 39.462 59.1161 39.462 58.2791V56.0061C39.462 55.1692 38.7836 54.4907 37.9466 54.4907ZM37.3152 56.0061H32.1377V58.3423H37.3152C37.4547 58.3423 37.5678 58.2292 37.5678 58.0897V56.2587C37.5678 56.1709 37.5231 56.0936 37.4551 56.0483C37.4151 56.0216 37.367 56.0061 37.3152 56.0061Z"
fill="white" />
<path d="M30.3066 58.4054H32.2009V62.8253H30.3066V58.4054Z" fill="white" />
<path d="M34.4108 59.7314H36.8101L40.788 62.8253H37.8204L34.4108 59.7314Z" fill="white" />
<path
d="M21.0888 2.81612C21.0888 1.63188 21.9529 0.624758 23.1233 0.444685L26.0138 0V40.2205L23.1233 39.7758C21.9529 39.5957 21.0888 38.5886 21.0888 37.4043V2.81612Z"
fill="white" />
<path
d="M7.07166 21.9729H20.0154C20.5572 21.8181 20.965 21.3705 21.0688 20.8167L21.0888 20.7101V28.2238L21.0577 28.0576C20.9604 27.5386 20.5833 27.1163 20.0786 26.961H7.07166V21.9729Z"
fill="white" />
<path
d="M35.4217 2.81612C35.4217 1.63188 34.5577 0.624758 33.3872 0.444685L30.4968 0V40.2205L33.3872 39.7758C34.5577 39.5957 35.4217 38.5886 35.4217 37.4043V2.81612Z"
fill="white" />
<path
d="M49.4389 21.9729H36.4951C35.9534 21.8181 35.5455 21.3705 35.4417 20.8167L35.4217 20.7101V28.2238L35.4529 28.0576C35.5502 27.5386 35.9272 27.1163 36.432 26.961H49.4389V21.9729Z"
fill="white" />
<path
d="M15.4062 2.90612C8.25117 7.25992 3.47266 15.1318 3.47266 24.1196C3.47266 35.3049 10.8733 44.7616 21.045 47.8604H35.5287C45.7004 44.7616 53.101 35.3049 53.101 24.1196C53.101 15.1054 48.2944 7.21367 41.1044 2.86783V6.76651C41.1044 7.96839 41.6564 9.09133 42.5051 9.94242C46.1266 13.5743 48.3655 18.5855 48.3655 24.1196C48.3655 35.2088 39.376 44.1983 28.2868 44.1983C17.1977 44.1983 8.20819 35.2088 8.20819 24.1196C8.20819 18.6114 10.4262 13.6213 14.0177 9.99357C14.8593 9.14355 15.4062 8.02526 15.4062 6.82913V2.90612Z"
fill="white" />
</svg>
</div>
<div class="links">
<a href="./about.html">About us</a>
<a href="./products.html">Products</a>
<a href="./values.html">Sustainable development</a>
<a href="./product_line.html">Facilities</a>
<a href="./news.html">News</a>
<a href="./contact.html">Contact us</a>
</div>
<div class="icons">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="23" viewBox="0 0 22 23" fill="none">
<path
d="M0.357002 22.1019H4.891V7.56489H0.357002V22.1019ZM2.626 0.337891C3.14489 0.338286 3.65202 0.492521 4.08327 0.78109C4.51452 1.06966 4.85054 1.47961 5.04884 1.95911C5.24713 2.43862 5.29881 2.96616 5.19733 3.47503C5.09586 3.9839 4.8458 4.45127 4.47874 4.81805C4.11169 5.18482 3.64414 5.43453 3.13519 5.53561C2.62623 5.6367 2.09873 5.58462 1.61938 5.38596C1.14002 5.18729 0.730326 4.85097 0.442085 4.4195C0.153845 3.98803 1.50723e-07 3.48078 0 2.96189C0.000131297 2.61717 0.0681554 2.27585 0.200195 1.95742C0.332235 1.63899 0.525707 1.34969 0.769554 1.10603C1.0134 0.862365 1.30285 0.66912 1.62138 0.537323C1.93991 0.405526 2.28128 0.337759 2.626 0.337891ZM7.749 7.56889H12.084V9.55489H12.145C12.579 8.81298 13.2063 8.20274 13.9599 7.78925C14.7134 7.37575 15.5651 7.17448 16.424 7.20689C20.999 7.20689 21.846 10.2159 21.846 14.1299V22.1009H17.328V15.0379C17.328 13.3509 17.295 11.1829 14.977 11.1829C12.624 11.1829 12.265 13.0189 12.265 14.9129V22.1029H7.749V7.56889Z"
fill="white" />
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="24" viewBox="0 0 13 24" fill="none">
<path
d="M12.7028 0.725527V4.36153H10.5408C10.2538 4.32587 9.96262 4.35204 9.68665 4.43828C9.41067 4.52453 9.15634 4.66884 8.94077 4.86153C8.63435 5.29408 8.48831 5.81991 8.52777 6.34852V8.94852H12.5628L12.0258 13.0245H8.52579V23.4765H4.31177V13.0225H0.800781V8.94553H4.31177V5.94552C4.26708 5.22066 4.37105 4.49431 4.61731 3.81109C4.86356 3.12787 5.24691 2.5022 5.74377 1.97253C6.25214 1.49286 6.85199 1.1206 7.50748 0.877993C8.16296 0.635387 8.86062 0.527414 9.55878 0.560527C10.608 0.543361 11.6571 0.598493 12.6988 0.725527H12.7028Z"
fill="white" />
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="21" viewBox="0 0 26 21" fill="none">
<path
d="M25.8101 2.54482C24.8661 2.95795 23.8657 3.2276 22.8421 3.34482C23.9184 2.70545 24.7245 1.69527 25.1091 0.503821C24.0991 1.10455 22.9928 1.52577 21.8391 1.74882C21.1318 0.994468 20.214 0.470181 19.205 0.244009C18.196 0.0178369 17.1422 0.100222 16.1806 0.48049C15.219 0.860757 14.3939 1.52133 13.8125 2.37646C13.2311 3.23158 12.9201 4.24175 12.9201 5.27582C12.9226 5.67309 12.9652 6.06908 13.0471 6.45782C10.9967 6.35361 8.9911 5.81945 7.16049 4.89002C5.32988 3.96059 3.71514 2.65666 2.42106 1.06283C1.75914 2.20047 1.55615 3.54777 1.85346 4.82995C2.15078 6.11212 2.92602 7.23259 4.02106 7.96282C3.20361 7.93048 2.40531 7.70572 1.69106 7.30681V7.36982C1.68932 8.56045 2.09986 9.71496 2.85292 10.6372C3.60598 11.5594 4.65511 12.1925 5.82206 12.4288C5.37885 12.5438 4.92295 12.6026 4.46507 12.6038C4.13927 12.6006 3.81411 12.5742 3.49207 12.5248C3.82265 13.5482 4.46453 14.4427 5.3281 15.0837C6.19167 15.7246 7.23383 16.0798 8.30906 16.0998C6.48332 17.531 4.22892 18.306 1.90907 18.2998C1.49319 18.3034 1.07746 18.2824 0.664062 18.2368C2.88106 19.6548 5.43861 20.4504 8.06876 20.5403C10.6989 20.6303 13.3048 20.0111 15.6135 18.7479C17.9221 17.4846 19.8485 15.6237 21.1909 13.3601C22.5332 11.0965 23.242 8.51351 23.2431 5.88183C23.2431 5.65783 23.2431 5.43482 23.2281 5.21082C24.2323 4.47336 25.1051 3.57209 25.8101 2.54482Z"
fill="white" />
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="19" viewBox="0 0 26 19" fill="none">
<path
d="M25.3924 3.64949C25.2492 3.11626 24.9686 2.62998 24.5784 2.23932C24.1883 1.84866 23.7024 1.56732 23.1694 1.42348C21.2074 0.896477 13.3434 0.896484 13.3434 0.896484C13.3434 0.896484 5.47938 0.896478 3.51738 1.42148C2.98412 1.56486 2.49797 1.84604 2.10777 2.23677C1.71757 2.6275 1.43705 3.11404 1.29438 3.64749C0.594582 7.65786 0.594582 11.7591 1.29438 15.7695C1.43751 16.3027 1.71818 16.789 2.10831 17.1796C2.49844 17.5703 2.98435 17.8516 3.51738 17.9955C5.47938 18.5235 13.3434 18.5235 13.3434 18.5235C13.3434 18.5235 21.2074 18.5235 23.1694 17.9955C23.7026 17.8521 24.1888 17.5709 24.579 17.1802C24.9692 16.7895 25.2497 16.3029 25.3924 15.7695C26.0921 11.7601 26.0921 7.65885 25.3924 3.64949ZM10.8454 13.4705V5.94849L17.3564 9.68149L10.8454 13.4705Z"
fill="white" />
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="27" viewBox="0 0 28 27" fill="none">
<path
d="M14.075 0C11.4643 0 8.91221 0.774166 6.74148 2.2246C4.57075 3.67504 2.87887 5.73659 1.8798 8.14858C0.880719 10.5606 0.619315 13.2146 1.12864 15.7752C1.63797 18.3357 2.89514 20.6878 4.7412 22.5338C6.58725 24.3799 8.93926 25.637 11.4998 26.1464C14.0604 26.6557 16.7144 26.3943 19.1264 25.3952C21.5384 24.3961 23.6 22.7043 25.0504 20.5335C26.5008 18.3628 27.275 15.8107 27.275 13.2C27.275 9.69914 25.8843 6.34167 23.4088 3.86619C20.9333 1.39071 17.5759 0 14.075 0ZM15.29 17.2C14.8544 17.2102 14.4234 17.11 14.037 16.9087C13.6506 16.7075 13.3214 16.4117 13.08 16.049C13.08 16.049 12.555 18.176 12.444 18.586C12.2396 19.2684 11.9425 19.9195 11.561 20.521C11.083 21.145 10.532 20.682 10.466 20.113C10.4314 19.4201 10.4845 18.7256 10.624 18.046C10.798 17.297 11.787 13.016 11.787 13.016C11.5899 12.5545 11.4914 12.0568 11.498 11.555C11.498 10.187 12.275 9.165 13.242 9.165C13.4168 9.16467 13.5896 9.20167 13.7489 9.27352C13.9082 9.34538 14.0503 9.45044 14.1657 9.58166C14.2811 9.71289 14.3672 9.86725 14.4181 10.0344C14.469 10.2016 14.4837 10.3777 14.461 10.551C14.2861 11.6631 14.0185 12.7585 13.661 13.826C13.605 14.0404 13.5999 14.2648 13.6462 14.4815C13.6924 14.6982 13.7888 14.901 13.9274 15.0738C14.0661 15.2466 14.2433 15.3845 14.4448 15.4766C14.6463 15.5687 14.8666 15.6123 15.088 15.604C16.801 15.604 17.955 13.357 17.955 10.696C17.9749 10.2066 17.8894 9.71862 17.7041 9.26518C17.5189 8.81174 17.2383 8.40344 16.8814 8.06798C16.5245 7.73251 16.0996 7.47772 15.6356 7.32088C15.1716 7.16405 14.6792 7.10884 14.192 7.159C13.6054 7.14191 13.0215 7.24431 12.4758 7.45997C11.93 7.67563 11.4338 8.00005 11.0174 8.4135C10.6009 8.82694 10.2729 9.32078 10.0533 9.86496C9.83375 10.4092 9.72714 10.9923 9.74001 11.579C9.71237 12.2353 9.92578 12.8791 10.34 13.389C10.413 13.4503 10.4648 13.5331 10.4882 13.6255C10.5115 13.7179 10.5052 13.8154 10.47 13.904C10.427 14.074 10.327 14.483 10.286 14.645C10.279 14.6942 10.2602 14.741 10.2312 14.7815C10.2023 14.8219 10.164 14.8548 10.1197 14.8774C10.0754 14.8999 10.0263 14.9115 9.97658 14.9111C9.92685 14.9106 9.87795 14.8983 9.83401 14.875C8.57001 14.348 7.98201 12.935 7.98201 11.349C7.98201 8.726 10.148 5.582 14.444 5.582C15.1689 5.54549 15.8938 5.65409 16.5762 5.90144C17.2586 6.1488 17.8847 6.52992 18.4179 7.02245C18.951 7.51499 19.3805 8.10902 19.681 8.76972C19.9815 9.43041 20.1471 10.1445 20.168 10.87C20.175 14.5 18.199 17.2 15.292 17.2H15.29Z"
fill="white" />
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="23" viewBox="0 0 28 23" fill="none">
<path
d="M18.8872 6.81956C19.201 6.82157 19.5145 6.84061 19.8262 6.87657C18.9832 2.99057 14.7832 0.101562 9.99023 0.101562C4.63123 0.101562 0.240234 3.71656 0.240234 8.30656C0.240234 10.9556 1.70124 13.1316 4.14024 14.8186L3.16523 17.7186L6.57323 16.0266C7.69204 16.3042 8.83635 16.4664 9.98824 16.5106C10.2942 16.5106 10.5972 16.4956 10.8982 16.4716C10.7014 15.8159 10.6004 15.1352 10.5982 14.4506C10.5982 10.2416 14.2562 6.81956 18.8872 6.81956ZM13.6462 4.20357C13.9661 4.20357 14.2728 4.33062 14.499 4.55679C14.7252 4.78296 14.8522 5.08971 14.8522 5.40956C14.8522 5.72941 14.7252 6.03618 14.499 6.26234C14.2728 6.48851 13.9661 6.61557 13.6462 6.61557C13.4682 6.65051 13.2846 6.64558 13.1087 6.60115C12.9327 6.55672 12.7688 6.47389 12.6287 6.3586C12.4886 6.2433 12.3757 6.0984 12.2982 5.93431C12.2208 5.77023 12.1806 5.59102 12.1806 5.40956C12.1806 5.2281 12.2208 5.04891 12.2982 4.88483C12.3757 4.72074 12.4886 4.57584 12.6287 4.46054C12.7688 4.34524 12.9327 4.26242 13.1087 4.21799C13.2846 4.17356 13.4682 4.16863 13.6462 4.20357ZM6.82323 6.61557C6.64517 6.65051 6.46159 6.64558 6.28565 6.60115C6.10972 6.55672 5.94581 6.47389 5.80569 6.3586C5.66557 6.2433 5.55271 6.0984 5.47523 5.93431C5.39776 5.77023 5.35758 5.59102 5.35758 5.40956C5.35758 5.2281 5.39776 5.04891 5.47523 4.88483C5.55271 4.72074 5.66557 4.57584 5.80569 4.46054C5.94581 4.34524 6.10972 4.26242 6.28565 4.21799C6.46159 4.17356 6.64517 4.16863 6.82323 4.20357C7.14309 4.20357 7.44983 4.33062 7.676 4.55679C7.90217 4.78296 8.02924 5.08971 8.02924 5.40956C8.02924 5.72941 7.90217 6.03618 7.676 6.26234C7.44983 6.48851 7.14309 6.61557 6.82323 6.61557ZM27.7862 14.3396C27.7862 10.4826 23.8862 7.33957 19.5052 7.33957C14.8662 7.33957 11.2132 10.4836 11.2132 14.3396C11.2132 18.1956 14.8662 21.3396 19.5052 21.3396C20.4961 21.2967 21.4782 21.1345 22.4302 20.8566L25.1052 22.3056L24.3712 19.8946C26.3292 18.4416 27.7862 16.5146 27.7862 14.3416V14.3396ZM16.8162 13.1316C16.5603 13.1316 16.3148 13.0299 16.1339 12.8489C15.9529 12.6679 15.8512 12.4225 15.8512 12.1666C15.8512 11.9106 15.9529 11.6652 16.1339 11.4842C16.3148 11.3032 16.5603 11.2016 16.8162 11.2016C16.962 11.1669 17.1137 11.1656 17.26 11.1979C17.4063 11.2302 17.5434 11.2952 17.6609 11.3881C17.7785 11.4809 17.8735 11.5992 17.9388 11.734C18.0042 11.8689 18.0381 12.0167 18.0381 12.1666C18.0381 12.3164 18.0042 12.4643 17.9388 12.5991C17.8735 12.7339 17.7785 12.8522 17.6609 12.9451C17.5434 13.0379 17.4063 13.1029 17.26 13.1352C17.1137 13.1675 16.962 13.1663 16.8162 13.1316ZM22.1782 13.1316C21.9223 13.1316 21.6768 13.0299 21.4959 12.8489C21.3149 12.6679 21.2132 12.4225 21.2132 12.1666C21.2132 11.9106 21.3149 11.6652 21.4959 11.4842C21.6768 11.3032 21.9223 11.2016 22.1782 11.2016C22.324 11.1669 22.4757 11.1656 22.622 11.1979C22.7683 11.2302 22.9054 11.2952 23.0229 11.3881C23.1405 11.4809 23.2355 11.5992 23.3008 11.734C23.3662 11.8689 23.4001 12.0167 23.4001 12.1666C23.4001 12.3164 23.3662 12.4643 23.3008 12.5991C23.2355 12.7339 23.1405 12.8522 23.0229 12.9451C22.9054 13.0379 22.7683 13.1029 22.622 13.1352C22.4757 13.1675 22.324 13.1663 22.1782 13.1316Z"
fill="white" />
</svg>
</a>
</div>
<div class="address">
Room 501, Building A1-3, Xi-Xi Center, Xihu District 310030, Hangzhou,Zhejiang, China
</div>
<div class="email">
info@eury-packaging.com
</div>
<div class="phones">
<p>Fax: +86-571-86408588</p>
<p>Tel: +86-571-81902301</p>
</div>
<div class="links2">
<a href="">Dispenser</a>
</div>
<div class="copyright">
<div class="l">
<p class="p1">Copyright © 2021 Hangzhou Eury Perfume Packaging Technology Co., Ltd. All Rights
Reserved. </p>
<a href="">浙ICP备10040479号-1</a>
</div>
<div class="r">
<a href="">Design by Pithy Mfweb</a>
</div>
</div>
</div>
</div>
<div class="lenis-scroll w-embed w-script">
<script src="./js/lenis.min.js"></script>
<script>
//ScrollTrigger.config({ ignoreMobileResize: true });
"use strict"; // fix lenis in safari
const lenis = new Lenis({
lerp: 0.1,
wheelMultiplier: 0.7,
infinite: false,
gestureOrientation: "vertical",
normalizeWheel: false,
smoothTouch: false,
syncTouchLerp: 1,
touchMultiplier: 0.1,
autoResize: true
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
function connectToScrollTrigger() {
lenis.on('scroll', ScrollTrigger.update)
gsap.ticker.add((time) => {
lenis.raf(time * 1000)
})
gsap.ticker.lagSmoothing(0)
}
// Uncomment this if using GSAP ScrollTrigger
connectToScrollTrigger();
window.addEventListener('resize', function () {
lenis.resize()
});
</script>
</div>
</div>
<script src="./js/jq.js"></script>
<script src="./js/swiper.js"></script>
<script src="./js/common.js"></script>
<script src="./js/wow.min.js"></script>
<script src="./js/countUp.js"></script>
<script src="./js/rellax.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
new WOW().init();
var rellax = new Rellax('.rellax', {
// center: true
callback: function (position) {
// callback every position change
// console.log(position);
}
});
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById("video").play();
document.getElementById("video2").play();
}, false);
}
$('[data-pre]').each(function (index, item) {
let url = $(this).data('pre')
let url2 = $(this).data('d1x');
$(item).find('.poster').css('background-image', 'url(' + url + ')');
$(item).find('.elem').css('background-image', 'url(' + url2 + ')');
})
var h = $('.c-hero').height() - document.documentElement.clientHeight
let isPlay = false
$(window).scroll(function () {
var scroll = $(window).scrollTop() - $('.c-hero').offset().top
if (scroll > 0) {
var p = scroll / h
if (p < 1) {
$('.c-hero-sticky').css({
'--p1': p,
'--p2': 1 - p
})
}
}
var scrollPosition = $(window).scrollTop()
var targetPosition = $('#video2').offset().top
if (
scrollPosition >= targetPosition - $(window).height() + 400 &&
scrollPosition < targetPosition + $('#video2').outerHeight()
) {
console.log("aaa")
if (isPlay == false) {
document.getElementById("video2").play();
}
isPlay = true
}
})
$(function () {
$('.foot_warp').css({ 'height': $('.foot').height() + 100 + 'px' })
function simulateLoadingData() {
var progress = 0;
setInterval(function () {
if (progress >= 100) {
$('.loading').fadeOut()
clearInterval();
} else {
progress += Math.random() * 10 + 5;
$('.progress').css('width', progress + '%');
}
}, 100);
}
// 调用模拟加载数据的函数
simulateLoadingData();
})
console.log(ScrollTrigger.matchMedia())
ScrollTrigger.matchMedia({
// large
"(min-width: 1025px)": function () {
const AboutCard = gsap.timeline({
scrollTrigger: {
trigger: "#scroll-box",
start: "top top",
end: "+=800",
scrub: 1,
pin: "#scroll-box",
}
})
AboutCard
.to("#scroll-box .bg", { opacity: 0.1, duration: 5 })
.to("#scroll-box .text", { opacity: 0.2, duration: 5 })
.set({}, {}, "+=10")
const AboutCard2 = gsap.timeline({
scrollTrigger: {
trigger: "#scroll-box2",
start: "top top",
end: "+=800",
scrub: 1,
pin: "#scroll-box2",
}
})
AboutCard2
.to("#scroll-box2 .bg", { opacity: 0.1, duration: 5 })
.to("#scroll-box2 .text", { opacity: 0.2, duration: 5 })
.set({}, {}, "+=10")
const AboutCard3 = gsap.timeline({
scrollTrigger: {
trigger: "#scroll-box3",
start: "top top",
end: "+=800",
scrub: 1,
pin: "#scroll-box3",
}
})
AboutCard3
.to("#scroll-box3 .bg", { opacity: 0.1, duration: 5 })
.to("#scroll-box3 .text", { opacity: 0.2, duration: 5 })
.set({}, {}, "+=10")
},
// small
"(max-width: 1024px)": function () {
const AboutCard = gsap.timeline({
scrollTrigger: {
trigger: "#scroll-box",
start: "top top",
end: "+=400",
scrub: 1,
pin: "#scroll-box",
}
})
AboutCard
.to("#scroll-box .bg", { opacity: 0.1, duration: 5 })
.to("#scroll-box .text", { opacity: 0.2, duration: 5 })
.set({}, {}, "+=10")
const AboutCard2 = gsap.timeline({
scrollTrigger: {
trigger: "#scroll-box2",
start: "top top",
end: "+=400",
scrub: 1,
pin: "#scroll-box2",
}
})
AboutCard2
.to("#scroll-box2 .bg", { opacity: 0.1, duration: 5 })
.to("#scroll-box2 .text", { opacity: 0.2, duration: 5 })
.set({}, {}, "+=10")
const AboutCard3 = gsap.timeline({
scrollTrigger: {
trigger: "#scroll-box3",
start: "top top",
end: "+=400",
scrub: 1,
pin: "#scroll-box3",
}
})
AboutCard3
.to("#scroll-box3 .bg", { opacity: 0.1, duration: 5 })
.to("#scroll-box3 .text", { opacity: 0.2, duration: 5 })
.set({}, {}, "+=10")
},
});
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。