first_commit

.gitignore

+node_modules
+yarn.lock
+package-lock.json
+dist
+# local env files
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.en.md

+# 科技官网实操
+
+#### Description
+跟着B站前端峰华老师的视频做的科技官网，官网介绍： https://blog.csdn.net/weixin_42290123/article/details/116380910
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

README.md

+# 科技官网实操
+
+#### 介绍
+跟着B站前端峰华老师的视频做的科技官网，官网介绍： https://blog.csdn.net/weixin_42290123/article/details/116380910
+
+#### 软件架构
+软件架构说明
+
+
+#### 安装教程
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 使用说明
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 参与贡献
+
+1.  Fork 本仓库
+2.  新建 Feat_xxx 分支
+3.  提交代码
+4.  新建 Pull Request
+
+
+#### 特技
+
+1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
+2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
+3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
+4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
+5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
+6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

package.json

+{
+  "name": "fire-web-3d",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack-dev-server --config ./webpack.config.js --progress",
+    "build": "webpack --config ./webpack.config.js --progress"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.assessgeek.com/forest-fire/fire-web-3d.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^9.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "dependencies": {
+    "axios": "^1.3.2"
+  }
+}

src/assets/images/black.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 194.05 67.98"><defs><style>.cls-1{fill:url(#未命名的渐变_189);}.cls-2{fill:url(#未命名的渐变_189-2);}.cls-3{fill:#231815;}</style><linearGradient id="未命名的渐变_189" x1="97.02" y1="1.09" x2="97.02" y2="37.59" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#74c6be"/><stop offset="0.36" stop-color="#4774b9"/><stop offset="0.53" stop-color="#9070af"/><stop offset="0.65" stop-color="#4774b9"/><stop offset="1" stop-color="#74c6be"/></linearGradient><linearGradient id="未命名的渐变_189-2" x1="97.02" y1="-2046.1" x2="97.02" y2="-2009.6" gradientTransform="matrix(1, 0, 0, -1, 0, -2009.47)" xlink:href="#未命名的渐变_189"/></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M98.94,0H95.1C93.23,9.91,53.13,16.57,0,17.83v.61H194.05v-.61C140.92,16.57,100.82,9.91,98.94,0Z"/><path class="cls-2" d="M98.94,37.72H95.1c-1.87-9.9-42-16.56-95.1-17.82v-.61H194.05v.61C140.92,21.16,100.82,27.82,98.94,37.72Z"/><path class="cls-3" d="M136.22,59.68h0c-.58-.19-1.17-.35-1.69-.49-1.69-.45-3.43-.91-3.43-2.53,0-.73.32-2.4,3.31-2.4a6,6,0,0,1,4.05,1.56l.07.06,1.26-1.21-.07-.08a6.79,6.79,0,0,0-5.17-2,6,6,0,0,0-4,1.27A3.6,3.6,0,0,0,129,56.69c0,2.28,1.58,3.23,4,4,.55.18,1,.32,1.52.45h0a8.76,8.76,0,0,1,2.56,1,2.23,2.23,0,0,1,1.06,1.83,2.14,2.14,0,0,1-1,1.79,4.07,4.07,0,0,1-2.39.59A6.36,6.36,0,0,1,129.83,64l-.07-.08L128.38,65l.05.08C129.73,67,132,68,134.85,68a5.79,5.79,0,0,0,3.88-1.29,3.77,3.77,0,0,0,1.47-3,3.35,3.35,0,0,0-.54-1.92C138.93,60.66,137.83,60.22,136.22,59.68Z"/><polygon class="cls-3" points="103.85 60.79 103.83 60.83 104.8 62.9 109.25 52.94 107.22 52.94 103.85 60.79"/><rect class="cls-3" x="118.03" y="52.94" width="1.92" height="14.67"/><rect class="cls-3" x="147.34" y="52.94" width="1.92" height="14.67"/><polygon class="cls-3" points="192.22 52.94 192.22 64.29 192.22 64.28 192.22 67.27 192.5 67.61 194.05 67.61 194.05 52.94 192.22 52.94"/><polygon class="cls-3" points="183 52.94 181.48 52.94 181.48 67.61 183.31 67.61 183.31 56.36 188.81 63.11 188.81 60.05 183.04 52.98 183 52.94"/><path class="cls-3" d="M171.12,54.81h0a7.62,7.62,0,0,0-13,5.46,7.24,7.24,0,0,0,2.2,5.43,7.57,7.57,0,0,0,13-5.43A7.44,7.44,0,0,0,171.12,54.81Zm-1.46,9.64a5.5,5.5,0,0,1-7.83,0,6.19,6.19,0,0,1,0-8.37,5.46,5.46,0,0,1,7.77,0,5.7,5.7,0,0,1,1.64,4.19A5.76,5.76,0,0,1,169.66,64.45Z"/><path class="cls-3" d="M47.58,52.89l0-.07H46L39.5,67.53l-.07.15h1.93l.58-1.34h9.57l.59,1.34h2ZM42.55,65,43.75,62l3-6.76L50.91,65Z"/><rect class="cls-3" x="20.92" y="52.82" width="1.89" height="1.73"/><rect class="cls-3" x="83.44" y="59.61" width="2.91" height="3.09"/><polygon class="cls-3" points="96.39 52.94 94.36 52.94 101.23 67.55 101.26 67.61 102.69 67.61 102.95 67.03 96.42 53 96.39 52.94"/><polygon class="cls-3" points="26.22 67.68 28.18 67.68 28.18 54.55 33.5 54.55 33.5 52.82 26.21 52.82 26.22 67.68"/><rect class="cls-3" x="63.19" y="52.82" width="1.9" height="14.86"/><path class="cls-3" d="M72.17,61.42a4.3,4.3,0,0,0,2.7-4.06,4.35,4.35,0,0,0-1.13-3.15,6.21,6.21,0,0,0-4.13-1.38H68.49v1.71h.1l.9,0h.24l.53.06h0a4.71,4.71,0,0,1,.62.16l.07,0,.06,0a3.2,3.2,0,0,1,.4.17l.11.06,0,0a1.91,1.91,0,0,1,.28.19.86.86,0,0,1,.14.13,1.45,1.45,0,0,1,.21.22l.12.16a1.67,1.67,0,0,1,.14.27l0,0a.52.52,0,0,1,.06.13,1.81,1.81,0,0,1,.1.34s0,0,0,.08a.29.29,0,0,1,0,.09,2.9,2.9,0,0,1,0,.58,2.85,2.85,0,0,1,0,.51,3.71,3.71,0,0,1-.13.5,3.23,3.23,0,0,1-3.11,1.92h-1v.94l4.58,6.4,0,.05h2.31l-4.28-5.86Z"/><path class="cls-3" d="M8,59.66H8c-.57-.18-1.14-.33-1.7-.47h0c-1.7-.44-3.46-.88-3.46-2.43,0-.69.32-2.29,3.33-2.29a6.25,6.25,0,0,1,4.1,1.5l.08.06,1.29-1.18-.08-.08a7,7,0,0,0-5.24-2A6.29,6.29,0,0,0,2.17,54,3.42,3.42,0,0,0,.68,56.8c0,2.21,1.6,3.13,4,3.83.56.18,1.06.31,1.54.43h0A9.19,9.19,0,0,1,8.84,62a2.11,2.11,0,0,1,1.07,1.76,2,2,0,0,1-1,1.7A4.2,4.2,0,0,1,6.47,66a6.61,6.61,0,0,1-5-2.26l-.07-.08L0,64.82l.06.09c1.32,1.79,3.63,2.78,6.51,2.78a6,6,0,0,0,3.92-1.25A3.59,3.59,0,0,0,12,63.49a3.19,3.19,0,0,0-.55-1.86C10.7,60.61,9.57,60.19,8,59.66Z"/></g></g></svg>
\ No newline at end of file

