Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQueryプラグインテスト。RayEffectのJS版。RayEffectのエフェクト自体はこちらを参考にしています。→http://wonderfl.net/c/NspJ
(function($){
$.fn.rayeffect = function(config){
var defaults = {
duration:1000
}
var options = $.extend(defaults, config);
return this.each(function(index){
var TIME = options.duration;
var ct = $(this);
var w = ct.width();
var h = ct.height();
var elem = $(document.createElement("div"));
elem.attr("id", "rayEffectTarget" + index);
var src = ct.attr("src");
elem.css({position:"relative", width:w, height:h, overflow:"hidden", background:"url(" + src + ")"}).animate({width:w}, TIME, "linear");
var rayElem = $(document.createElement("div"));
var cloneImg = ct.clone();
rayElem.append(cloneImg);
rayElem.css({width:1, height:h, left:0, top:0, position:"absolute", overflow:"hidden"});
setTransformScaleLT(rayElem, w, 1);
cloneImg.css({position:"absolute", display:"block"}).animate({left:-w}, TIME, "linear");
rayElem.animate({left:w}, TIME, "linear");
elem.append(rayElem);
var parent = ct.parent();
parent.append(elem);
ct.remove();
$.when(rayElem, cloneImg).done(function(){
elem.remove();
parent.append(ct);
});
});
function setTransformScaleLT(jqElem, scaleX, scaleY){
jqElem.css("-webkit-transform", "scale(" + scaleX + "," + scaleY + ")")
.css("-moz-transform", "scale(" + scaleX + "," + scaleY + ")")
.css("-o-transform", "scale(" + scaleX + "," + scaleY + ")")
.css("-ms-transform", "scale(" + scaleX + "," + scaleY + ")")
.css("transform", "scale(" + scaleX + "," + scaleY + ")");
jqElem.css("-webkit-transform-origin", "0 0")
.css("-moz-transform-origin", "0 0")
.css("-o-transform-origin", "0 0")
.css("-ms-transform-origin", "0 0")
.css("transform-origin", "0 0");
}
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.