首頁 探索 說明
註冊 登入
zhangyupeng
/
getty-show
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

fix: save

gemercheung 1 年之前
父節點
282c212b70
當前提交
761ecd9e38
共有 15 個文件被更改，包括 347 次插入 和 139 次删除
分割檢視 顯示文件統計
  1. 1 1
      index.html
  2. 1 6
      src/App.jsx
  3. 1 0
      src/components/TimeLineText.jsx
  4. 2 2
      src/components/Viewer.jsx
  5. 124 0
      src/style/section.jsx
  6. 15 92
      src/view/Section1.jsx
  7. 30 2
      src/view/Section10.jsx
  8. 6 3
      src/view/Section2.jsx
  9. 2 15
      src/view/Section3.jsx
  10. 16 2
      src/view/Section4.jsx
  11. 29 2
      src/view/Section5.jsx
  12. 27 2
      src/view/Section6.jsx
  13. 30 2
      src/view/Section7.jsx
  14. 29 2
      src/view/Section8.jsx
  15. 34 8
      src/view/Section9.jsx

+ 1 - 1
index.html
查看文件 

@@ -1,4 +1,4 @@
 
-<!doctype html>
 
+<!DOCTYPE html>
 
 <html lang="en">
 
   <head>
 
     <meta charset="UTF-8" />

+ 1 - 6
src/App.jsx
查看文件 

@@ -1,8 +1,7 @@
 
 import { useRef, useEffect } from "react";
 
 import { gsap, ScrollTrigger } from "gsap/all";
 
-import { Action } from "./action";
 
+
 
 import Opening from "./components/Opening";
 
-import Viewer from "./components/Viewer";
 
 
 import Section1 from "./view/Section1";
 
 import Section2 from "./view/Section2";
 
@@ -22,8 +21,6 @@ import Section13 from "./view/Section13";
 
 import Section14 from "./view/Section14";
 
 import Section15 from "./view/Section15";
 
 
-
 
-
 
 import { useControls } from "leva";
 
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -91,8 +88,6 @@ function App() {
 
       <Section13 debug={debug} />
 
       <Section14 debug={debug} />
 
       <Section15 debug={debug} />
 
-
 
-
 
     </div>
 
   );
 
 }

+ 1 - 0
src/components/TimeLineText.jsx
查看文件 