src/assets/images/logo.svg

+<svg width="330" height="333" viewBox="0 0 330 333" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M329.837 204.852C325.12 227.572 304.158 285.893 237.3 317.471L210.455 287.28L165.15 332.821C139.373 332.476 114.025 326.175 91.0862 314.409C68.1479 302.644 48.241 285.733 32.9215 264.999C37.7331 266.499 42.7025 267.435 47.73 267.788C55.1512 267.924 63.181 265.202 63.181 252.743V129.845C63.2852 126.686 62.6498 123.547 61.3254 120.677C60.0011 117.807 58.0243 115.286 55.553 113.315C53.0816 111.345 50.1839 109.979 47.0911 109.327C43.9983 108.675 40.7959 108.755 37.7393 109.56C16.7605 114.395 0.0078848 166.732 0.0078848 166.732C-0.227337 142.568 4.80298 118.642 14.7491 96.6189C24.6952 74.5956 39.3185 55.0026 57.6024 39.2021C81.668 18.3862 111.127 4.79644 142.583 0C119.677 13.0505 106.812 34.3336 106.812 52.185C106.812 80.9231 124.123 77.4407 129.245 73.2145V239.084C130.118 241.165 131.254 243.125 132.626 244.916C134.914 248.082 137.926 250.654 141.411 252.418C144.896 254.183 148.752 255.088 152.658 255.059C169.985 255.059 192.469 235.28 192.469 235.28V101.023C192.469 87.3638 182.174 70.8648 171.862 65.2017C171.862 65.2017 190.947 61.8207 205.671 73.0962C208.437 69.7171 211.377 66.484 214.479 63.4098C248.846 29.6848 281.219 20.0829 308.182 15.2819C308.182 15.2819 259.158 53.8078 259.158 105.503C259.158 143.944 260.155 237.698 260.155 237.698C278.345 255.262 305.392 229.888 329.837 204.852Z" fill="#0E1128"/>
+</svg>

