Make words pulsate jQuery
http://codepen.io/anon/pen/ZGBEyo
I have a tricky task, as you saw in the title of the question.
I'm making a plugin that makes words move on screen, upsize with sharpening effect, and downsizes with blur effect, and the hardest part is one another, if they have the same name, you might ask: what do you mean?
They have this completely random behavior to grow and stay in focus, shrink and blur, however I need to make two words with the same name that never become clear at the same time.
My plugin works like this:
<span class="word" data-float="true" data-range-x="100" data-range-y="100" data-top="500" data-left="50" data-size="25">Love</span>
If data-float is true, the word is authorised to use the plugin
data-range-x = the maximum x range that can move
data-range-y = the maximum y range that can move
data-top = the top initial position
data-left = the left initial position
data-size = the size of the word
So, is it possible to make them respect each other if they have the same name?
The working plugin contains three words of love:
+ function($) {
var Float = function(element) {
this.element = element;
this.wrapper;
this.settings = {
rangeX : element.data('range-x') || 100,
rangeY : element.data('range-y') || 100,
speed : element.data('speed') || 5000,
top : element.data('top') || 0,
left : element.data('left') || 0,
size : element.data('size') || 20
};
};
Float.prototype.init = function() {
this.setPosition();
this.setSize();
this.setWrapper();
this.andWalk();
};
Float.prototype.setPosition = function() {
this.element
.css('top', this.settings.top)
.css('left', this.settings.left);
};
Float.prototype.setSize = function() {
this.element.css('font-size', this.settings.size + 'px');
if (this.settings.size <= 20) this.setShadow();
};
Float.prototype.setShadow = function() {
console.log('test');
this.element.css('color', 'transparent');
};
Float.prototype.setWrapper = function() {
this.wrapper = $('<div/>').css({
'width': this.element.outerWidth(true),
'height': this.element.outerHeight(true),
'z-index': this.element.css('zIndex')
});
this.wrapper.css({
'position': this.element.css('position'),
'top': this.element.position().top,
'left': this.element.position().left,
'float': this.element.css('position') === 'absolute' ? 'none' : 'left'
});
this.element.wrap(this.wrapper).css({
'position': 'absolute',
'top': 0,
'left': 0
});
};
Float.prototype.andWalk = function() {
var self = this;
var newX = Math.floor(Math.random() * this.settings.rangeX) - this.settings.rangeX / 2;
var newY = Math.floor(Math.random() * this.settings.rangeY) - this.settings.rangeY / 2 - 0;
var newS = Math.floor(Math.random() * this.settings.speed) + this.settings.speed / 2;
var newF;
if (this.settings.size > 40) { newF = Math.floor(Math.random() * (70 - 15 + 1) + 15); }
else if (this.settings.size <= 25) { newF = Math.floor(Math.random() * (25 - 15 + 1) + 15); }
else { newF = Math.floor(Math.random() * (40 - 15 + 1) + 15); }
this.element.animate({
'fontSize': newF,
'color': newF >= 25 ? '#FFFFFF' : 'transparent',
'top': newY,
'left': newX
}, newS, function() {
self.andWalk();
});
};
$(window).on('load', function() {
$('[data-float]').each(function() {
var element = $(this).data('float') || false;
if (element) {
var float = new Float($(this));
float.init();
}
});
});
}(jQuery);
body {
background: black;
color: white;
}
.word {
position: absolute;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
}
<span class="word" data-float="true" data-index="1" data-range-x="100" data-range-y="100" data-top="500" data-left="50" data-size="25">Love</span>
<span class="word" data-float="true" data-index="2" data-range-x="100" data-range-y="100" data-top="90" data-left="290" data-size="40">Love</span>
<span class="word" data-float="true" data-index="3" data-range-x="100" data-range-y="100" data-top="500" data-left="290" data-size="70">Love</span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
You can use the animate.css library as it uses CSS3 transitions to animate elements with momentum, flip, scale, rotate, roll, fade and other effects. Then you can use jquery or pure javascript to call those effects.
Here is a jsfiddle I made to demonstrate how you can trigger effects from this library using jQuery http://jsfiddle.net/ashk3l/qxfj8L2d/
Essentially, your HTML might look something like this:
<h1 class="your-element">Hello!</h1>
And your jQuery call might look something like this:
$(document).ready(function () {
$('.your-element').addClass('animated pulse');
});
source to share