auto commit at 11/02/2019 Sat

index.html

@@ -31,27 +31,34 @@
     </div>
 
     <style>
-      #img-view {
+      .header-top {
+        position: fixed;
         width: 100%;
         height: 100%;
       }
 
-      #img-view img {
-        width: 100%;
-        height: 100%;
+      #header-top-after {
+        width: 100%
+      }
+
+      .site-content {
+        position: relative;
+        background:coral
       }
     </style>
 
     <div class="header-top">
       <!--index cover image-->
       <figure data="mark" id="cover-img-container">
-        <div data="layer" id="img-view" data-depth="0.2">
+        <div data="layer" id="img-view" data-depth="0.5">
           <img data="cover" id="cover-img" src="https://api.2heng.xin/cover/">
         </div>
       </figure>
       <div class="cover-video-container"></div>
     </div>
 
+    <div id="header-top-after"></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>

src/scss/layouts/index.scss

@@ -5,19 +5,17 @@
  */
 
 .header-container {
-  display: -webkit-flex;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-between
+  // display: -webkit-flex;
+  // display: flex;
+  // flex-flow: column nowrap;
+  // justify-content: space-between
 }
 
 .header-top {
   figure {
     width: 100%;
-    background: tomato;
     margin: 0;
     overflow: hidden;
-
-    
   }
+  
 }

src/ts/index.ts

@@ -8,7 +8,7 @@ import * as components from "./components/index"
 import coverImgIni from "./modules/coverImgIni"
 import headerBarScrollHandler from "./modules/headerBarScrollHandler"
 
-//TODO: rewrite
+//TODO: rewrite call method
 let componentsIni = components
 
 window.onscroll = function () {

src/ts/modules/coverImgIni.ts

@@ -12,25 +12,80 @@ import Parallax from 'parallax-js'
  * Include Parallax box initial and `#cover-img-container` size initial.
  */
 export default function () {
-    let coverImageContainer: HTMLElement = document.querySelector("#cover-img-container")
-    coverImageContainer.style.height = `${window.innerHeight}px`
+    let coverImgContainer = <HTMLElement>document.querySelector("#cover-img-container")
+    coverImgContainer.style.height = `${window.innerHeight}px`
+    let headerTopAfter = <HTMLElement>document.querySelector("#header-top-after")
+    headerTopAfter.style.height = `${window.innerHeight}px`
 
     interface LooseObject {
         [key: string]: any
     }
 
+    /**
+     * cover: `img#cover-img`
+     */
     let coverImg: LooseObject = {}
+    /**
+     * mark: `figure#cover-img-container`
+     */
+    let coverBox: LooseObject = {}
+    /**
+     * layer: `div#img-view`
+     */
     let coverView: LooseObject = {}
 
-    coverImg.e = <HTMLImageElement>document.querySelector("#cover-img") as HTMLImageElement
-    coverImg.w = <number>cover.e.naturalWidth
-    coverImg.h = <number>cover.e.naturalHeight
+    coverImg.e = <HTMLImageElement>document.querySelector("#cover-img")
+    coverImg.w = <number>coverImg.e.naturalWidth
+    coverImg.h = <number>coverImg.e.naturalHeight
 
-    coverView=<HTMLImageElement>document.querySelector("#cover-img") as HTMLImageElement
-    // Parallax view box
-    cover.e.style.height = `${window.innerHeight}px`
+    coverBox.e = <HTMLImageElement>document.querySelector("#cover-img-container")
+    coverBox.w = <number>coverBox.e.offsetWidth
+    coverBox.h = <number>coverBox.e.offsetHeight
 
+    coverView.e = <HTMLImageElement>document.querySelector("#img-view")
 
+    coverBox.e.style.height = `${window.innerHeight}px`
+
+    coverBox.f = (coverBox.w >= 1000 || coverBox.h >= 1000) ? 1000 : 500
+    if (coverBox.w >= coverBox.h) {
+        coverBox.i = coverBox.w / coverBox.f * 50;
+        coverBox.y = coverBox.i;
+        coverBox.x = coverBox.i * coverBox.w / coverBox.h;
+    } else {
+        coverBox.i = coverBox.h / coverBox.f * 50;
+        coverBox.x = coverBox.i;
+        coverBox.y = coverBox.i * coverBox.h / coverBox.w;
+    }
+
+    coverView.e.style.cssText = `
+        width: ${coverBox.w + coverBox.x}px; 
+        height: ${coverBox.h + coverBox.y}px; 
+        margin-left: ${-0.5 * coverBox.x}px; 
+        margin-top: ${-0.5 * coverBox.y}px`
+
+    coverImg.e.style.cssText = `
+        width: ${coverView.w + coverView.x}px;
+        height: ${coverView.h + coverView.y}px`
+
+    if (!coverImg.w) {
+        coverImg.w = coverImg.e.offsetWidth
+        coverImg.h = coverImg.e.offsetHeight;
+    }
+
+    coverImg._w = coverImg.e.parentElement.offsetWidth
+    coverImg._h = coverImg.e.parentElement.offsetHeight
+    coverImg.ratio = coverImg.h / coverImg.w
+
+    if (coverImg._h / coverImg._w > coverImg.ratio) {
+        coverImg.e.style.height = coverImg._h + 'px';
+        coverImg.e.style.width = coverImg._h / coverImg.ratio + 'px';
+    } else {
+        coverImg.e.style.width = coverImg._w + 'px';
+        coverImg.e.style.height = coverImg._w * coverImg.ratio + 'px';
+    }
+
+    coverImg.e.style.left = (coverImg._w - parseInt(coverImg.e.style.width)) / 2 + 'px';
+    coverImg.e.style.top = (coverImg._h - parseInt(coverImg.e.style.height)) / 2 + 'px';
 
     let scene = document.querySelector('#cover-img-container')
     let parallaxInstance = new Parallax(scene);

src/ts/modules/mquery/index.d.ts

@@ -0,0 +1 @@
+export function css(): void

src/ts/modules/mquery/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @description You might not need jQuery, mQuery could be better!
+ * @author Mashiro
+ * @since 19/11/2
+ * @license MIT
+ */
+