commit

5 years ago · 5e09efb551
parent 227c3afe77
commit 5e09efb551
7 changed files with 129 additions and 124 deletions
--- a/NOTES.md
+++ b/NOTES.md
@ -3,6 +3,7 @@
 - [TS handbook](https://typescript.bootcss.com/)
 - [SASS hankbook](https://www.sasscss.com/docs/)
 - [TS 注释规范](https://juejin.im/post/5ce24f8ae51d45106477bd45)
+- [9012年学 TS](https://juejin.im/post/5c68d99bf265da2db4141418)

 ### MDC 
 #### 输入框样式 
@ -30,11 +31,7 @@
 }
 ```

-### Linux 相关
-Ctrl-Z -> `jobs` -> `fg 1`
-
-### col
-```scss
+```html
 <div class="user-info mdc-text-field mdc-text-field--outlined">
  <input type="text" id="tf-outlined" class="mdc-text-field__input">
  <div class="mdc-notched-outline">
@ -49,4 +46,7 @@ Ctrl-Z -> `jobs` -> `fg 1`
 <button class="commit-button mdc-button mdc-button--outlined">
  <span class="mdc-button__label">BuiBuiBui~</span>
 </button>
-```
+```
+
+### Linux
+Ctrl-Z -> `jobs` -> `fg 1`
--- a/index.html
+++ b/index.html
@ -1,46 +1,69 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Sakura v2</title>
-    <link rel="stylesheet" href="./dist/bundle.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  </head>
-  <body>
-    <div id="root"><!--page main content (async container)-->
-      <div class="header-container">
-        <header id="nav-header" class="mdc-top-app-bar mdc-top-app-bar--dense"><!--nav mune-->
-          <div class="mdc-top-app-bar__row">
-            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-              <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
-              <span class="mdc-top-app-bar__title">Title</span>
-            </section>
-            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-              <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Download">file_download</button>
-              <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Print this page">print</button>
-              <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Bookmark this page">bookmark</button>
-            </section>
-          </div>
-        </header>
-      </div>
-
-      <div class="header-top"><!--index cover image-->
-        <figure id="cover-img-container">
-          <img src="https://view.moezx.cc/images/2019/10/17/vector-flying-plane-sunny-blue-sky_79451-230.jpg">
-        </figure>
-        <div class="cover-video-container"></div>
-      </div>
-
-      <div class="site-content">
-        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-
-      </div>

+<head>
+  <title>Sakura v2</title>
+  <link rel="stylesheet" href="./dist/bundle.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+</head>

+<body>
+  <div id="root">
+    <!--page main content (async container)-->
+    <div class="header-container">
+      <header id="nav-header" class="mdc-top-app-bar mdc-top-app-bar--dense">
+        <!--nav mune-->
+        <div class="mdc-top-app-bar__row">
+          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
+            <span class="mdc-top-app-bar__title">Sakura</span>
+          </section>
+          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
+              aria-label="Download">file_download</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
+              aria-label="Print this page">print</button>
+            <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button"
+              aria-label="Bookmark this page">bookmark</button>
+          </section>
+        </div>
+      </header>
    </div>

-    <script src="./dist/bundle.js" async></script>
-  </body>
+    <style>
+      #img-view {
+        width: 100%;
+        height: 100%;
+      }
+
+      #img-view img {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+
+    <div class="header-top">
+      <!--index cover image-->
+      <figure id="cover-img-container">
+        <div id="img-view" data-depth="0.2">
+          <img id="cover-img" src="https://view.moezx.cc/images/2019/10/17/vector-flying-plane-sunny-blue-sky_79451-230.jpg">
+        </div>
+      </figure>
+      <div class="cover-video-container"></div>
+    </div>
+
+    <div class="site-content">
+      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+
+    </div>
+
+
+  </div>
+
+  <script src="./dist/bundle.js" async></script>
+</body>
+
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@ -5692,8 +5692,8 @@
    },
    "parallax-js": {
      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/parallax-js/-/parallax-js-3.1.0.tgz",
-      "integrity": "sha512-UONoPKSQykeNvFcemDPxYYDU/T89LSffoaZAwOMhDp0ABhmFPwthgn2GrfB7An9Qo+8nPZIuQeZsh2pWn1qN3A==",
+      "resolved": "https://registry.npm.taobao.org/parallax-js/download/parallax-js-3.1.0.tgz",
+      "integrity": "sha1-zIpdfdXiUpuUuaNPPUzROiLrBJ4=",
      "requires": {
        "object-assign": "^4.1.1",
        "raf": "^3.3.0"
@ -6099,8 +6099,8 @@
    },
    "raf": {
      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "resolved": "https://registry.npm.taobao.org/raf/download/raf-3.4.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fraf%2Fdownload%2Fraf-3.4.1.tgz",
+      "integrity": "sha1-B0LpmkplUvRF1z4+4DKK8P8e3jk=",
      "requires": {
        "performance-now": "^2.1.0"
      }
--- a/src/scss/layouts/index.scss
+++ b/src/scss/layouts/index.scss
@ -4,18 +4,20 @@
 * @since 19/11/1
 */

- .header-container {
-  display: -webkit-flex; 
+.header-container {
+  display: -webkit-flex;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between
- }
+}

 .header-top {
  figure {
    width: 100%;
-    height: 657px;
    background: tomato;
    margin: 0;
+    overflow: hidden;
+
+    
  }
 }
--- a/src/ts/index.ts
+++ b/src/ts/index.ts
@ -7,20 +7,30 @@
 import * as components from "./components/index"
 //import * as modules from "./modules/index"

-//todo remove to particails
+//TODO: move to ./particails
 let componentsIni = components
 //let modulesIni = modules

 import scrollDirection from "./modules/scrollEvent"

-window.onscroll = function(){
-  //console.log(scrollDirection())
-  if(scrollDirection() == 'down'){
-    (<HTMLElement>document.getElementById("nav-header")).style.top = `-120px`
+window.onscroll = function () {
+  let ele: HTMLElement = document.getElementById("nav-header")
+  if (scrollDirection('y') == 'down') {
+    ele.style.top = `-120px`
  }
-  else if(scrollDirection() == 'up'){
-    (<HTMLElement>document.getElementById("nav-header")).style.top = `0px`
+  else if (scrollDirection('y') == 'up') {
+    ele.style.top = `0px`
  }
 }

-//(<HTMLElement>document.getElementById("img-container")).style.height =  `${window.innerHeight}px`
+let coverImageContainer: HTMLElement = document.getElementById("cover-img-container")
+coverImageContainer.style.height = `${window.innerHeight}px`
+
+import Parallax from 'parallax-js'
+//let scene = document.getElementById('cover-img-container')
+//let parallaxInstance = new Parallax(scene)
+
+let ele: HTMLImageElement = document.getElementById("cover-img") as HTMLImageElement
+let eleW: number = ele.naturalWidth
+console.log(eleW)
+
--- a/src/ts/modules/scrollEvent.ts
+++ b/src/ts/modules/scrollEvent.ts
@ -1,65 +1,34 @@
-let scrollAction = {x: undefined, y: undefined}, scrollDirection
-
-export default function () {
-  if (typeof scrollAction.x == 'undefined') {
-      scrollAction.x = window.pageXOffset
-      scrollAction.y = window.pageYOffset
-  }
-  let diffX = scrollAction.x - window.pageXOffset
-  let diffY = scrollAction.y - window.pageYOffset
-  if (diffX < 0) {
-      // Scroll right
-      scrollDirection = 'right'
-  } else if (diffX > 0) {
-      // Scroll left
-      scrollDirection = 'left'
-  } else if (diffY < 0) {
-      // Scroll down
-      scrollDirection = 'down'
-  } else if (diffY > 0) {
-      // Scroll up
-      scrollDirection = 'up'
-  } else {
-      // First scroll event
-  }
-  scrollAction.x = window.pageXOffset
-  scrollAction.y = window.pageYOffset
-  return scrollDirection
+let scrollAction: {
+    x: number,
+    y: number,
+    d: string
+} = {
+    x: undefined,
+    y: undefined,
+    d: undefined
 }

-// export class scrollDirection {
-//   scrollActionX: any
-//   scrollActionY: any
-//   scrollDirection: string
-//   constructor() {
-//       this.scrollActionX = undefined
-//       this.scrollActionY = undefined
-//   }
-//   scrollDrictionX() {
-//     if (typeof this.scrollActionX == 'undefined') {
-//       this.scrollActionX = window.pageXOffset
-//     }
-//     if (this.scrollActionX > window.pageXOffset) {
-//         // Scroll right
-//         this.scrollDirection = 'right'
-//     } else {
-//         // Scroll left
-//         this.scrollDirection = 'left'
-//     }
-//     this.scrollActionX = window.pageXOffset
-//     return this.scrollDirection
-//   }
-//   scrollDrictionY() {
-//     if (typeof this.scrollActionY == 'undefined') {
-//       this.scrollActionY = window.pageYOffset
-//     }
-//     if (this.scrollActionY > window.pageYOffset) {
-//         // Scroll right
-//         this.scrollDirection = 'down'
-//     } else {
-//         // Scroll left
-//         this. scrollDirection = 'up'
-//     }
-//     this.scrollActionY = window.pageYOffset
-//   }
-// }
+export default function (direction: string) {
+    if (scrollAction.x == undefined) {
+        scrollAction.x = window.pageXOffset
+        scrollAction.y = window.pageYOffset
+    }
+    let diffX = scrollAction.x - window.pageXOffset
+    let diffY = scrollAction.y - window.pageYOffset
+    if (direction == 'x' || direction == 'X' ) {
+        if (diffX < 0) {
+            scrollAction.d = 'right'
+        } else if (diffX > 0) {
+            scrollAction.d = 'left'
+        }
+    } else {
+        if (diffY < 0) {
+            scrollAction.d = 'down'
+        } else if (diffY > 0) {
+            scrollAction.d = 'up'
+        }
+    }
+    scrollAction.x = window.pageXOffset
+    scrollAction.y = window.pageYOffset
+    return scrollAction.d
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -2,6 +2,7 @@
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
+    "lib": ["es5", "es6", "dom"],
    //"noImplicitAny": true,
    "alwaysStrict": true,
    "allowSyntheticDefaultImports": true,