@@ -219,6 +219,7 @@ export function TimeLineWallText(props) {
 
       parentHeight={props.parentHeight}

       style={props.style}

       progressPosition={props.progressPosition}

+      {...props}

     >

       {props.children}

     </TimeLineText>

+ 2 - 2
src/components/Viewer.jsx
查看文件 

@@ -10,8 +10,8 @@ import { gsap, ScrollTrigger } from "gsap/all";
 
 import LazyLoad from "react-lazyload";

 import { css } from "@emotion/react";

 

-const isDebug = Number(import.meta.env.VITE_APP_DEBUG) === 1;

-

+// const isDebug = Number(import.meta.env.VITE_APP_DEBUG) === 1;

+const isDebug = false;

 console.log("isDebug", isDebug);

 

 export default function Viewer(props) {

+ 124 - 0
src/style/section.jsx
查看文件 

@@ -0,0 +1,124 @@
 
+import { css } from "@emotion/react";

+

+export const Style = {

+  StartTitleStyle: css`

+    display: flex;

+    justify-content: center;

+    position: relative;

+    align-items: center;

+    .title {

+      font-size: 25px;

+      font-weight: 300;

+      line-height: 2;

+      max-width: 750px;

+      margin: -20px auto 100px;

+      width: 100%;

+      text-align: center;

+    }

+    @media (max-device-width: 416px), only screen and (max-width: 767px) {

+      .title {

+        font-size: 6.15vw;

+        padding: 0 20px;

+      }

+    }

+  `,

+  EndTitleStyle: css`

+    display: flex;

+    min-height: calc(var(--vh, 1vh) * 100);

+    justify-content: center;

+    position: relative;

+    z-index: 10;

+    margin-top: -40px;

+    padding: 100px 40px;

+    align-items: center;

+    direction: var(--text-direction);

+    text-align: var(--alignment);

+    > .title {

+      font-size: 25px;

+      font-weight: 300;

+      line-height: 2;

+      max-width: 750px;

+      margin: -20px auto 100px;

+    }

+    @media (max-device-width: 416px), only screen and (max-width: 767px) {

+      font-size: 16px;

+      line-height: 1.66;

+      margin-bottom: 0;

+    }

+  `,

+  LabelStyle: css`

+    font-weight: 300;

+    font-size: 18px;

+    width: 50%;

+    max-width: 600px;

+    padding: 8px 12px;

+    margin-right: 20px;

+    margin-left: auto;

+    background: rgba(0, 0, 0, 0.7);

+    transform: translateZ(0);

+    line-height: 1.66;

+    border-radius: 2px;

+    @media (max-device-width: 416px), only screen and (max-width: 767px) {

+      width: 90%;

+      font-size: 16px;

+      margin-left: auto;

+      margin-right: auto;

+    }

+  `,

+  DescriptionStyle: css`

+    width: 35%;

+    padding-left: 32px;

+    padding-right: 32px;

+    z-index: 25;

+    font-size: 24px;

+    line-height: 1.66;

+    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);

+    .desc-title {

+      text-transform: uppercase;

+      font-size: 30px;

+    }

+    .desc-sub-title {

+      font-size: 25px;

+      font-weight: 300;

+    }

+    .desc-t-title {

+      font-size: 25px;

+      font-weight: 300;

+    }

+    @media (max-device-width: 544px) and (min-device-width: 417px),

+      only screen and (max-width: 1080px) and (min-width: 767px) {

+      transform: translateY(33vh);

+      width: 90%;

+      line-height: 1.4;

+      letter-spacing: var(--letter-space, 2.5px);

+      .desc-title {

+        margin-bottom: 10px;

+        font-size: 23px;

+      }

+      .desc-sub-title {

+        margin-bottom: 10px;

+        font-size: 16px;

+      }

+      .desc-t-title {

+        font-size: 16px;

+      }

+    }

+    @media (max-device-width: 416px), only screen and (max-width: 767px) {

+      transform: translateY(25.5vh);

+      line-height: 1.4;

+      width: 90%;

+      padding: 20px;

+      .desc-title {

+        margin-bottom: 10px;

+        font-size: 23px;

+      }

+      .desc-sub-title {

+        margin-bottom: 10px;

+        font-size: 16px;

+      }

+      .desc-t-title {

+        font-size: 16px;

+      }

+    }

+  `,

+};

+ 15 - 92
src/view/Section1.jsx
查看文件 

@@ -1,6 +1,6 @@
 
 import { Action } from "../action";

-import { css } from "@emotion/react";

 import Viewer from "../components/Viewer";

+import { Style } from "../style/section";

 

 import {

   TimeLineTitleText,

@@ -37,57 +37,24 @@ export default function Section1(props) {
 
           }),

         ]}

       >

-        <div

-          css={css`

-            font-weight: 300;

-            font-size: 2.75vw;

-            width: 100%;

-            text-align: center;

-          `}

-        >

-          对古代美索不达米亚人来说，礼拜是日常生活的一部分。

+        <div css={Style.StartTitleStyle}>

+          <div className="title">

+            对古代美索不达米亚人来说，礼拜是日常生活的一部分。{" "}

+          </div>

         </div>

       </TimeLineTitleText>

 

       <TimeLineLabelText duration={0.0325} fade={0.01} progressPosition={0.03}>

-        <div

-          css={css`

-            font-weight: 300;

-            font-size: 18px;

-            width: 50%;

-            max-width: 600px;

-            padding: 8px 12px;

-            margin-right: 20px;

-            margin-left: auto;

-            background: rgba(0, 0, 0, 0.7);

-            border-radius: 2px;

-          `}

-        >

+        <div css={Style.LabelStyle}>

           各城邦的城市建筑甚至被赋予象征及宗教意义。巴比伦古城的建筑装饰即是一个鲜明例子。

         </div>

       </TimeLineLabelText>

 

       <TimeLineWallText className={"wall-text"} progressPosition={0.125}>

-        <div

-          css={css`

-            width: 35%;

-            padding-left: 32px;

-            padding-right: 32px;

-            z-index: 25;

-            font-size: 24px;

-            line-height: 1.66;

-            text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);

-          `}

-        >

-          <div

-            css={css`

-              font-size: 30px;

-            `}

-          >

-            迈步狮纹镶板

-          </div>

-          <div>公元前605-562年</div>

-          <div>涂釉陶瓷</div>

+        <div css={Style.DescriptionStyle}>

+          <div className="desc-title">迈步狮纹镶板</div>

+          <div className="desc-sub-title">公元前605-562年</div>

+          <div className="desc-t-title">涂釉陶瓷</div>

           <ButtonText>

             <i>迈步狮纹镶板</i>

             ，新巴比伦时期，公元前605-562年，涂釉陶瓷。大都会艺术博物馆，Fletcher

