Skip to content

Commit 983b44d

Browse files
paulpflugpaulpflug
committed
first commit
0 parents  commit 983b44d

File tree

12 files changed

+301
-0
lines changed

12 files changed

+301
-0
lines changed

‎.gitignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
node_modules
2+
*.sublime-project
3+
*.sublime-workspace
4+
npm-debug.log
5+
build/bundle.js
6+
dev/index.js
7+
static
8+
*.js

‎.npmignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
*.sublime-project
3+
*.sublime-workspace
4+
npm-debug.log
5+
dev/index.js
6+
static

‎README.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# vue-parallax
2+
3+
Scrolls a image slower than the window to create a neat optical effect.
4+
5+
### [Demo](https://vue-comps.github.io/vue-parallax)
6+
7+
8+
# Install
9+
10+
```sh
11+
npm install --save-dev vue-parallax
12+
```
13+
or include `build/bundle.js`.
14+
15+
## Usage
16+
```coffee
17+
# in your component
18+
components:
19+
"parallax": require("vue-parallax")
20+
# or, when using bundle.js
21+
components:
22+
"parallax": window.vueComps.parallax
23+
```
24+
```html
25+
<parallax src="path/to/img">
26+
</parallax>
27+
```
28+
29+
For examples see [`dev/`](dev/).
30+
31+
#### Props
32+
| Name | type | default | description |
33+
| ---:| --- | ---| --- |
34+
| src | String | - | (required) path to image |
35+
| height | Number | 500 | height of the parallax element |
36+
| speed | Number | 0.8 | 0 doesn't scroll the image, 1 scrolls through the whole image |
37+
38+
39+
# Development
40+
Clone repository.
41+
```sh
42+
npm install
43+
npm run dev
44+
```
45+
Browse to `http://localhost:8080/`.
46+
47+
## License
48+
Copyright (c) 2016 Paul Pflugradt
49+
Licensed under the MIT license.

‎build/common.coffee

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
window.vueComps ?= {}
2+
window.vueComps.parallax = require('../parallax.js')

‎build/webpack.config.coffee

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
webpack = require "webpack"
2+
3+
module.exports =
4+
entry: "./build/common.coffee"
5+
output:
6+
filename: "bundle.js"
7+
path: __dirname
8+
module:
9+
loaders: [
10+
{ test: /\.coffee$/, loader: "coffee"}
11+
]
12+
plugins: [
13+
new webpack.optimize.UglifyJsPlugin compress: warnings: false
14+
new webpack.optimize.OccurenceOrderPlugin()
15+
]

‎dev/basic.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template lang="jade">
2+
parallax(src="parallax1.jpg")
3+
.parallax-between
4+
a(href="https://github.com/vue-comps/vue-parallax/blob/master/dev/basic.vue") source
5+
parallax(src="parallax2.jpg")
6+
.parallax-between
7+
.parallax-between
8+
</template>
9+
10+
<script lang="coffee">
11+
module.exports =
12+
components:
13+
"parallax": require "../src/parallax.vue"
14+
</script>
15+
16+
<style lang="stylus">
17+
.parallax-between
18+
height: 500px
19+
> a
20+
position relative
21+
left 250px
22+
top 40px
23+
</style>

‎dev/parallax1.jpg

200 KB
Loading

‎dev/parallax2.jpg

149 KB
Loading

‎karma.conf.coffee

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
module.exports = (config) ->
2+
config.set
3+
preprocessors:
4+
"**/*.coffee": ["webpack",'sourcemap']
5+
webpack:
6+
devtool: 'inline-source-map'
7+
resolve:
8+
extensions: ["",".js",".coffee",".vue"]
9+
module:
10+
loaders: [
11+
{ test: /\.coffee$/, loader: "coffee-loader" }
12+
{ test: /\.vue$/, loader: "vue-loader" }
13+
{ test: /\.html$/, loader: "html"}
14+
{ test: /\.css$/, loader: "style-loader!css-loader" }
15+
]
16+
webpackMiddleware:
17+
noInfo: true
18+
files: ["test/*.coffee"]
19+
frameworks: ["mocha","chai-dom","chai-spies","chai","vue-component"]
20+
plugins: [
21+
require("karma-chai")
22+
require("karma-chai-dom")
23+
require("karma-chrome-launcher")
24+
require("karma-firefox-launcher")
25+
require("karma-mocha")
26+
require("karma-webpack")
27+
require("karma-sourcemap-loader")
28+
require("karma-spec-reporter")
29+
require("karma-chai-spies")
30+
require("karma-vue-component")
31+
]
32+
browsers: ["Chrome","Firefox"]