src/assets/images/white.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 194.05 67.98"><defs><style>.cls-1{fill:url(#未命名的渐变_189);}.cls-2{fill:url(#未命名的渐变_189-2);}.cls-3{fill:#fff;}</style><linearGradient id="未命名的渐变_189" x1="97.02" y1="1.09" x2="97.02" y2="37.59" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#74c6be"/><stop offset="0.36" stop-color="#4774b9"/><stop offset="0.53" stop-color="#9070af"/><stop offset="0.65" stop-color="#4774b9"/><stop offset="1" stop-color="#74c6be"/></linearGradient><linearGradient id="未命名的渐变_189-2" x1="97.02" y1="-1485.23" x2="97.02" y2="-1448.73" gradientTransform="matrix(1, 0, 0, -1, 0, -1448.6)" xlink:href="#未命名的渐变_189"/></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M98.94,0H95.1C93.23,9.91,53.13,16.57,0,17.83v.61H194.05v-.61C140.92,16.57,100.82,9.91,98.94,0Z"/><path class="cls-2" d="M98.94,37.72H95.1c-1.87-9.9-42-16.56-95.1-17.82v-.61H194.05v.61C140.92,21.16,100.82,27.82,98.94,37.72Z"/><path class="cls-3" d="M136.22,59.68h0c-.58-.19-1.17-.35-1.69-.49-1.69-.45-3.43-.91-3.43-2.53,0-.73.32-2.4,3.31-2.4a6,6,0,0,1,4.05,1.56l.07.06,1.26-1.21-.07-.08a6.79,6.79,0,0,0-5.17-2,6,6,0,0,0-4,1.27A3.6,3.6,0,0,0,129,56.69c0,2.28,1.58,3.23,4,4,.55.18,1,.32,1.52.45h0a8.76,8.76,0,0,1,2.56,1,2.23,2.23,0,0,1,1.06,1.83,2.14,2.14,0,0,1-1,1.79,4.07,4.07,0,0,1-2.39.59A6.36,6.36,0,0,1,129.83,64l-.07-.08L128.38,65l.05.08C129.73,67,132,68,134.85,68a5.79,5.79,0,0,0,3.88-1.29,3.77,3.77,0,0,0,1.47-3,3.35,3.35,0,0,0-.54-1.92C138.93,60.66,137.83,60.22,136.22,59.68Z"/><polygon class="cls-3" points="103.85 60.79 103.83 60.83 104.8 62.9 109.25 52.94 107.22 52.94 103.85 60.79"/><rect class="cls-3" x="118.03" y="52.94" width="1.92" height="14.67"/><rect class="cls-3" x="147.34" y="52.94" width="1.92" height="14.67"/><polygon class="cls-3" points="192.22 52.94 192.22 64.29 192.22 64.28 192.22 67.27 192.5 67.61 194.05 67.61 194.05 52.94 192.22 52.94"/><polygon class="cls-3" points="183 52.94 181.48 52.94 181.48 67.61 183.31 67.61 183.31 56.36 188.81 63.11 188.81 60.05 183.04 52.98 183 52.94"/><path class="cls-3" d="M171.12,54.81h0a7.62,7.62,0,0,0-13,5.46,7.24,7.24,0,0,0,2.2,5.43,7.57,7.57,0,0,0,13-5.43A7.44,7.44,0,0,0,171.12,54.81Zm-1.46,9.64a5.27,5.27,0,0,1-3.93,1.64,5.34,5.34,0,0,1-3.9-1.63,6.19,6.19,0,0,1,0-8.37,5.46,5.46,0,0,1,7.77,0,5.7,5.7,0,0,1,1.64,4.19A5.76,5.76,0,0,1,169.66,64.45Z"/><path class="cls-3" d="M47.58,52.89l0-.07H46L39.5,67.53l-.07.15h1.93l.58-1.34h9.57l.59,1.34h2ZM42.55,65,43.75,62l3-6.76L50.91,65Z"/><rect class="cls-3" x="20.92" y="52.82" width="1.89" height="1.73"/><rect class="cls-3" x="83.44" y="59.61" width="2.91" height="3.09"/><polygon class="cls-3" points="96.39 52.94 94.36 52.94 101.23 67.55 101.26 67.61 102.69 67.61 102.95 67.03 96.42 53 96.39 52.94"/><polygon class="cls-3" points="26.22 67.68 28.18 67.68 28.18 54.55 33.5 54.55 33.5 52.82 26.21 52.82 26.22 67.68"/><rect class="cls-3" x="63.19" y="52.82" width="1.9" height="14.86"/><path class="cls-3" d="M72.17,61.42a4.3,4.3,0,0,0,2.7-4.06,4.35,4.35,0,0,0-1.13-3.15,6.21,6.21,0,0,0-4.13-1.38H68.49v1.71h.1l.9,0h.24l.53.06h0a4.71,4.71,0,0,1,.62.16l.07,0,.06,0a3.2,3.2,0,0,1,.4.17l.11.06,0,0a1.91,1.91,0,0,1,.28.19.86.86,0,0,1,.14.13,1.45,1.45,0,0,1,.21.22l.12.16a1.67,1.67,0,0,1,.14.27l0,0a.52.52,0,0,1,.06.13,1.81,1.81,0,0,1,.1.34s0,0,0,.08a.29.29,0,0,1,0,.09,2.9,2.9,0,0,1,0,.58,2.78,2.78,0,0,1,0,.51,3.71,3.71,0,0,1-.13.5,3.23,3.23,0,0,1-3.11,1.92h-1v.94l4.58,6.4,0,.05h2.31l-4.28-5.86Z"/><path class="cls-3" d="M8,59.66H8c-.57-.18-1.14-.33-1.7-.47h0c-1.7-.44-3.46-.88-3.46-2.43,0-.69.32-2.29,3.33-2.29a6.25,6.25,0,0,1,4.1,1.5l.08.06,1.29-1.18-.08-.08a7,7,0,0,0-5.24-2A6.29,6.29,0,0,0,2.17,54,3.42,3.42,0,0,0,.68,56.8c0,2.21,1.6,3.13,4,3.83.56.18,1.06.31,1.54.43h0A9.19,9.19,0,0,1,8.84,62a2.11,2.11,0,0,1,1.07,1.76,2,2,0,0,1-1,1.7A4.2,4.2,0,0,1,6.47,66a6.61,6.61,0,0,1-5-2.26l-.07-.08L0,64.82l.06.09c1.32,1.79,3.63,2.78,6.51,2.78a6,6,0,0,0,3.92-1.25A3.59,3.59,0,0,0,12,63.49a3.19,3.19,0,0,0-.55-1.86C10.7,60.61,9.57,60.19,8,59.66Z"/></g></g></svg>
\ No newline at end of file

