├── .gitignore
├── .npmignore
├── README.md
├── build
    ├── common.coffee
    └── webpack.config.coffee
├── dev
    └── basic.vue
├── karma.conf.coffee
├── package.json
├── src
    └── parallax.vue
└── test
    └── parallax.coffee


/.gitignore:
--------------------------------------------------------------------------------
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
9 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.sublime-project
3 | *.sublime-workspace
4 | npm-debug.log
5 | dev/index.js
6 | static
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 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 | // vue@1.0
13 | npm install --save-dev vue-parallax@1
14 | ```
15 | or include `build/bundle.js`.
16 | 
17 | ## Usage
18 | ```coffee
19 | # in your component
20 | components:
21 |   "parallax": require("vue-parallax")
22 | # or, when using bundle.js
23 | components:
24 |   "parallax": window.vueComps.parallax
25 | ```
26 | ```html
27 | <parallax src="path/to/img">
28 |   <div slot="loading">loading...</div>
29 |   <div>content</div>
30 | </parallax>
31 | ```
32 | content will be shown after loading
33 | 
34 | For examples see [`dev/`](dev/).
35 | 
36 | ### ERROR: Module build failed: SyntaxError: 'with' in strict mode
37 | Currently [buble](https://gitlab.com/Rich-Harris/buble) is injecting `strict` mode in all processed js files. The down to ES5 compiled component contains `with`, which is forbidden in `strict` mode.
38 | Buble is used, for example, in rollup, which is used in laravel.
39 | 
40 | If you are running in this problem, make sure to exclude this component from processing with buble.
41 | 
42 | #### Webpack
43 | If your assets are organized by webpack, this should work:
44 | ```html
45 | <parallax src=require('../assets/your-image.jpg')></parallax>
46 | ```
47 | 
48 | #### Props
49 | Name | type | default | description
50 | ---:| --- | ---| ---
51 | src | String | - | (required) path to image
52 | height | Number | 500 | height of the parallax element
53 | speed | Number | 0.2 | 0.0 means the image will appear fixed in place, and 1.0 the image will flow at the same speed as the page content.
54 | 
55 | #### Events
56 | Name |  description
57 | ---:| --- | ---| ---
58 | image-loaded |  will be called when the image is loaded
59 | loaded |  will be called when the first calculation - after a image is loaded - is finished
60 | 
61 | ## Changelog
62 | - 2.1.3  
63 | bugfix in portrait mode  
64 | 
65 | - 2.1.2  
66 | now working on devices in portrait mode
67 | 
68 | - 2.1.1  
69 | bugfix  
70 | 
71 | - 2.1.0  
72 | changed way the picture moves, now in line with other parallax implementations  
73 | 
74 | - 2.0.0  
75 | now compatible with vue 2.0.0  
76 | 
77 | - 1.0.0  
78 | some cleaning  
79 | added unit tests  
80 | now working with firefox  
81 | 
82 | # Development
83 | Clone repository.
84 | ```sh
85 | npm install
86 | npm run dev
87 | ```
88 | Browse to `http://localhost:8080/`.
89 | 
90 | ## License
91 | Copyright (c) 2016 Paul Pflugradt
92 | Licensed under the MIT license.
93 | 


--------------------------------------------------------------------------------
/build/common.coffee:
--------------------------------------------------------------------------------
1 | window.vueComps ?= {}
2 | window.vueComps.parallax = require('../parallax.js')
3 | 


--------------------------------------------------------------------------------
/build/webpack.config.coffee:
--------------------------------------------------------------------------------
 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 |   ]
16 | 


--------------------------------------------------------------------------------
/dev/basic.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 | div
 3 |   .parallax-between(style="height:500px")
 4 |   parallax(src="http://materializecss.com/images/parallax1.jpg" ref="p",:style="style",:speed="speed")
 5 |     .loading(slot="loading") loading...
 6 |   .parallax-between(style="height:500px")
 7 |     span speed 0.8
 8 |     br
 9 |     a(href="https://github.com/vue-comps/vue-parallax/blob/master/dev/basic.vue") source
