diff --git a/demo/app.js b/demo/app.js index 9e25cd8..4eeb2a0 100644 --- a/demo/app.js +++ b/demo/app.js @@ -2,7 +2,7 @@ $(function () { // Initialize both crossfade examples $('.js-example-1').crossfade({ - threshold: 0.2, + threshold: 0.2 }); $('.js-example-2').crossfade({ diff --git a/dist/crossfade.jquery.js b/dist/crossfade.jquery.js index 93e8e33..d2494a5 100644 --- a/dist/crossfade.jquery.js +++ b/dist/crossfade.jquery.js @@ -1 +1 @@ -!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):t(window.jQuery||window.Zepto)}(function(t){"use strict";function i(i,s){if(this.el=t(i),this.options=s||{},this.options.start=this.options.start||this.el.data("crossfade-start"),this.options.end=this.options.end||this.el.data("crossfade-end"),!this.options.start||!this.options.end)throw new Error("crossfade.js requires two images.");var e=this.options.backgroundPosition.split(" ");this.options.backgroundPositionX=e[0],this.options.backgroundPositionY=e[1],this.width=this.el.width(),this.height=this.el.height(),this.canvas=t("").css({position:"absolute",top:"0",left:"0",width:this.width,height:this.height}),this.canvas.appendTo(this.el),this.paintbrush=this.canvas[0].getContext("2d");var o=t.proxy(this.onScroll,this),n=t.proxy(this.onResize,this);this.preload(function(){t(window).on("scroll",o).trigger("scroll"),t(window).on("resize",n).trigger("resize")})}i.prototype.preload=function(i){var s,e,o;this.start=t("").attr({src:this.options.start}),this.end=t("").attr({src:this.options.end}),s=[this.start,this.end],e=s.length,o=function(){e--,0===e&&"function"==typeof i&&i()};for(var n=0;nn?(o.width=parseInt(e/n),o.height=parseInt(e)):(o.width=parseInt(s),o.height=parseInt(s*n)),o.offset={},this.options.backgroundPositionY){case"top":o.offset.y=0;break;case"bottom":o.offset.y=-1*(o.height-e);break;case"center":default:o.offset.y=(o.height-e)/-2}switch(this.options.backgroundPositionX){case"left":o.offset.x=0;break;case"right":o.offset.x=-1*(o.width-s);break;case"center":default:o.offset.x=(o.width-s)/-2}return o},i.prototype.onScroll=function(){var i,s=t(window).scrollTop(),e=this.el.offset().top,o=this.el.height();i=e>s?0:s>e+o?1:(s-e)/(o*this.options.threshold),this.visibility=i,this.requestTick()},i.prototype.onResize=function(){this.needsResize=!0,this.width=this.el.width(),this.height=this.el.height(),this.requestTick()},i.prototype.requestTick=function(){var t=this;this.ticking||requestAnimFrame(function(){t.draw()}),this.ticking=!0},t.extend(t.fn,{crossfade:function(s){var e=t.extend({},t.fn.crossfade.defaults,s);return this.each(function(){return t(this).data("crossfade",new i(this,e)),this})}}),t.fn.crossfade.defaults={backgroundPosition:"center center",threshold:.5},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}()}); \ No newline at end of file +!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):t(window.jQuery||window.Zepto)}(function(t){"use strict";function i(i,s){if(this.el=t(i),this.options=s||{},this.options.start=this.options.start||this.el.data("crossfade-start"),this.options.end=this.options.end||this.el.data("crossfade-end"),!this.options.start||!this.options.end)throw new Error("crossfade.js requires two images.");var e=this.options.backgroundPosition.split(" ");this.options.backgroundPositionX=e[0],this.options.backgroundPositionY=e[1],this.width=this.el.width(),this.height=this.el.height(),this.canvas=t("").css({position:"absolute",top:"0",left:"0",width:this.width,height:this.height}),this.canvas.appendTo(this.el),this.paintbrush=this.canvas[0].getContext("2d");var o=t.proxy(this.onScroll,this),h=t.proxy(this.onResize,this);this.preload(function(){t(window).on("scroll",o).trigger("scroll"),t(window).on("resize",h).trigger("resize")})}i.prototype.preload=function(i){var s,e,o;this.start=t("").attr({src:this.options.start}),this.end=t("").attr({src:this.options.end}),s=[this.start,this.end],e=s.length,o=function(){e--,0===e&&"function"==typeof i&&i()};for(var h=0;hh?(o.width=parseInt(e/h),o.height=parseInt(e)):(o.width=parseInt(s),o.height=parseInt(s*h)),o.offset={},this.options.backgroundPositionY){case"top":o.offset.y=0;break;case"bottom":o.offset.y=-1*(o.height-e);break;case"center":default:o.offset.y=(o.height-e)/-2}switch(this.options.backgroundPositionX){case"left":o.offset.x=0;break;case"right":o.offset.x=-1*(o.width-s);break;case"center":default:o.offset.x=(o.width-s)/-2}return o},i.prototype.onScroll=function(){var i,s=t(window).scrollTop(),e=this.el.offset().top,o=this.el.height();i=e>s?0:s>e+o?1:(s-e)/(o*this.options.threshold),this.visibility=i,this.requestTick()},i.prototype.onResize=function(){this.needsResize=!0,this.width=this.el.width(),this.height=this.el.height(),this.requestTick()},i.prototype.requestTick=function(){var t=this;this.ticking||window.requestAnimFrame(function(){t.draw()}),this.ticking=!0},t.extend(t.fn,{crossfade:function(s){var e=t.extend({},t.fn.crossfade.defaults,s);return this.each(function(){return t(this).data("crossfade",new i(this,e)),this})}}),t.fn.crossfade.defaults={backgroundPosition:"center center",threshold:.5},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}()}); \ No newline at end of file diff --git a/index.html b/index.html index dec5f23..8a2ec9b 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,7 @@

Options

backgroundPosition - Default: 'center center'
Determines the positioning of the background images. This option functions similarly to CSS background-size. + Default: 'center center'
Determines the positioning of the background images. Backgrounds are sized similarly to CSS's “background-size: cover”. This option determines along which edges the image is aligned. diff --git a/src/crossfade.jquery.js b/src/crossfade.jquery.js index 8430743..749fc41 100644 --- a/src/crossfade.jquery.js +++ b/src/crossfade.jquery.js @@ -139,6 +139,10 @@ // and height are updated on window resize events. this.canvas[0].width = this.width; this.canvas[0].height = this.height; + this.canvas.css({ + width: this.width, + height: this.height + }); }; @@ -168,7 +172,7 @@ // Draw the starting image… this.paintbrush.drawImage(this.start[0], dimensions.offset.x, dimensions.offset.y, dimensions.width, dimensions.height); - + // Set the global opacity based on the visibility of our element… this.paintbrush.globalAlpha = this.visibility; @@ -190,7 +194,7 @@ // -------------------------------------------------------------------------- Crossfade.prototype.getDrawDimensions = function (imageWidth, imageHeight, containerWidth, containerHeight) { - + var dimensions = {}; var imageRatio = imageHeight / imageWidth; var containerRatio = containerHeight / containerWidth;