about me

README.md

@@ -46,7 +46,7 @@
 
 ```bash
 $ npm i --d # 安装依赖包
-$ npm run dev # 启动服务
+$ npm start # 启动开发服务
 ```
 
 ## 部署

gulpfile.js

@@ -1,6 +1,7 @@
 // 使用 gulp 将 src/view 中的 pug copy 到 dist 目录中
 // 只用与开发环境，因为发生产在打包的时候直接 copy view 到 dist 就可以了，只有开发环境需要 watch 变动
 
+const path = require('path')
 const gulp = require('gulp')
 const watch = require('gulp-watch')
 const webpack = require('webpack')
@@ -25,6 +26,13 @@ var createWebpackEntry = () => {
   }
 }
 
+function resolve (dir) {
+  return path.join(__dirname, dir)
+}
+function resolveNodeModules () {
+  return path.join(__dirname, path.join.apply(path, arguments))
+}
+
 var webpackConfig = {
   watch: false,
   // devtool: '#cheap-module-eval-source-map',
@@ -37,7 +45,17 @@ var webpackConfig = {
     // chunkFilename: '[name].[chunkHash:7].js'
   },
   resolve: {
-    extensions: ['.ts', '.js']
+    extensions: ['.ts', '.js'],
+    alias: {
+      // sb 的 scrollmagic 和 gsap 包管理
+      'TweenLite': resolveNodeModules('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
+      'TweenMax': resolveNodeModules('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
+      'TimelineLite': resolveNodeModules('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
+      'TimelineMax': resolveNodeModules('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
+      'ScrollMagic': resolveNodeModules('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
+      'scrollmagic.animation.gsap': resolveNodeModules('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
+      'debug.addIndicators': resolveNodeModules('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'),
+    }
   },
   module: {
     rules: [

package.json

@@ -9,7 +9,7 @@
   "author": "linkFly6@live.com",
   "license": "GPL",
   "scripts": {
-    "dev": "npm run build:dev && npm run watch",
+    "start": "npm run build:dev && npm run watch",
     "build:dev": "npm run build-ts && npm run tslint && npm run build-stylus",
     "build": "npm run build-ts:production && npm run build-ts:client-js && npm run tslint && npm run build-stylus",
     "serve": "nodemon dist/server.js",
@@ -61,8 +61,8 @@
     "redirect-https": "^1.1.5",
     "reflect-metadata": "^0.1.10",
     "request": "^2.78.0",
+    "scrollmagic": "^2.0.5",
     "shortid": "^2.2.8",
-    "skrollr": "^0.6.26",
     "spdy": "^3.4.7",
     "transliteration": "^1.6.2"
   },
@@ -107,11 +107,13 @@
     "colors": "^1.1.2",
     "concurrently": "^3.4.0",
     "fancy-log": "^1.3.2",
+    "gsap": "^2.0.1",
     "gulp": "^3.9.1",
     "gulp-watch": "^5.0.0",
     "nodemon": "^1.11.0",
     "plugin-error": "^1.0.1",
     "shelljs": "^0.7.7",
+    "skrollr": "^0.6.26",
     "stylus": "^0.54.5",
     "supertest": "^2.0.1",
     "ts-loader": "^3.5.0",

src/public/css/home/about.styl

@@ -33,14 +33,17 @@ font-code()
       width 100%
       text-align center
       z-index 1
-      position fixed
+      // position fixed
       height $contentHeight
       .bg
         padding 0
         margin 0
         height 100%
         background no-repeat center bottom
         background-size 1808px 1827px
+        // will change 大法好
+        will-change transform
+        transform translate(0px, 0px)
         @media only screen and (min-width: 1442px)
           background-size 2560px 2587px
       .content
@@ -65,6 +68,7 @@ font-code()
               font-size 5rem
               line-height 5rem
               position relative
+              opacity 0
             .ting
               animation ting-left 2s 1s
               animation-fill-mode forwards
@@ -155,7 +159,7 @@ font-code()
       // 动画结束后的状态
       &.animation-complete
         opacity 1
-        transform translateY(0)
+        transform none!important
     .text-des
       font-size 1.214rem
       line-height 1.8
@@ -180,9 +184,12 @@ font-code()
         0%
           opacity 0
           transform translateY(3rem)
-        100%
-          opacity 1
-          transform translateY(0)
+          99%
+            opacity 1
+            transform translateY(0)
+          100%
+            opacity 1
+            transform none!important
     .content
       &.fade-in-up
         animation up 1s cubic-bezier(0.77, 0, 0.175, 1) 1s
@@ -191,9 +198,12 @@ font-code()
           0%
             opacity 0
             transform translateY(3rem)
-          100%
+          99%
             opacity 1
             transform translateY(0)
+          100%
+            opacity 1
+            transform none!important
 /*
   第二个内容快
 */
@@ -212,6 +222,7 @@ font-code()
       padding 2rem
       line-height 2
       position absolute
+      width 825px
       right 0
       top 0
       // 动画结束后的状态