@@ -101,19 +68,7 @@ export default function Section1(props) {
 
         verticalOffset={"63vh"}

         progressPosition={0.25}

       >

-        <div

-          css={css`

-            font-weight: 300;

-            font-size: 18px;

-            width: 50%;

-            max-width: 600px;

-            padding: 8px 12px;

-            margin-right: 20px;

-            margin-left: auto;

-            background: rgba(0, 0, 0, 0.7);

-            border-radius: 2px;

-          `}

-        >

+        <div css={Style.LabelStyle}>

           <div>

             在巴比伦最重要的街道Processional

             Way两侧，排列着一百多块狮子釉砖，迈步狮纹镶板便是其中之一。这条路穿过伊什塔尔城门(Ishtar

@@ -127,25 +82,14 @@ export default function Section1(props) {
 
         verticalOffset={"63vh"}

         progressPosition={0.45}

       >

-        <div

-          css={css`

-            font-weight: 300;

-            font-size: 18px;

-            width: 50%;

-            max-width: 600px;

-            padding: 8px 12px;

-            margin-right: 20px;

-            margin-left: auto;

-            background: rgba(0, 0, 0, 0.7);

-            border-radius: 2px;

-          `}

-        >

+        <div css={Style.LabelStyle}>

           <div>

             四维时代致力于人工智能三维数字化技术的.

             研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

           </div>

         </div>

       </TimeLineLabelText>

+

       <TimeLineTitleText

         trigger={Action.scrubPin}

         verticalOffset={"0vh"}

@@ -160,29 +104,8 @@ export default function Section1(props) {
 
           }),

         ]}

       >

-        <div

-          css={css`

-            display: flex;

-            min-height: calc(var(--vh, 1vh) * 100);

-            justify-content: center;

-            position: relative;

-            z-index: 10;

-            margin-top: -40px;

-            padding: 100px 40px;

-            align-items: center;

-            direction: var(--text-direction);

-            text-align: var(--alignment);

-          `}

-        >

-          <div

-            css={css`

-              font-size: 25px;

-              font-weight: 300;

-              line-height: 2;

-              max-width: 750px;

-              margin: -20px auto 100px;

-            `}

-          >

+        <div css={Style.EndTitleStyle}>

+          <div className="title">

             这是盖蒂别墅博物馆在2021年与卢浮宫博物馆合作举办的关于古美索不达米亚的大型展览中展出的130多件展品之一。这些展品囊括了美索不达米亚城邦、文字及王国于约三千年的发展。

           </div>

         </div>

+ 30 - 2
src/view/Section10.jsx
查看文件 

@@ -1,5 +1,5 @@
 
 import { Action } from "../action";

-// import { css } from "@emotion/react";

+import { css } from "@emotion/react";

 import Viewer from "../components/Viewer";

 

 import { TimeLineLabelText } from "../components/TimeLineText";

@@ -7,14 +7,42 @@ import { TimeLineLabelText } from "../components/TimeLineText";
 
 export default function Section10(props) {

   // eslint-disable-next-line react/prop-types

   const debug = props.debug || false;

+

   return (

     <Viewer

       height={"300vh"}

+      debug={debug}

       name="Dictionary Render"

       path="dictionary-steadi-10fps-873-rev1"

       frameCount={45}

       enterTween={Action.crossFadeIn}

       exitTween={Action.pinForExit}

-    />

+    >

+      <TimeLineLabelText

+        fade={0.01}

+        verticalOffset={"23vh"}

+        duration={0.5}

+        progressPosition={0.09}

+      >

+        <div

+          css={css`

+            font-weight: 300;

+            font-size: 18px;

+            width: 50%;

+            max-width: 600px;

+            padding: 8px 12px;

+            margin-right: 20px;

+            margin-left: auto;

+            background: rgba(0, 0, 0, 0.7);

+            border-radius: 2px;

+          `}

+        >

+          <div>

+            测试文案： 四维时代致力于人工智能三维数字化技术的.

+            研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

+          </div>

+        </div>

+      </TimeLineLabelText>

+    </Viewer>

   );

 }

+ 6 - 3
src/view/Section2.jsx
查看文件 

