Merge branch 'develop'

* develop:
  💎 Release new version 1.0.3
  Change section to div
  ⬆️ Update dependency

Author: apertureless

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-parallaxy",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Vue 2 component for parallax scrolling effects",
   "author": "Jakub Juszczak <[email protected]>",
   "license": "MIT",
@@ -34,43 +34,45 @@
     "prepublish": "yarn run lint && yarn run build"
   },
   "devDependencies": {
-    "@nextindex/next-scss": "^1.0.7",
+    "@nextindex/next-scss": "^1.1.0",
     "autoprefixer": "^6.7.7",
-    "babel-core": "^6.24.0",
-    "babel-eslint": "^7.2.1",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.2",
     "babel-loader": "^6.4.1",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.24.0",
-    "babel-preset-stage-2": "^6.22.0",
-    "babel-register": "^6.24.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "babel-register": "^6.24.1",
     "chai": "^3.5.0",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.1.0",
     "css-loader": "^0.28.0",
-    "eslint": "^3.18.0",
-    "eslint-config-standard": "^7.1.0",
+    "eslint": "^3.19.0",
+    "eslint-config-standard": "^10.2.0",
     "eslint-friendly-formatter": "^2.0.7",
-    "eslint-loader": "^1.7.0",
+    "eslint-loader": "^1.7.1",
     "eslint-plugin-html": "^2.0.1",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-node": "^4.2.2",
     "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-standard": "^2.1.1",
+    "eslint-plugin-standard": "^3.0.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.15.2",
     "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.10.1",
+    "file-loader": "^0.11.1",
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.4",
     "inject-loader": "^3.0.0",
     "isparta-loader": "^2.0.0",
     "json-loader": "^0.5.4",
-    "karma": "^1.5.0",
+    "karma": "^1.6.0",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.2.0",
     "karma-phantomjs-launcher": "^1.0.4",
-    "karma-sinon-chai": "^1.2.0",
+    "karma-sinon-chai": "^1.3.1",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "^0.0.30",
+    "karma-spec-reporter": "^0.0.31",
     "karma-webpack": "^1.7.0",
     "lolex": "^1.6.0",
     "mocha": "^3.1.0",
@@ -84,10 +86,10 @@
     "sinon": "^2.1.0",
     "sinon-chai": "^2.9.0",
     "url-loader": "^0.5.8",
-    "vue": "^2.2.6",
-    "vue-loader": "^11.3.4",
-    "vue-style-loader": "^2.0.5",
-    "vue-template-compiler": "^2.2.6",
+    "vue": "^2.3.2",
+    "vue-loader": "^12.0.3",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.3.2",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.10.1",
     "webpack-hot-middleware": "^2.17.1",

src/components/Parallax.vue

@@ -1,12 +1,12 @@
 <template>
-  <section v-bind:class="[sectionClass]" ref="block" v-bind:style="{ height: sectionHeight + 'vh' }">
+  <div v-bind:class="[sectionClass]" ref="block" v-bind:style="{ height: sectionHeight + 'vh' }">
     <div
       v-bind:class="[parallax ? parallaxClass : '', fixed ? fixedClass : '', containerClass]"
       ref="parallax"
       >
       <slot></slot>
     </div>
-  </section>
+  </div>
 </template>
 
 <script>
@@ -48,6 +48,10 @@
       fixedClass: {
         type: String,
         default: 'is-fixed'
+      },
+      direction: {
+        type: String,
+        default: 'up'
       }
     },
 
@@ -80,7 +84,7 @@
         let animationValue = (window.pageYOffset * this.speedFactor)
 
         if (animationValue <= availableOffset && animationValue >= 0) {
-          this.el.style.transform = `translate3d(0, ${animationValue * -1}px ,0)`
+          this.el.style.transform = `translate3d(0, ${animationValue * 1}px ,0)`
         }
       },
 
@@ -117,6 +121,12 @@
           this.setupListener()
         }
       }
+    },
+
+    computed: {
+      directionValue () {
+        return this.direction === 'down' ? +1 : -1
+      }
     }
   }
 </script>
@@ -144,7 +154,7 @@
       height: 100%;
       max-width: none;
       width: 100%;
-      @include object-fit(cover, bottom);
+      @include object-fit(cover, top);
     }
 
     &.is-parallax {
@@ -158,7 +168,7 @@
         height: 100%;
         max-width: none;
         width: 100%;
-        @include object-fit(cover, bottom);
+        @include object-fit(cover, top);
       }
     }