src/assets/js/firstScreen.js

+
+const firstScreenEl = document.querySelector('.first-screen');
+const gradientEl = document.querySelector('.gradient');
+const maskContainerEl = document.querySelector('.mask-container');
+const videoEl = document.getElementById('maskedVideo');
+const desc1El = document.querySelector('.desc-1');
+const desc2El = document.querySelector('.desc-2');
+const maskVideoEl = document.querySelector('.mask-video');
+const videoWrapperEl = document.querySelector('.video-wrapper');
+const scrollIndicatorEl = document.querySelector('.scroll-indicator-wrapper');
+const bottomContentEl = document.querySelector('.bottom-content-wrapper');
+const scrollNum =  window.innerHeight / 3 * 2;
+const desc1MinScroll = window.innerHeight / 3 * 2;
+const desc1MaxScroll = window.innerHeight * 2 - 200;
+const desc2MinScroll = window.innerHeight * 2 - 200;
+const desc2MaxScroll = window.innerHeight * 2;
+const desc2MinScroll2 = window.innerHeight * 2;
+const desc2MaxScroll2 = window.innerHeight * 3;
+const videoMinScroll = window.innerHeight * 2 + window.innerHeight / 2;
+const videoMaxScroll = window.innerHeight * 3 + 80;
+const videoMaxScroll2 = 2 * videoMaxScroll - videoMinScroll;
+const completeScroll = firstScreenEl.offsetHeight + 80 - window.innerHeight;
+let initTop = 0;
+let playing = false;
+
+setTimeout(() => {
+    if (document.compatMode && document.compatMode != 'BackCompat'){
+        document.documentElement.scrollTop = 0;
+    }
+
+    if (document.body) {
+        document.body.scrollTop = 0;
+    }
+}, 600)
+
+// 视频播放结束
+videoEl.addEventListener('ended', function() {
+    playing = false;
+}, false);
+
+// 获取滚动条位置
+function getScrollTop() {
+    let scrollPos;
+    if (window.pageYOffset) {
+        scrollPos = window.pageYOffset;
+    } else if (document.compatMode && document.compatMode != 'BackCompat'){
+        scrollPos = document.documentElement.scrollTop;
+    } else if (document.body) {
+        scrollPos = document.body.scrollTop;
+    }
+    return scrollPos;
+}
+
+// 透明度转换
+function handleOpacity(scrollPos, max, min, type = 1) {
+    if (type === 1) {
+        // 区间1～0
+        return ((max - scrollPos) / (max - min)).toFixed(3);
+    } else {
+        // 区间0～1
+        return ((scrollPos - min) / (max - min)).toFixed(3)
+    }
+}
+
+// 缩放大小转换
+function handleScale(scrollPos, max, scale) {
+    const newMax = max * scale;
+
+    return (newMax / (newMax - (scrollPos * (scale - 1)))).toFixed(3)
+}
+
+// 缩放translateY&filter
+function handleTranslateYAndFilter(scrollPos, max, min, range) {
+    return ((scrollPos - min) / ((max - min) / range)).toFixed(4);
+}
+
+function handleResize() {
+    const h = bottomContentEl.offsetHeight - 300;
+
+    bottomContentEl.style.marginBottom = `${225 - h}px`;
+}
+
+// 兼容微信自动播放问题
+if (typeof WeixinJSBrdgeReady == "object" && typeof WeixinJSBridge.invoke == "function") {
+    videoEl.play();
+    videoEl.pause();
+} else {
+    if (document.addEventListener) {
+        document.addEventListener("WeixinJSBridgeReady", function () {
+            videoEl.play();
+            videoEl.pause();
+        }, false);
+    } else if (document.attachEvent) {
+        document.attachEvent("WeixinJSBridgeReady", function () {
+            videoEl.play();
+            videoEl.pause();
+        });
+        document.attachEvent("onWeixinJSBridgeReady", function () {
+            videoEl.play();
+            videoEl.pause();
+        });
+    }
+}
+
+window.onscroll = function() {
+    const scrollPos = getScrollTop();
+    const scroll = scrollPos - initTop;
+    let dir = 'down';
+
+    initTop = scrollPos;
+    dir = scroll <= 0 ? 'up' : 'down';
+
+    if (scrollPos === 0) {
+        maskContainerEl.style.opacity = gradientEl.style.opacity = 1;
+    }
+
+    // 基数1000
+    if (scrollPos > 0 && scrollPos <= scrollNum) {
+        // 区间1～0
+        const opacity = handleOpacity(scrollPos, scrollNum, 0);
+        // 区间1～1.3
+        const gradientScale = handleScale(scrollPos, scrollNum, 1.3);
+        // 区间1～3
+        const maskContainerScale = handleScale(scrollPos, scrollNum, 3);
+
+        gradientEl.style.opacity = opacity;
+        gradientEl.style.transform = `scale(${gradientScale}) translateZ(0px)`
+        maskContainerEl.style.opacity = opacity;
+        maskContainerEl.style.transform = `scale(${maskContainerScale}) translateZ(0px)`;
+
+        if (dir === 'up') {
+            //向上滚动
+            gradientEl.style.opacity = opacity;
+        } else {
+            // 向下滚动
+            if (scrollPos > 0 && scrollPos < 100) {
+                // 判断滚动距离大于0，小于100px
+                if (videoEl && !playing) {
+                    videoEl.play()
+                    playing = true;
+                }
+            }
+        }
+    } else {
+        maskContainerEl.style.transform = gradientEl.style.transform = 'none';
+    }
+
+    if (scrollPos > scrollNum) {
+        maskContainerEl.style.opacity = gradientEl.style.opacity = 0;
+    }
+
+    // desc1 动画
+    if (scrollPos <= desc1MinScroll) {
+        desc1El.style.opacity = 1;
+        desc1El.style.transform = 'none';
+    }
+
+    if (scrollPos > desc1MinScroll && scrollPos <= desc1MaxScroll) {
+        // 区间1～0
+        const opacity = handleOpacity(scrollPos, desc1MaxScroll, desc1MinScroll);
+        // 区间0～80
+        const desc1Transform = handleTranslateYAndFilter(scrollPos, desc1MaxScroll, desc1MinScroll, 80);
+
+        desc1El.style.opacity = opacity;
+        desc1El.style.transform = `translateY(${desc1Transform}px) translateZ(0px)`
+    }
+
+    // 隐藏desc1
+    if (scrollPos > desc1MaxScroll) {
+        if (!desc1El.classList.contains('halfway')) {
+            desc1El.classList.add('halfway');
+        }
+    } else {
+        desc1El.classList.remove('halfway');
+    }
+
+    // desc2恢复初始状态 || desc2超出最大范围opacity置为0
+    if (scrollPos <= desc2MinScroll || scrollPos > desc2MaxScroll2) {
+        desc2El.style.opacity = 0;
+        desc2El.style.transform = 'none';
+    }
+
+    // desc2动画展示
+    if (scrollPos > desc2MinScroll && scrollPos <= desc2MaxScroll) {
+        // 区间0～1
+        const opacity = handleOpacity(scrollPos, desc2MaxScroll, desc2MinScroll, 0);
+        // 区间-100～0
+        const desc2Transform = ((scrollPos - desc2MaxScroll ) / (desc2MaxScroll - desc2MinScroll) * 100).toFixed(3);
+
+        desc2El.style.opacity = opacity;
+        desc2El.style.transform = `translateY(${desc2Transform}px) translateZ(0px)`;
+    }
+
+    // desc2动画隐藏
+    if (scrollPos > desc2MinScroll2 && scrollPos <= desc2MaxScroll2) {
+        // 区间1~0
+        const opacity = handleOpacity(scrollPos, desc2MaxScroll2, desc2MinScroll2);
+        // 区间0~-80
+        const desc2Transform = -handleTranslateYAndFilter(scrollPos, desc2MaxScroll2, desc2MinScroll2, 80);
+
+        desc2El.style.opacity = opacity;
+        desc2El.style.transform = `translateY(${desc2Transform}px) translateZ(0px)`;
+    }
+
+    // 视频背景恢复初始状态
+    if (scrollPos <= videoMinScroll) {
+        maskVideoEl.style.filter = `blur(0px)`;
+        maskVideoEl.style.opacity = 1;
+        maskVideoEl.style.transform = 'none';
+        videoWrapperEl.style.transform = `none`;
+    }
+
+    // 视频背景缩放
+    if (scrollPos > videoMinScroll && scrollPos <= videoMaxScroll) {
+        // 区间0～30
+        const filter = handleTranslateYAndFilter(scrollPos, videoMaxScroll, videoMinScroll, 30);
+        // 区间1～0.5
+        const opacity = handleOpacity(scrollPos, videoMaxScroll2, videoMinScroll);
+        // 区间0～-40
+        const rotateX = -handleTranslateYAndFilter(scrollPos, videoMaxScroll, videoMinScroll, 40);
+
+        maskVideoEl.style.filter = `blur(${filter}px)`;
+        maskVideoEl.style.opacity = opacity;
+        maskVideoEl.style.transform = `scale(${opacity}) translateZ(0px)`;
+        videoWrapperEl.style.transform = `rotateX(${rotateX}deg) translateZ(0px)`;
+    }
+
+    // 隐藏竖线动画
+    if (scrollPos > videoMinScroll) {
+        if (!scrollIndicatorEl.classList.contains('hide')) {
+            scrollIndicatorEl.classList.add('hide');
+        }
+    } else {
+        scrollIndicatorEl.classList.remove('hide')
+    }
+
+    if (scrollPos > completeScroll) {
+        if (!firstScreenEl.classList.contains('isComplete')) {
+            firstScreenEl.classList.add('isComplete');
+        }
+    } else {
+        firstScreenEl.classList.remove('isComplete');
+    }
+}
+
+window.addEventListener('resize', handleResize);
+
+handleResize();
\ No newline at end of file

