Make words pulsate - sharpen and sharpen, reduce and blur, and move
http://codepen.io/anon/pen/Mwjjgx
I have a tricky task, as you saw in the title of the question.
I am making a plugin that makes words move on the screen (I use jqfloat.js for this) by increasing the size with the sharpen effect and decreasing the size with the blur effect.
I've searched many times already but I haven't found anything similar, so I create it.
As you can see in the CodePen I can make them move and blur, now I am having difficulty with the rest.
How should I accomplish this task? Is there a plugin that can help me with this that I haven't found?
In CodePen ... between lines 1-145 is the jqFloat plugin and the rest is my code.
/*
* jqFloat.js - jQuery plugin
* A Floating Effect with jQuery!
*
* Name: jqFloat.js
* Author: Kenny Ooi - http://www.inwebson.com
* Date: December 6, 2012
* Version: 1.1
* Example: http://www.inwebson.com/demo/jqfloat/
*
*/
(function($) {
//plugin methods
var methods = {
init: function(options) { //object initialize
//console.log('init');
return this.each(function() {
//define element data
$(this).data('jSetting', $.extend({}, $.fn.jqFloat.defaults, options));
$(this).data('jDefined', true);
//create wrapper
var wrapper = $('<div/>').css({
'width': $(this).outerWidth(true),
'height': $(this).outerHeight(true),
'z-index': $(this).css('zIndex')
});
//alert($(this).position().top);
if ($(this).css('position') == 'absolute')
wrapper.css({
'position': 'absolute',
'top': $(this).position().top,
'left': $(this).position().left
});
else
wrapper.css({
'float': $(this).css('float'),
'position': 'relative'
});
//check for margin auto solution
if (($(this).css('marginLeft') == '0px' || $(this).css('marginLeft') == 'auto') && $(this).position().left > 0 && $(this).css('position') != 'absolute') {
wrapper.css({
'marginLeft': $(this).position().left
});
}
$(this).wrap(wrapper).css({
'position': 'absolute',
'top': 0,
'left': 0
});
//call play method
//methods.play.apply($(this));
});
},
update: function(options) {
$(this).data('jSetting', $.extend({}, $.fn.jqFloat.defaults, options));
},
play: function() { //start floating
if (!$(this).data('jFloating')) {
//console.log('play');
$(this).data('jFloating', true);
//floating(this);
}
floating(this);
},
stop: function() { //stop floating
//console.log('stop');
this.data('jFloating', false);
}
}
//private methods
var floating = function(obj) {
//generate random position
var setting = $(obj).data('jSetting');
var newX = Math.floor(Math.random() * setting.width) - setting.width / 2;
var newY = Math.floor(Math.random() * setting.height) - setting.height / 2 - setting.minHeight;
var spd = Math.floor(Math.random() * setting.speed) + setting.speed / 2;
//inifnity loop XD
$(obj).stop().animate({
'top': newY,
'left': newX
}, spd, function() {
if ($(this).data('jFloating'))
floating(this);
else
$(this).animate({
'top': 0,
'left': 0
}, spd / 2);
});
}
$.fn.jqFloat = function(method, options) {
var element = $(this);
if (methods[method]) {
if (element.data('jDefined')) {
//reset settings
if (options && typeof options === 'object')
methods.update.apply(this, Array.prototype.slice.call(arguments, 1));
} else
methods.init.apply(this, Array.prototype.slice.call(arguments, 1));
methods[method].apply(this);
} else if (typeof method === 'object' || !method) {
if (element.data('jDefined')) {
if (method)
methods.update.apply(this, arguments);
} else
methods.init.apply(this, arguments);
methods.play.apply(this);
} else
$.error('Method ' + method + ' does not exist!');
return this;
}
$.fn.jqFloat.defaults = {
width: 100,
height: 100,
speed: 1000,
minHeight: 0
}
})(jQuery);
+ function($) {
'use strict';
var Animate = function(element) {
this.element = element;
this.topPosition = element.data('position')[0];
this.leftPosition = element.data('position')[1];
this.fontSize = element.data('size') + 'px' || '20px';
this.shadow = element.data('shadow') || false;
this.setPosition();
this.setSize();
this.startFloat();
this.startPulsete();
};
Animate.prototype.setSize = function() {
this.element.css('fontSize', this.fontSize);
};
Animate.prototype.setPosition = function() {
this.element.css('top', this.topPosition);
this.element.css('left', this.leftPosition);
};
Animate.prototype.setBeyond = function() {
this.element.css('z-index', '99999')
};
Animate.prototype.startFloat = function() {
this.element.jqFloat({
width: 50,
height: 50,
speed: 5000
});
};
Animate.prototype.startPulsete = function() {
this.element.css('color', 'transparent');
this.element.css('textShadow', '0 0 5px rgba(255, 255, 255, 0.9)');
};
$(window).on('load', function() {
$('[data-ride="animate"]').each(function() {
var element = $(this);
var animation = new Animate(element);
});
});
}(jQuery);
body {
background: black;
}
ul {
list-style: none;
}
li {
position: absolute;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<ul>
<li data-ride="animate" data-size="40" data-position="[50, 50]">ONE</li>
<li data-ride="animate" data-size="25" data-position="[250, 580]">TWO</li>
<li data-ride="animate" data-size="75" data-position="[150, 800]">Three</li>
<li data-ride="animate" data-size="20" data-position="[50, 235]">Four</li>
</ul>
You already have a floating part. So it all comes down to changing the blur or property textShadow
. First prepare the array to store different blur radius values, for example
var blurRadiusA = ['0px','5px','10px','15px','20px' ];
Then, at the end of your private floating
function,
var randomIndex = Math.floor(Math.random()*blurRadiusA.length);
$(obj).css('textShadow', '0 0 '+blurRadiusA[randomIndex]+' rgba(255, 255, 255, 0.9)');
Note that this will randomly change the "blur" of each interval animate
. If you want smooth transitions between bluriness, that's a different story.
http://codepen.io/anon/pen/LVRRVZ
Update
For smooth transitions, a low scatter approach should be followed. Add new private method
var pulsating = function(obj, radius, direction, currentInterval) {
//direction is simply to either increment/decrement
radius += direction;
if(radius == 20){
direction = -1;
}
else if(radius == 0){
direction = 1;
}
$(obj).css({
'textShadow': '0 0 '+radius+'px rgba(255, 255, 255, 0.9)'
});
if(typeof currentInterval !== 'undefined'){
clearInterval(currentInterval);
}
currentInterval = setInterval(function() {
pulsating(obj, radius, direction, currentInterval);
}, 250);
}
This basically updates the elements of textShadow
each interval in a transient (non-random) way.
source to share