@@ -28,15 +28,18 @@ export default function Section2() {
 
         <TimeLineTransText>

           <div

             css={css`

-              width: 750px;

+              max-width: 750px;

               margin: 0 auto;

             `}

           >

             <img

+              height="600"

+              width="750"

               src={mapJpg}

               css={css`

-                width: 750px;

-                height: 600px;

+                max-width: 100%;

+                width: 100%;

+                height: auto;

               `}

             />

             <br />

+ 2 - 15
src/view/Section3.jsx
查看文件 

@@ -1,7 +1,6 @@
 
 import { Action } from "../action";

-import { css } from "@emotion/react";

 import Viewer from "../components/Viewer";

-

+import { Style } from "../style/section";

 import { TimeLineLabelText } from "../components/TimeLineText";

 

 export default function Section3(props) {

@@ -23,19 +22,7 @@ export default function Section3(props) {
 
         fade={0.1}

         progressPosition={0}

       >

-        <div

-          css={css`

-            font-weight: 300;

-            font-size: 18px;

-            width: 50%;

-            max-width: 380px;

-            padding: 8px 12px;

-            margin-right: 20px;

-            margin-left: auto;

-            background: rgba(0, 0, 0, 0.7);

-            border-radius: 2px;

-          `}

-        >

+        <div css={Style.LabelStyle}>

           美索不达米亚人认为，人乃为服务于神而造。

         </div>

       </TimeLineLabelText>

+ 16 - 2
src/view/Section4.jsx
查看文件 

@@ -1,5 +1,5 @@
 
 import { Action } from "../action";

-import { css } from "@emotion/react";

+import { Style } from "../style/section";

 import Viewer from "../components/Viewer";

 

 import { TimeLineLabelText } from "../components/TimeLineText";

@@ -16,6 +16,20 @@ export default function Section4(props) {
 
       debug={debug}

       enterTween={Action.crossFadeIn}

       exitTween={Action.pinForExit}

-    />

+    >

+      <TimeLineLabelText

+        fade={0.01}

+        verticalOffset={"83vh"}

+        duration={0.3}

+        progressPosition={0.05}

+      >

+        <div css={Style.LabelStyle}>

+          <div>

+            测试文案： 四维时代致力于人工智能三维数字化技术的.

+            研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

+          </div>

+        </div>

+      </TimeLineLabelText>

+    </Viewer>

   );

 }

+ 29 - 2
src/view/Section5.jsx
查看文件 

@@ -1,5 +1,5 @@
 
 import { Action } from "../action";

-// import { css } from "@emotion/react";

+import { css } from "@emotion/react";

 import Viewer from "../components/Viewer";

 

 import { TimeLineLabelText } from "../components/TimeLineText";

@@ -16,6 +16,33 @@ export default function Section4(props) {
 
       debug={debug}

       enterTween={Action.crossFadeIn}

       exitTween={Action.pinForExit}

-    ></Viewer>

+    >

+      <TimeLineLabelText

+        fade={0.01}

+        verticalOffset={"23vh"}

+        duration={0.3}

+        progressPosition={0.09}

+

+      >

+        <div

+          css={css`

+            font-weight: 300;

+            font-size: 18px;

+            width: 50%;

+            max-width: 600px;

+            padding: 8px 12px;

+            margin-right: 20px;

+            margin-left: auto;

+            background: rgba(0, 0, 0, 0.7);

+            border-radius: 2px;

+          `}

+        >

+          <div>

+            测试文案： 四维时代致力于人工智能三维数字化技术的.

+            研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

+          </div>

+        </div>

+      </TimeLineLabelText>

+    </Viewer>

   );

 }

+ 27 - 2
src/view/Section6.jsx
查看文件 

@@ -1,5 +1,5 @@
 
 import { Action } from "../action";

-// import { css } from "@emotion/react";

+import { css } from "@emotion/react";

 import Viewer from "../components/Viewer";

 

 import { TimeLineLabelText } from "../components/TimeLineText";

@@ -15,6 +15,31 @@ export default function Section6(props) {
 
       frameCount={158}

       enterTween={Action.crossFadeIn}

       exitTween={Action.pinForExit}

-    />

+    >

+      <TimeLineLabelText

+        fade={0.01}

+        verticalOffset={"43vh"}

+        progressPosition={0.05}

+      >

+        <div

+          css={css`

+            font-weight: 300;

+            font-size: 18px;

+            width: 50%;

+            max-width: 600px;

+            padding: 8px 12px;

+            margin-right: 20px;

+            margin-left: auto;

+            background: rgba(0, 0, 0, 0.7);

+            border-radius: 2px;

+          `}

+        >

+          <div>

+            测试文案： 四维时代致力于人工智能三维数字化技术的.

+            研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

+          </div>

+        </div>

+      </TimeLineLabelText>

+    </Viewer>

   );

 }

+ 30 - 2
src/view/Section7.jsx
查看文件 