‎package.json

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{
2+
"name": "vue-parallax",
3+
"description": "Scrolls a image slower than the window to create a neat optical effect",
4+
"version": "0.0.0",
5+
"homepage": "https://github.com/vue-comps",
6+
"author": {
7+
"name": "Paul Pflugradt",
8+
"email": "paul.pflugradt@gmail.com"
9+
},
10+
"license": "MIT",
11+
"main": "parallax.js",
12+
"repository": {
13+
"type": "git",
14+
"url": "git://github.com/vue-comps/vue-parallax"
15+
},
16+
"engines": {
17+
"node": "*"
18+
},
19+
"dependencies": {
20+
"vue-mixins": "^0.2.5"
21+
},
22+
"devDependencies": {
23+
"babel-core": "^6.7.6",
24+
"babel-loader": "^6.2.4",
25+
"babel-plugin-transform-runtime": "^6.7.5",
26+
"babel-preset-es2015": "^6.6.0",
27+
"babel-runtime": "^5.8.34",
28+
"chai": "^3.5.0",
29+
"chai-spies": "^0.7.1",
30+
"coffee-loader": "^0.7.2",
31+
"coffee-script": "^1.10.0",
32+
"css-loader": "^0.23.1",
33+
"gh-pages": "^0.11.0",
34+
"jade": "^1.11.0",
35+
"karma": "^0.13.22",
36+
"karma-chai": "^0.1.0",
37+
"karma-chai-dom": "^1.1.0",
38+
"karma-chai-spies": "^0.1.4",
39+
"karma-chrome-launcher": "^0.2.3",
40+
"karma-firefox-launcher": "^0.1.7",
41+
"karma-mocha": "^0.2.2",
42+
"karma-sourcemap-loader": "^0.3.7",
43+
"karma-spec-reporter": "^0.0.26",
44+
"karma-vue-component": "^0.1.0",
45+
"karma-webpack": "^1.7.0",
46+
"mocha": "^2.4.5",
47+
"parse5": "^2.1.5",
48+
"script-runner": "^0.1.4",
49+
"style-loader": "^0.13.1",
50+
"stylus-loader": "^2.0.0",
51+
"template-html-loader": "0.0.3",
52+
"vue": "^1.0.21",
53+
"vue-compiler": "^0.1.0",
54+
"vue-dev-server": "^0.2.10",
55+
"vue-hot-reload-api": "^1.3.2",
56+
"vue-html-loader": "^1.2.2",
57+
"vue-loader": "^8.2.2",
58+
"vue-style-loader": "^1.0.0",
59+
"vueify-insert-css": "^1.0.0",
60+
"webpack": "^1.12.15"
61+
},
62+
"keywords": [
63+
"parallax",
64+
"component",
65+
"vue"
66+
],
67+
"readmeFilename": "README.md",
68+
"scripts": {
69+
"build:vue": "NODE_ENV=production vue-compiler --out . src/*.vue",
70+
"build:webpack": "webpack --config build/webpack.config.coffee",
71+
"build": "run-npm build:*",
72+
"dev": "vue-dev-server",
73+
"watch": "karma start --browsers Chrome --auto-watch --reporters spec",
74+
"test": "karma start --single-run",
75+
"preversion": "npm test",
76+
"version": "npm run build && git add .",
77+
"postversion": "git push && git push --tags && npm publish",
78+
"ghpages": "vue-dev-server --static static/ && gh-pages -d static"
79+
}
80+
}

0 commit comments

Comments
 (0)