10 |   parallax(src="http://materializecss.com/images/parallax2.jpg")
11 |     .loading(slot="loading") loading...
12 |   .parallax-between(style="height:500px")
13 |     span speed 0.2
14 |   .parallax-between(style="height:1000px")
15 | </template>
16 | 
17 | <script lang="coffee">
18 | module.exports =
19 |   components:
20 |     "parallax": require "../src/parallax.vue"
21 |   data: ->
22 |     speed: 0.8
23 |     style: {}
24 | </script>
25 | 


--------------------------------------------------------------------------------
/karma.conf.coffee:
--------------------------------------------------------------------------------
 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: ["Chromium","Firefox"]
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-parallax",
 3 |   "description": "Scrolls a image slower than the window to create a neat optical effect",
 4 |   "version": "2.1.3",
 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.3.4"
21 |   },
22 |   "devDependencies": {
23 |     "chai": "^3.5.0",
24 |     "chai-spies": "^0.7.1",
25 |     "coffee-loader": "^0.7.2",
26 |     "coffee-script": "^1.11.1",
27 |     "gh-pages": "^0.11.0",
28 |     "karma": "^1.3.0",
29 |     "karma-chai": "^0.1.0",
30 |     "karma-chai-dom": "^1.1.0",
31 |     "karma-chai-spies": "^0.1.4",
32 |     "karma-chrome-launcher": "^2.0.0",
33 |     "karma-firefox-launcher": "^1.0.0",
34 |     "karma-mocha": "^1.2.0",
35 |     "karma-sourcemap-loader": "^0.3.7",
36 |     "karma-spec-reporter": "^0.0.26",
37 |     "karma-vue-component": "^2.0.1",
38 |     "karma-webpack": "^1.8.0",
39 |     "mocha": "^3.1.2",
40 |     "pug": "^2.0.0-beta6",
41 |     "script-runner": "^0.1.5",
42 |     "vue": "^2.0.2",
43 |     "vue-compiler": "^2.0.0",
44 |     "vue-dev-server": "^2.0.0",
45 |     "vue-html-loader": "^1.2.3",
46 |     "vue-loader": "^9.5.3",
47 |     "webpack": "^1.13.2"
48 |   },
49 |   "keywords": [
50 |     "parallax",
51 |     "component",
52 |     "vue"
53 |   ],
54 |   "readmeFilename": "README.md",
55 |   "scripts": {
56 |     "build:vue": "NODE_ENV=production vue-compiler --out . src/*.vue",
57 |     "build:webpack": "webpack --config build/webpack.config.coffee",
58 |     "build": "run-npm build:*",
59 |     "dev": "vue-dev-server",
60 |     "watch": "karma start --browsers Chromium --auto-watch --reporters spec",
61 |     "test": "karma start --single-run",
62 |     "preversion": "npm test",
63 |     "version": "npm run build && git add .",
64 |     "postversion": "git push && git push --tags && npm publish",
65 |     "ghpages": "vue-dev-server --static static/ && gh-pages -d static"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/parallax.vue:
--------------------------------------------------------------------------------
 1 | // out: ..
 2 | <template lang="pug">
 3 | div(
 4 |   :style="computedStyle",
 5 |   style="position:relative; width: 100%; overflow: hidden;"
 6 |   )
 7 |   img(
 8 |     :src="src",
 9 |     ref="img",
10 |     @load="processSrc",
11 |     style="position:absolute;visibility:hidden"
12 |     )
13 |   slot(
14 |     name="loading",
15 |     v-if="!finished"
16 |     )
17 |   slot(v-if="finished")
18 | </template>
19 | 
20 | <script lang="coffee">
21 | module.exports =
22 |   mixins:[
23 |     require("vue-mixins/onWindowScroll")
24 |     require("vue-mixins/getDocumentHeight")
25 |     require("vue-mixins/getViewportSize")
26 |     require("vue-mixins/onWindowResize")
27 |     require("vue-mixins/style")
28 |   ]
29 | 
30 |   props:
31 |     style:
32 |       default: -> []
33 |     src:
34 |       type: String
35 |       required: true
36 |     height:
37 |       type: Number
38 |       default: 500
39 |     speed:
40 |       type: Number
41 |       default: 0.2
42 | 
43 |   computed:
44 |     mergeStyle: ->
45 |       height: @height+"px"
46 |       backgroundImage: if @finished then "url('#{@src}')" else null
47 |       backgroundPosition: "center " + Math.round( @position * 100 ) / 100 + 'px'
48 |       backgroundSize: "auto " + @backgroundHeight*100 +"%"
49 |     backgroundHeight: ->
50 |       ratio = @imgRatio/@elRatio
51 |       if ratio*@height >= @vpHeight
52 |         @offset = (ratio*@imgHeight-@height)/2
53 |         return ratio
54 |       else
55 |         @offset = 0
56 |         return @vpHeight/@height
57 | 
58 |   data: ->
59 |     offset: 0
60 |     vpHeight: 0
61 |     imgRatio: 1
62 |     elRatio: 1
63 |     vpRatio: 1
64 |     imgHeight: 0
65 |     finished: false
66 |     position: 0
67 | 
68 |   methods:
69 |     processResize: (e) ->
70 |       vpsize = @getViewportSize()
71 |       @vpRatio = vpsize.height / vpsize.width
72 |       @vpHeight = vpsize.height
73 |       @elRatio = @height / @$el.clientWidth
74 |       @processScroll() if e?
75 |     processSrc: ->
76 |       @$emit "image-loaded"
77 |       @finished = false
78 |       @imgHeight = @$refs.img.clientHeight
79 |       @imgRatio = @imgHeight / @$refs.img.clientWidth
80 |       @processScroll()
81 |     processScroll: ->
82 |       rect = @$el.getBoundingClientRect()
83 |       if rect.bottom > 0 and rect.top < @vpHeight # in viewport
84 |         @position = rect.top*(@speed-1) + @offset
85 |         unless @finished
86 |           @$nextTick => @$emit "loaded"
87 |           @finished = true
88 | 
89 |   mounted: ->
90 |     @onWindowScroll @processScroll
91 |     @onWindowResize @processResize
92 |     @$nextTick @processResize
93 | </script>
94 | 


--------------------------------------------------------------------------------
/test/parallax.coffee:
--------------------------------------------------------------------------------
 1 | env = null
 2 | p = null
 3 | scroll = (x,cb) ->
 4 |   window.scrollTo(0,x)
 5 |   window.requestAnimationFrame -> window.requestAnimationFrame cb
 6 | 
 7 | describe "parallax", ->
 8 | 
 9 |   describe "basic env", ->
10 | 
11 |     before ->
12 |       env = loadComp(require("../dev/basic.vue"))
13 |       p = env.$refs.p
14 |       env.style = {width: "1000px"}
15 |     after ->
16 |       #unloadComp(env)
17 | 
18 |     it "should work", (done) ->
19 |       @timeout(5000)
20 |       p.$once "loaded", ->
21 |         p.$el.should.have.attr("style").match /background-image: url/
22 |         top = p.$el.getBoundingClientRect().top
23 |         scroll top, ->
24 |           p.$el.should.have.attr("style").match /background-position/
25 |           style = p.$el.getAttribute("style")
26 |           scroll 200+top, ->
27 |             p.$el.should.have.attr("style").not.equal style
28 |             style = p.$el.getAttribute("style")
29 |             env.speed = 0
30 |             scroll 400+top, ->
31 |               p.$el.should.have.attr("style").not.equal style
32 |               env.speed = 1
33 |               done()
34 | 


--------------------------------------------------------------------------------