├── .gitignore
├── paraxify.css
├── _paraxify.scss
├── paraxify.min.js
├── README.md
├── paraxify.js
└── paraxify.coffee


/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | *.codekit
3 | *.sass-cache


--------------------------------------------------------------------------------
/paraxify.css:
--------------------------------------------------------------------------------
1 | .paraxify {
2 |   background-attachment: fixed;
3 |   background-position: center center;
4 |   background-size: cover;
5 | }
6 | 


--------------------------------------------------------------------------------
/_paraxify.scss:
--------------------------------------------------------------------------------
1 | .paraxify,
2 | %paraxify {
3 | 	background-attachment: fixed;
4 | 	background-position: center center;
5 | 	background-size: cover;
6 | }


--------------------------------------------------------------------------------
/paraxify.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t,i){"use strict";var o;o=function(i,o){var s,n,r,h,f,g,c;return g=0,c=0,r=0,h={},f=[],n=0,s=function(t,i){this.options={speed:1,boost:0};for(r in i)this.options[r]=i[r];if((this.options.speed<0||this.options.speed>1)&&(this.options.speed=1),t||(t="paraxify"),e.getElementsByClassName(t.replace(".","")))this.photos=e.getElementsByClassName(t.replace(".",""));else{if(e.querySelector(t)===!1)throw new Error("The elements you're trying to select don't exist.");this.photos=querySelector(t)}h=this.options,f=this.photos,this._init(this)},s.prototype={update:function(){for(c=t.innerHeight,r=0;r<f.length;)f[r].style.backgroundPosition="center center",f[r].url=t.getComputedStyle(f[r],!1).backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi,"$2").split(",")[0],f[r].img||(f[r].img=new Image),f[r].url!==f[r].img.src&&(this._check(r),f[r].img.src=f[r].url),r++;this._animate()},_init:function(){this.update(),t.onscroll=function(){this._animate()}.bind(this),t.onresize=function(){this.update()}.bind(this)},_check:function(e){var i,o;o=f[e],o.ok=!0,o.bgSize=t.getComputedStyle(o,!1).backgroundSize,i=c,f[e].img.onload=function(){if(""===o.bgSize||"auto"===o.bgSize){if(this.height<o.offsetHeight)throw o.ok=!1,new Error("The image "+o.url+" ("+this.height+"px) is too short for that container ("+o.offsetHeight+"px).");i=this.height,this.height<c&&(i+=(c-o.offsetHeight)*h.speed)}else if("cover"===o.bgSize){if(c<o.offsetHeight)throw o.ok=!1,new Error("The container ("+o.offsetHeight+"px) can't be bigger than the image ("+c+"px).")}else"cover"===t.getComputedStyle(o,!1).backgroundSize,this._check(e);o.diff=-(i-o.offsetHeight)*h.speed,o.diff=o.diff-o.offsetHeight*h.boost}},_visible:function(e){return g+c>f[e].offsetTop&&g<f[e].offsetTop+f[e].offsetHeight?!0:!1},_animate:function(){var i,o;for(g=void 0!==t.pageYOffset?t.pageYOffset:(e.documentElement||e.body.parentNode||e.body).scrollTop,r=0;r<f.length;)this._check(r),f[r].ok&&"fixed"===t.getComputedStyle(f[r],!1).backgroundAttachment&&this._visible(r)?(i=(g-f[r].offsetTop+c)/(f[r].offsetHeight+c),o=f[r].diff*(i-.5),"cover"!==f[r].bgSize&&(o+=(c-f[r].img.height)/2),o=Math.round(100*o)/100):o="center",f[r].style.backgroundPosition="center "+o+"px",r++}},new s(i,o)},t.paraxify=o}(document,window,0);


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [Paraxify.js](http://jaicab.github.io/Paraxify.js)
 2 | 
 3 | Simple lightweight parallax plugin (around **2kb gzipped**) built with Vanilla JS and CSS3 inspired by Spotify's website parallax effect. 
 4 | 
 5 | It's been thought as a **progressive enhancing** plugin, so don't expect it to work exactly the same on all browsers, but it does work in all of them, in one way or another.
 6 | 
 7 | I built this plugin because I couldn't find any other non-jquery plugins that fit my needs. 
 8 | 
 9 | 
10 | ## How does it work?
11 | 
12 | - Start with a centered background image **bigger** than the element it's been set on.
13 | - Add the paraxify class to the elements that you want to paraxify.
14 | 
15 | ```css
16 | .paraxify{
17 |   background-attachment: fixed;
18 |   background-position: center center;
19 |   background-size: cover;
20 | }
21 | ```
22 | 
23 | - Now just start the JavaScript part:
24 | 
25 | ```javascript
26 | myParaxify = paraxify('.paraxify');
27 | ```
28 | 
29 | - Ready to go! You should see the background images parallaxing.
30 | 
31 | IMPORTANT: Parallax and touch devices usually don't get along. So I highly suggest you to use [modernizr's](http://modernizr.com/download/) touch events. For example:
32 | 
33 | ```javascript
34 | if(!Modernizr.touch){
35 | 	myParaxify = paraxify('.paraxify');
36 | }
37 | ```
38 | 
39 | As long as the background is `fixed`, the images will scroll all the hidden part accordingly to the scroll position. This way **you can control** when it's active or not just switching the `background-attachment` property on CSS to `scroll`.
40 | 
41 | I wanted the background to be fixed so it creates a nice pure CSS parallax effect in case the JavaScript is not supported or disabled in the browser. I had performance in mind when I built this plugin, so **only the visibe photos are scrolled**.
42 | 
43 | ## Advanced use
44 | You can set any other selector actually. The `paraxify` function has two parameters:
45 | 	
46 | 	var myParaxify = paraxify('selector', {
47 | 		speed: 1,
48 | 		boost: 0
49 | 	});
50 | 
51 | On `selector` you can set any selector, but a class is more retro-compatible. Also, you can set a speed from 0 to 1. The lower the speed, the less distance the background is gonna move. This speed is always proportional to the difference between the image's height and the element's.
52 | 
53 | The speed is determined by the difference between the element's height and the image's. However, you can slow it down or boost it up using the options' array avalible:
54 | 
55 | - `speed` (float, 0 to 1, 1 by default): It's proportional to the hidden part of the image.
56 | 	- 0: It would be completely stopped.
57 | 	- 1: It would scroll all the hidden part of the background image.
58 | - `boost` (float, 0 to 1, 0 by default): Boost uses the visible part of the image to speed the scroll speed a bit.
59 | 	- 0: There wouldn't be a boost.
60 | 	- 1: It would scroll all the visible part of the background image.
61 | 
62 | So **by default** it scrolls all the hidden part but none of the visible.
63 | 
64 | At last but not least, you can access all the background info that paraxify calculates on real time. Type this in your console and you'll see:
65 | 
66 | 	myParaxify.photos
67 | 
68 | 
69 | ## TODO
70 | 
71 | - [I'M ON IT] Option to scroll horizontally as well as vertically.
72 | - [HOLD] Fix buggy behaviour on +IE9: The scrolling is not smooth.
73 | - [HOLD] Try debouncing scroll event so it doesn't launch a bizillion times per second.
74 | 
75 | ## Contributing
76 | 
77 | Please, feel free to fork the project and modify it as you wish. Just try to keep it __light and working__. Send me a pull request and I'll review it as soon as possible. Any new feature is welcome aboard.
78 | 
79 | If you feel like discussing a new feature or you've found a bug, open an issue or contact me on twitter ([@jaicab_](http://twitter.com/jaicab_)) so we can talk about it.
80 | 
81 | 
82 | ## MIT License
83 | Paraxify has been coded from scratch by [Jaime Caballero](http://jaicab.com) and it's licensed under **MIT License**.


--------------------------------------------------------------------------------
/paraxify.js:
--------------------------------------------------------------------------------
  1 | // Generated by CoffeeScript 1.7.1
  2 | 
  3 | /*
  4 |  Paraxify.js - v0.1
  5 |  @author Jaime Caballero
  6 |  MIT license
  7 |  */
  8 | (function(document, window, index) {
  9 |   "use strict";
 10 |   var paraxify;
 11 |   paraxify = function(el, options) {
 12 |     var Paraxify, contador, i, opt, pho, posY, screenY;
 13 |     posY = 0;
 14 |     screenY = 0;
 15 |     i = 0;
 16 |     opt = {};
 17 |     pho = [];
 18 |     contador = 0;
 19 |     Paraxify = function(el, options) {
 20 |       this.options = {
 21 |         speed: 1,
 22 |         boost: 0
 23 |       };
 24 |       for (i in options) {
 25 |         this.options[i] = options[i];
 26 |       }
 27 |       if (this.options.speed < 0 || this.options.speed > 1) {
 28 |         this.options.speed = 1;
 29 |       }
 30 |       if (!el) {
 31 |         el = 'paraxify';
 32 |       }
 33 |       if (document.getElementsByClassName(el.replace('.', ''))) {
 34 |         this.photos = document.getElementsByClassName(el.replace('.', ''));
 35 |       } else if (document.querySelector(el) !== false) {
 36 |         this.photos = querySelector(el);
 37 |       } else {
 38 |         throw new Error("The elements you're trying to select don't exist.");
 39 |       }
 40 |       opt = this.options;
 41 |       pho = this.photos;
 42 |       this._init(this);
 43 |     };
 44 |     Paraxify.prototype = {
 45 |       update: function() {
 46 |         screenY = window.innerHeight;
 47 |         i = 0;
 48 |         while (i < pho.length) {
 49 |           pho[i].style.backgroundPosition = "center center";
 50 |           pho[i].url = window.getComputedStyle(pho[i], false).backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
 51 |           if (!pho[i].img) {
 52 |             pho[i].img = new Image();
 53 |           }
 54 |           if (pho[i].url !== pho[i].img.src) {
 55 |             this._check(i);
 56 |             pho[i].img.src = pho[i].url;
 57 |           }
 58 |           i++;
 59 |         }
 60 |         this._animate();
 61 |       },
 62 |       _init: function() {
 63 |         this.update();
 64 |         window.onscroll = (function() {
 65 |           this._animate();
 66 |         }).bind(this);
 67 |         window.onresize = (function() {
 68 |           this.update();
 69 |         }).bind(this);
 70 |       },
 71 |       _check: function(i) {
 72 |         var actualHeight, main;
 73 |         main = pho[i];
 74 |         main.ok = true;
 75 |         main.bgSize = window.getComputedStyle(main, false).backgroundSize;
 76 |         actualHeight = screenY;
 77 |         var that = this;
 78 |         pho[i].img.onload = function() {
 79 |           if (main.bgSize === '' || main.bgSize === 'auto') {
 80 |             if (this.height < main.offsetHeight) {
 81 |               main.ok = false;
 82 |               throw new Error("The image " + main.url + " (" + this.height + "px) is too short for that container (" + main.offsetHeight + "px).");
 83 |             } else {
 84 |               actualHeight = this.height;
 85 |               if (this.height < screenY) {
 86 |                 actualHeight = actualHeight + ((screenY - main.offsetHeight) * opt.speed);
 87 |               }
 88 |             }
 89 |           } else if (main.bgSize === 'cover') {
 90 |             if (screenY < main.offsetHeight) {
 91 |               main.ok = false;
 92 |               throw new Error("The container (" + main.offsetHeight + "px) can't be bigger than the image (" + screenY + "px).");
 93 |             }
 94 |           } else {
 95 |             window.getComputedStyle(main, false).backgroundSize === 'cover';
 96 |             that._check(i);
 97 |           }
 98 |           
 99 |           if (actualHeight !== main.offsetHeight) {
100 |               main.diff = -(actualHeight - main.offsetHeight);
101 |           } else {
102 |               main.diff = -actualHeight;
103 |           }
104 |                     
105 |           main.diff *= opt.speed;
106 |          
107 |           main.diff = main.diff - (main.offsetHeight * opt.boost);
108 |         };
109 |       },
110 |       _visible: function(i) {
111 |         if (((posY + screenY) > pho[i].offsetTop) && (posY < pho[i].offsetTop + pho[i].offsetHeight)) {
112 |           return true;
113 |         }
114 |         return false;
115 |       },
116 |       _animate: function() {
117 |         var per, position;
118 |         if (window.pageYOffset !== void 0) {
119 |           posY = window.pageYOffset;
120 |         } else {
121 |           posY = (document.documentElement || document.body.parentNode || document.body).scrollTop;
122 |         }
123 |         i = 0;
124 |         while (i < pho.length) {
125 |           this._check(i);
126 |           if (pho[i].ok && window.getComputedStyle(pho[i], false).backgroundAttachment === "fixed" && this._visible(i)) {
127 |             per = (posY - pho[i].offsetTop + screenY) / (pho[i].offsetHeight + screenY);
128 |             position = pho[i].diff * (per - 0.5);
129 |             if (pho[i].bgSize !== 'cover') {
130 |               position = position + ((screenY - pho[i].img.height) / 2);
131 |             }
132 |             position = Math.round(position * 100) / 100;
133 |           } else {
134 |             position = "center";
135 |           }
136 |           pho[i].style.backgroundPosition = "center " + position + "px";
137 |           i++;
138 |         }
139 |       }
140 |     };
141 |     return new Paraxify(el, options);
142 |   };
143 |   window.paraxify = paraxify;
144 | })(document, window, 0);
145 | 


--------------------------------------------------------------------------------
/paraxify.coffee:
--------------------------------------------------------------------------------
  1 | 
  2 | ###
  3 |  Paraxify.js - v0.1
  4 |  @author Jaime Caballero
  5 |  MIT license
  6 | ###
  7 | 
  8 | ((document, window, index) ->
  9 | 
 10 |   "use strict"
 11 | 
 12 |   paraxify = (el, options) ->
 13 | 
 14 |     posY = 0
 15 |     screenY = 0
 16 |     i = 0
 17 |     opt = {}
 18 |     pho = []
 19 |     contador = 0
 20 | 
 21 |     Paraxify = (el, options) ->
 22 | 
 23 |       this.options = {
 24 |         speed: 1,
 25 |         boost: 0
 26 |       }
 27 | 
 28 |       # User defined options
 29 |       for i of options
 30 |         @options[i] = options[i]
 31 | 
 32 |       this.options.speed = 1 if this.options.speed < 0 || this.options.speed > 1
 33 | 
 34 |       # By default, paraxify class
 35 |       el = 'paraxify' if !el
 36 | 
 37 |       # Classes
 38 |       if document.getElementsByClassName(el.replace('.',''))
 39 |         this.photos = document.getElementsByClassName(el.replace('.',''))
 40 | 
 41 |       # Now query selector
 42 |       else if document.querySelector(el)!=false
 43 |         this.photos = querySelector(el)
 44 | 
 45 |       # The elements don't exist
 46 |       else
 47 |         throw new Error("The elements you're trying to select don't exist.")
 48 | 
 49 |       # For minification
 50 |       opt = this.options
 51 |       pho = this.photos
 52 | 
 53 | 
 54 |       this._init(this)
 55 | 
 56 |       return
 57 | 
 58 | 
 59 |     Paraxify.prototype = {
 60 | 
 61 |       # Public methods
 62 |       update: () ->
 63 | 
 64 |         screenY =  window.innerHeight
 65 | 
 66 |         i = 0
 67 |         while i < pho.length
 68 |            
 69 |           pho[i].style.backgroundPosition = "center center"
 70 | 
 71 |           # Update the URL
 72 |           pho[i].url = window.getComputedStyle(pho[i],false)
 73 |                             .backgroundImage
 74 |                              .replace(/url\((['"])?(.*?)\1\)/gi, '$2')
 75 |                               .split(',')[0]
 76 |           
 77 |           # Check if new or update
 78 |           if !pho[i].img
 79 |             pho[i].img = new Image()
 80 | 
 81 |           if pho[i].url != pho[i].img.src
 82 |             this._check(i)
 83 |             pho[i].img.src = pho[i].url
 84 | 
 85 |           i++
 86 | 
 87 |         this._animate()
 88 |         return
 89 | 
 90 |       # Private methods
 91 | 
 92 |       _init: ->
 93 | 
 94 |         #Get values on load
 95 |         this.update()
 96 |           
 97 |         window.onscroll = (->
 98 |           this._animate()
 99 |           return
100 |         ).bind(this)
101 | 
102 |         window.onresize = (->
103 |           this.update()
104 |           return
105 |         ).bind(this)
106 | 
107 |         return
108 | 
109 | 
110 |       _check: (i) ->
111 | 
112 |         main = pho[i]
113 |         main.ok = true
114 |         main.bgSize = window.getComputedStyle(main,false).backgroundSize
115 |         actualHeight = screenY
116 | 
117 |         pho[i].img.onload = ->
118 |           
119 |           if main.bgSize == '' or main.bgSize == 'auto'
120 | 
121 |             if this.height < main.offsetHeight
122 |               main.ok = false
123 |               throw new Error("The image " + main.url + " (" + this.height + "px) is too short for that container (" + main.offsetHeight + "px).")
124 | 
125 |             else
126 |               actualHeight = this.height
127 | 
128 |               # If the image is smaller than the screen, we need to add that difference
129 |               actualHeight = actualHeight + ((screenY - main.offsetHeight) * opt.speed) if this.height < screenY
130 | 
131 | 
132 |           else if main.bgSize == 'cover'
133 | 
134 |             if screenY < main.offsetHeight
135 |               main.ok = false
136 |               throw new Error("The container (" + main.offsetHeight + "px) can't be bigger than the image (" + screenY + "px).")
137 | 
138 | 
139 |           else
140 |             window.getComputedStyle(main,false).backgroundSize == 'cover'
141 |             this._check(i)
142 | 
143 | 
144 |           # Initial difference - Minimum parallax
145 |           main.diff = -(actualHeight - main.offsetHeight) * opt.speed
146 | 
147 |           #Speed up! - From 0 to 100% of the container
148 |           main.diff = main.diff - (main.offsetHeight * opt.boost)
149 | 
150 |           return
151 | 
152 | 
153 |         return
154 | 
155 |       _visible: (i) ->
156 |         if ((posY + screenY) > pho[i].offsetTop) and ((posY) < pho[i].offsetTop + pho[i].offsetHeight)
157 |           return true
158 |         return false
159 | 
160 |       _animate: ->
161 |         if window.pageYOffset != undefined
162 |           posY = window.pageYOffset
163 |         else
164 |           posY = (document.documentElement || document.body.parentNode || document.body).scrollTop
165 | 
166 |         i = 0
167 |         while i < pho.length
168 | 
169 |           this._check(i)
170 | 
171 |           #Do de parallax ONLY AND ONLY IF the image is bigger than the container AND the container is visible
172 |           if (pho[i].ok and window.getComputedStyle(pho[i],false).backgroundAttachment == "fixed" and this._visible(i))
173 | 
174 |             # Percentage of the position
175 |             per = (posY - pho[i].offsetTop + screenY ) / (pho[i].offsetHeight + screenY)
176 | 
177 |             # Removes 50% so it shares the scroll between the top and the bottom
178 |             position = pho[i].diff * (per - 0.5)
179 | 
180 |             # If it's not cover, center it
181 |             position = position + ((screenY - pho[i].img.height) / 2) if pho[i].bgSize != 'cover'
182 | 
183 |             # Round it up!
184 |             position = Math.round(position * 100) / 100
185 | 
186 |           else
187 |             position = "center"
188 | 
189 |           # Here's the result
190 |           pho[i].style.backgroundPosition = "center " + position + "px"
191 |         
192 |           i++
193 | 
194 |         return
195 | 
196 |     }
197 | 
198 |     return new Paraxify(el, options)
199 | 
200 |   window.paraxify = paraxify
201 | 
202 |   return
203 | 
204 | ) document, window, 0


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