97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
(function ($, window, undefined) {
|
|
$.fn.marqueeify = function (options) {
|
|
var settings = $.extend({
|
|
horizontal: true,
|
|
vertical: true,
|
|
speed: 100, // In pixels per second
|
|
color: "#00ffff",
|
|
container: $(this).parent(),
|
|
bumpEdge: function () {}
|
|
}, options);
|
|
|
|
return this.each(function () {
|
|
var containerWidth, containerHeight, elWidth, elHeight, move, getSizes,
|
|
$el = $(this);
|
|
|
|
getSizes = function () {
|
|
containerWidth = settings.container.outerWidth();
|
|
containerHeight = settings.container.outerHeight();
|
|
elWidth = $el.outerWidth();
|
|
elHeight = $el.outerHeight();
|
|
};
|
|
|
|
move = {
|
|
right: function () {
|
|
$el.animate({left: (containerWidth - elWidth)}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
|
|
settings.bumpEdge();
|
|
move.left();
|
|
}});
|
|
},
|
|
left: function () {
|
|
$el.animate({left: 0}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
|
|
settings.bumpEdge();
|
|
move.right();
|
|
}});
|
|
},
|
|
down: function () {
|
|
$el.animate({top: (containerHeight - elHeight)}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
|
|
settings.bumpEdge();
|
|
move.up();
|
|
}});
|
|
},
|
|
up: function () {
|
|
$el.animate({top: 0}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
|
|
settings.bumpEdge();
|
|
move.down();
|
|
}});
|
|
}
|
|
};
|
|
|
|
getSizes();
|
|
|
|
if (settings.horizontal) {
|
|
move.right();
|
|
}
|
|
if (settings.vertical) {
|
|
move.down();
|
|
}
|
|
|
|
// Make that shit responsive!
|
|
$(window).resize( function() {
|
|
getSizes();
|
|
});
|
|
});
|
|
};
|
|
})(jQuery, window);
|
|
|
|
$(document).ready( function() {
|
|
|
|
$('.eyecandy').on( "click", function() {
|
|
$(this).toggleClass("clicked");
|
|
// $(this).marqueeify({
|
|
// speed: Math.random()*420,
|
|
// bumpEdge: function () {
|
|
// var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)";
|
|
// $('.marquee').css('background', newColor);
|
|
// $(this)[0].speed = Math.random()*420;
|
|
// }
|
|
// });
|
|
} );
|
|
|
|
$('.eyecandy').marqueeify({
|
|
speed: 300,
|
|
self: this,
|
|
bumpEdge: function () {
|
|
// svg bgcolor
|
|
// var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)";
|
|
var newColor = Math.floor(Math.random()*16777215).toString(16);
|
|
// console.log($(this)[0].self);
|
|
console.log($(this)[0].color);
|
|
console.log($(this)[0].self);
|
|
// .css("background-color", "#" + newColor);
|
|
//.css("background-color", "#00ffff");
|
|
$(this)[0].speed = Math.random()*420;
|
|
}
|
|
});
|
|
});
|