@@ -1,5 +1,5 @@
 
 import { Action } from "../action";

-// import { css } from "@emotion/react";

+import { css } from "@emotion/react";

 import Viewer from "../components/Viewer";

 

 import { TimeLineLabelText } from "../components/TimeLineText";

@@ -7,14 +7,42 @@ import { TimeLineLabelText } from "../components/TimeLineText";
 
 export default function Section7(props) {

   // eslint-disable-next-line react/prop-types

   const debug = props.debug || false;

+

   return (

     <Viewer

       height={"400vh"}

       name="Gudea Architect Steadi"

       path="gudea-architect-steadi-10fps-873-rev1"

       frameCount={84}

+      debug={debug}

       enterTween={Action.crossFadeIn}

       exitTween={Action.pinForExit}

-    />

+    >

+      <TimeLineLabelText

+        fade={0.01}

+        verticalOffset={"23vh"}

+        duration={0.3}

+        progressPosition={0.09}

+      >

+        <div

+          css={css`

+            font-weight: 300;

+            font-size: 18px;

+            width: 50%;

+            max-width: 600px;

+            padding: 8px 12px;

+            margin-right: 20px;

+            margin-left: auto;

+            background: rgba(0, 0, 0, 0.7);

+            border-radius: 2px;

+          `}

+        >

+          <div>

+            测试文案： 四维时代致力于人工智能三维数字化技术的.

+            研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

+          </div>

+        </div>

+      </TimeLineLabelText>

+    </Viewer>

   );

 }

+ 29 - 2
src/view/Section8.jsx
查看文件 

@@ -1,5 +1,5 @@
 
 import { Action } from "../action";

-// import { css } from "@emotion/react";

+import { css } from "@emotion/react";

 import Viewer from "../components/Viewer";

 

 import { TimeLineLabelText } from "../components/TimeLineText";

@@ -13,8 +13,35 @@ export default function Section8(props) {
 
       name="Gudea Architect Render"

       path="gudea-architect-render-10fps-873-rev1"

       frameCount={201}

+      debug={debug}

       enterTween={Action.crossFadeIn}

       exitTween={Action.pinForExit}

-    />

+    >

+      <TimeLineLabelText

+        fade={0.01}

+        verticalOffset={"23vh"}

+        duration={0.5}

+        progressPosition={0.09}

+      >

+        <div

+          css={css`

+            font-weight: 300;

+            font-size: 18px;

+            width: 50%;

+            max-width: 600px;

+            padding: 8px 12px;

+            margin-right: 20px;

+            margin-left: auto;

+            background: rgba(0, 0, 0, 0.7);

+            border-radius: 2px;

+          `}

+        >

+          <div>

+            测试文案： 四维时代致力于人工智能三维数字化技术的.

+            研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

+          </div>

+        </div>

+      </TimeLineLabelText>

+    </Viewer>

   );

 }

+ 34 - 8
src/view/Section9.jsx
查看文件 

@@ -1,5 +1,5 @@
 
 import { Action } from "../action";

-// import { css } from "@emotion/react";

+import { css } from "@emotion/react";

 import Viewer from "../components/Viewer";

 

 import { TimeLineLabelText } from "../components/TimeLineText";

@@ -9,12 +9,38 @@ export default function Section8(props) {
 
   const debug = props.debug || false;

   return (

     <Viewer

-    height={"800vh"}

-    name="Dictionary Steadi"

-    path="dictionary-steadi-10fps-873-rev1"

-    frameCount={258}

-    enterTween={Action.crossFadeIn}

-    exitTween={Action.pinForExit}

-  />

+      height={"800vh"}

+      name="Dictionary Steadi"

+      path="dictionary-steadi-10fps-873-rev1"

+      frameCount={258}

+      enterTween={Action.crossFadeIn}

+      exitTween={Action.pinForExit}

+    >

+      <TimeLineLabelText

+        fade={0.01}

+        verticalOffset={"23vh"}

+        duration={0.5}

+        progressPosition={0.09}

+      >

+        <div

+          css={css`

+            font-weight: 300;

+            font-size: 18px;

+            width: 50%;

+            max-width: 600px;

+            padding: 8px 12px;

+            margin-right: 20px;

+            margin-left: auto;

+            background: rgba(0, 0, 0, 0.7);

+            border-radius: 2px;

+          `}

+        >

+          <div>

+            测试文案： 四维时代致力于人工智能三维数字化技术的.

+            研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

+          </div>

+        </div>

+      </TimeLineLabelText>

+    </Viewer>

   );

 }