src/assets/js/index.js

+const headerEl = document.querySelector("header");
+const scrollToTop = document.querySelector(".scroll-to-top");
+
+window.addEventListener("scroll", () => {
+    // 获取
+    let height = headerEl.getBoundingClientRect().height;
+
+    if (window.pageYOffset - height > 3000) {
+        if (!headerEl.classList.contains("sticky")) {
+            headerEl.classList.add("sticky");
+        }
+    } else {
+        headerEl.classList.remove("sticky");
+    }
+
+    if (window.pageYOffset > 3700) {
+        scrollToTop.style.display = "block";
+    } else {
+        scrollToTop.style.display = "none";
+    }
+});
+
+// const glide = new Glide(".glide", {
+//     type: "carousel",
+//     startAt: 0,
+//     autoplay: 3500,
+// });
+// const captionsEL = document.querySelectorAll(".slide-caption");
+
+// glide.on(["mount.after", "run.after"], () => {
+//     const caption = captionsEL[glide.index];
+//     anime({
+//         targets: caption.children,
+//         opacity: [0, 1],
+//         duration: 400,
+//         easing: "spring(1, 80, 10, 0)",
+//         delay: anime.stagger(400, { start: 300 }),
+//         translateY: [anime.stagger([40, 10]), 0],
+//     });
+// });
+// glide.on("run.before", () => {
+//     document.querySelectorAll(".slide-caption > *").forEach((el) => {
+//         el.style.opacity = 0;
+//     });
+// });
+
+// glide.mount();
+
+// 成功案例 js
+const isotope = new Isotope(".cases", {
+    layoutMode: "fitRows",
+    itemSelector: ".case-item",
+});
+
+const filterBtns = document.querySelector(".filter-btns");
+
+filterBtns.addEventListener("click", (e) => {
+    let { target } = e;
+    const filterOption = target.getAttribute("data-filter");
+    if (filterOption) {
+        document
+            .querySelectorAll(".filter-btn.active")
+            .forEach((btn) => btn.classList.remove("active"));
+        target.classList.add("active");
+
+        isotope.arrange({ filter: filterOption });
+    }
+});
+
+// 通用滑动出现动画配置项
+const staggeringOption = {
+    delay: 300,
+    distance: "50px",
+    duration: 500,
+    easing: "ease-in-out",
+    origin: "bottom",
+};
+
+// interval设置等待时间
+ScrollReveal().reveal(".feature", {...staggeringOption, interval: 350 });
+
+ScrollReveal().reveal(".service-item", {...staggeringOption, interval: 350 });
+
+const dataSectionEl = document.querySelector(".data-section");
+
+ScrollReveal().reveal(".data-section", {
+    beforeReveal: () => {
+        anime({
+            targets: ".data-piece .num",
+            innerHTML: (el) => {
+                return [0, el.innerHTML];
+            },
+            duration: 1500,
+            round: 1,
+            easinge: "easeInExpo",
+        });
+        dataSectionEl.style.backgroundPosition =
+            "center calc(50% - ${dataSectionEl.getBoundingClientRect().bottom/5}px)";
+    },
+});
+
+window.addEventListener("scroll", () => {
+    const bottom = dataSectionEl.getBoundingClientRect().bottom;
+    const top = dataSectionEl.getBoundingClientRect.top;
+    if (bottom >= 0 && top <= window.innerHeight) {
+        dataSectionEl.style.backgroundPosition = "center calc(50% - ${bottom/5}px)";
+    }
+});
+
+const scroll = new SmoothScroll(
+    'nav a[href*="#"] , .scroll-to-top a[href*="#"]', {
+        header: "header",
+        offset: 50,
+    }
+);
+
+document.addEventListener("scrollStart", () => {
+    if (headerEl.classList.contains("open")) {
+        headerEl.classList.remove("open");
+    }
+})
+
+const exploreBtnEls = document.querySelectorAll(".explore-btn");
+exploreBtnEls.forEach((exploreBtnEl) => {
+    exploreBtnEl.addEventListener("click", () => {
+        scroll.animateScroll(document.querySelector("#about-us"));
+    });
+});
+
+// 折叠按钮事件
+const burgerEl = document.querySelector(".burger");
+burgerEl.addEventListener("click", () => {
+    headerEl.classList.toggle("open");
+})
\ No newline at end of file

src/assets/js/session.js

+import axios from 'axios'
+//2、封装请求的跟地址
+
+function create(){
+    return request({
+        url: '/system/group/create',
+        method: 'post',
+        data: data
+      })
+}
\ No newline at end of file

src/libs/glide/glide.core.min.css

+.glide{position:relative;width:100%;box-sizing:border-box}.glide *{box-sizing:inherit}.glide__track{overflow:hidden}.glide__slides{position:relative;width:100%;list-style:none;backface-visibility:hidden;transform-style:preserve-3d;touch-action:pan-Y;overflow:hidden;padding:0;white-space:nowrap;display:flex;flex-wrap:nowrap;will-change:transform}.glide__slides--dragging{user-select:none}.glide__slide{width:100%;height:100%;flex-shrink:0;white-space:normal;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.glide__slide a{user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.glide__arrows{-webkit-touch-callout:none;user-select:none}.glide__bullets{-webkit-touch-callout:none;user-select:none}.glide--rtl{direction:rtl}

src/libs/glide/glide.theme.min.css

+.glide__arrow{position:absolute;display:block;top:50%;z-index:2;color:white;text-transform:uppercase;padding:9px 12px;background-color:transparent;border:2px solid rgba(255,255,255,0.5);border-radius:4px;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);text-shadow:0 0.25em 0.5em rgba(0,0,0,0.1);opacity:1;cursor:pointer;transition:opacity 150ms ease, border 300ms ease-in-out;transform:translateY(-50%);line-height:1}.glide__arrow:focus{outline:none}.glide__arrow:hover{border-color:white}.glide__arrow--left{left:2em}.glide__arrow--right{right:2em}.glide__arrow--disabled{opacity:0.33}.glide__bullets{position:absolute;z-index:2;bottom:2em;left:50%;display:inline-flex;list-style:none;transform:translateX(-50%)}.glide__bullet{background-color:rgba(255,255,255,0.5);width:9px;height:9px;padding:0;border-radius:50%;border:2px solid transparent;transition:all 300ms ease-in-out;cursor:pointer;line-height:0;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);margin:0 0.25em}.glide__bullet:focus{outline:none}.glide__bullet:hover,.glide__bullet:focus{border:2px solid white;background-color:rgba(255,255,255,0.5)}.glide__bullet--active{background-color:white}.glide--swipeable{cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.glide--dragging{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}

src/libs/smooth-scroll/smooth-scroll.polyfills.min.js

+/*! smooth-scroll v16.1.2 | (c) 2020 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/smooth-scroll */
+window.Element&&!Element.prototype.closest&&(Element.prototype.closest=function(e){var t,n=(this.document||this.ownerDocument).querySelectorAll(e),o=this;do{for(t=n.length;0<=--t&&n.item(t)!==o;);}while(t<0&&(o=o.parentElement));return o}),(function(){if("function"==typeof window.CustomEvent)return;function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,window.CustomEvent=e})(),(function(){for(var r=0,e=["ms","moz","webkit","o"],t=0;t<e.length&&!window.requestAnimationFrame;++t)window.requestAnimationFrame=window[e[t]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[t]+"CancelAnimationFrame"]||window[e[t]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e,t){var n=(new Date).getTime(),o=Math.max(0,16-(n-r)),a=window.setTimeout((function(){e(n+o)}),o);return r=n+o,a}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(e){clearTimeout(e)})})(),(function(e,t){"function"==typeof define&&define.amd?define([],(function(){return t(e)})):"object"==typeof exports?module.exports=t(e):e.SmoothScroll=t(e)})("undefined"!=typeof global?global:"undefined"!=typeof window?window:this,(function(q){"use strict";var I={ignore:"[data-scroll-ignore]",header:null,topOnEmptyHash:!0,speed:500,speedAsDuration:!1,durationMax:null,durationMin:null,clip:!0,offset:0,easing:"easeInOutCubic",customEasing:null,updateURL:!0,popstate:!0,emitEvents:!0},F=function(){var n={};return Array.prototype.forEach.call(arguments,(function(e){for(var t in e){if(!e.hasOwnProperty(t))return;n[t]=e[t]}})),n},r=function(e){"#"===e.charAt(0)&&(e=e.substr(1));for(var t,n=String(e),o=n.length,a=-1,r="",i=n.charCodeAt(0);++a<o;){if(0===(t=n.charCodeAt(a)))throw new InvalidCharacterError("Invalid character: the input contains U+0000.");1<=t&&t<=31||127==t||0===a&&48<=t&&t<=57||1===a&&48<=t&&t<=57&&45===i?r+="\\"+t.toString(16)+" ":r+=128<=t||45===t||95===t||48<=t&&t<=57||65<=t&&t<=90||97<=t&&t<=122?n.charAt(a):"\\"+n.charAt(a)}return"#"+r},L=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},x=function(e){return e?(t=e,parseInt(q.getComputedStyle(t).height,10)+e.offsetTop):0;var t},H=function(e,t,n,o){if(t.emitEvents&&"function"==typeof q.CustomEvent){var a=new CustomEvent(e,{bubbles:!0,detail:{anchor:n,toggle:o}});document.dispatchEvent(a)}};return function(o,e){var A,a,O,C,M={};M.cancelScroll=function(e){cancelAnimationFrame(C),C=null,e||H("scrollCancel",A)},M.animateScroll=function(i,c,e){M.cancelScroll();var s=F(A||I,e||{}),u="[object Number]"===Object.prototype.toString.call(i),t=u||!i.tagName?null:i;if(u||t){var l=q.pageYOffset;s.header&&!O&&(O=document.querySelector(s.header));var n,o,a,m,r,d,f,h,p=x(O),g=u?i:(function(e,t,n,o){var a=0;if(e.offsetParent)for(;a+=e.offsetTop,e=e.offsetParent;);return a=Math.max(a-t-n,0),o&&(a=Math.min(a,L()-q.innerHeight)),a})(t,p,parseInt("function"==typeof s.offset?s.offset(i,c):s.offset,10),s.clip),y=g-l,v=L(),w=0,S=(n=y,a=(o=s).speedAsDuration?o.speed:Math.abs(n/1e3*o.speed),o.durationMax&&a>o.durationMax?o.durationMax:o.durationMin&&a<o.durationMin?o.durationMin:parseInt(a,10)),E=function(e,t){var n,o,a,r=q.pageYOffset;if(e==t||r==t||(l<t&&q.innerHeight+r)>=v)return M.cancelScroll(!0),o=t,a=u,0===(n=i)&&document.body.focus(),a||(n.focus(),document.activeElement!==n&&(n.setAttribute("tabindex","-1"),n.focus(),n.style.outline="none"),q.scrollTo(0,o)),H("scrollStop",s,i,c),!(C=m=null)},b=function(e){var t,n,o;m||(m=e),w+=e-m,d=l+y*(n=r=1<(r=0===S?0:w/S)?1:r,"easeInQuad"===(t=s).easing&&(o=n*n),"easeOutQuad"===t.easing&&(o=n*(2-n)),"easeInOutQuad"===t.easing&&(o=n<.5?2*n*n:(4-2*n)*n-1),"easeInCubic"===t.easing&&(o=n*n*n),"easeOutCubic"===t.easing&&(o=--n*n*n+1),"easeInOutCubic"===t.easing&&(o=n<.5?4*n*n*n:(n-1)*(2*n-2)*(2*n-2)+1),"easeInQuart"===t.easing&&(o=n*n*n*n),"easeOutQuart"===t.easing&&(o=1- --n*n*n*n),"easeInOutQuart"===t.easing&&(o=n<.5?8*n*n*n*n:1-8*--n*n*n*n),"easeInQuint"===t.easing&&(o=n*n*n*n*n),"easeOutQuint"===t.easing&&(o=1+--n*n*n*n*n),"easeInOutQuint"===t.easing&&(o=n<.5?16*n*n*n*n*n:1+16*--n*n*n*n*n),t.customEasing&&(o=t.customEasing(n)),o||n),q.scrollTo(0,Math.floor(d)),E(d,g)||(C=q.requestAnimationFrame(b),m=e)};0===q.pageYOffset&&q.scrollTo(0,0),f=i,h=s,u||history.pushState&&h.updateURL&&history.pushState({smoothScroll:JSON.stringify(h),anchor:f.id},document.title,f===document.documentElement?"#top":"#"+f.id),"matchMedia"in q&&q.matchMedia("(prefers-reduced-motion)").matches?q.scrollTo(0,Math.floor(g)):(H("scrollStart",s,i,c),M.cancelScroll(!0),q.requestAnimationFrame(b))}};var t=function(e){if(!e.defaultPrevented&&!(0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey)&&"closest"in e.target&&(a=e.target.closest(o))&&"a"===a.tagName.toLowerCase()&&!e.target.closest(A.ignore)&&a.hostname===q.location.hostname&&a.pathname===q.location.pathname&&/#/.test(a.href)){var t,n;try{t=r(decodeURIComponent(a.hash))}catch(e){t=r(a.hash)}if("#"===t){if(!A.topOnEmptyHash)return;n=document.documentElement}else n=document.querySelector(t);(n=n||"#top"!==t?n:document.documentElement)&&(e.preventDefault(),(function(e){if(history.replaceState&&e.updateURL&&!history.state){var t=q.location.hash;t=t||"",history.replaceState({smoothScroll:JSON.stringify(e),anchor:t||q.pageYOffset},document.title,t||q.location.href)}})(A),M.animateScroll(n,a))}},n=function(e){if(null!==history.state&&history.state.smoothScroll&&history.state.smoothScroll===JSON.stringify(A)){var t=history.state.anchor;"string"==typeof t&&t&&!(t=document.querySelector(r(history.state.anchor)))||M.animateScroll(t,null,{updateURL:!1})}};M.destroy=function(){A&&(document.removeEventListener("click",t,!1),q.removeEventListener("popstate",n,!1),M.cancelScroll(),C=O=a=A=null)};return (function(){if(!("querySelector"in document&&"addEventListener"in q&&"requestAnimationFrame"in q&&"closest"in q.Element.prototype))throw"Smooth Scroll: This browser does not support the required JavaScript methods and browser APIs.";M.destroy(),A=F(I,e||{}),O=A.header?document.querySelector(A.header):null,document.addEventListener("click",t,!1),A.updateURL&&A.popstate&&q.addEventListener("popstate",n,!1)})(),M}}));
\ No newline at end of file

src/main.js

+require('./assets/js/index.js');
+require('./assets/js/firstScreen.js');
+require('./assets/js/session.js');
+

webpack.config.js

+const {resolve} = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const copyWebpackPlugin = require('copy-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+    entry: './src/main.js',
+    output: {
+        filename: "index.[contenthash:6].js",
+        path: resolve(__dirname, 'dist')
+    },
+    devServer:{   // 开发服务器配置
+        port:3000,
+        open:true,
+        proxy: {
+            // detail: https://cli.vuejs.org/config/#devserver-proxy
+            ['/']: {
+              target: `http://192.168.200.58:48078`,
+              changeOrigin: true,
+              secure:false,
+              pathRewrite: {
+                '^/': ''
+              }
+            }
+        },
+    },
+   
+    plugins: [
+        new CleanWebpackPlugin(),
+        new HtmlWebpackPlugin({
+            template: "./src/index.html"
+        }),
+        new copyWebpackPlugin({
+            patterns: [{
+                from:__dirname+'/src/assets/images/',
+                to: resolve(__dirname, './dist/assets/images/')
+            }, {
+                from:__dirname+'/src/assets/style.css',
+                to: resolve(__dirname, './dist/assets/style.css')
+            },
+            {
+                from:__dirname+'/src/libs/',
+                to: resolve(__dirname, './dist/libs')
+            }]
+        }),
+    ],
+    mode: "production"
+}
\ No newline at end of file