Initial import
This commit is contained in:
commit
57278adf12
139
dist/fluidtype-jquery.js
vendored
Normal file
139
dist/fluidtype-jquery.js
vendored
Normal file
|
@ -0,0 +1,139 @@
|
||||||
|
/*jslint browser:true */
|
||||||
|
/*global $*/
|
||||||
|
$(function() {
|
||||||
|
|
||||||
|
var ACTION_FILL = 1,
|
||||||
|
ACTION_ERASE = 2;
|
||||||
|
|
||||||
|
var defaultOptions = {
|
||||||
|
strings: [
|
||||||
|
"Hello!",
|
||||||
|
"How are you?"
|
||||||
|
],
|
||||||
|
waitFillDuration: 200,
|
||||||
|
waitEraseDuration: 2000,
|
||||||
|
animateDuration: 400,
|
||||||
|
easing: 'swing'
|
||||||
|
};
|
||||||
|
|
||||||
|
function FluidType ($userElem, userOptions) {
|
||||||
|
var _$other,
|
||||||
|
_$elem = $userElem,
|
||||||
|
_pauseRequested = false,
|
||||||
|
_currentAction = ACTION_ERASE,
|
||||||
|
_currentString = 0,
|
||||||
|
_options = $.extend({}, defaultOptions, userOptions),
|
||||||
|
_self = this;
|
||||||
|
|
||||||
|
this.animateFill = function() {
|
||||||
|
var str = _options.strings[_currentString];
|
||||||
|
_$elem.html(str);
|
||||||
|
_$elem.parent().find(_$other).remove();
|
||||||
|
_$other = _$elem.clone();
|
||||||
|
_$other.css({
|
||||||
|
width: '',
|
||||||
|
position: 'absolute',
|
||||||
|
visibility: 'hidden',
|
||||||
|
display: 'block',
|
||||||
|
left: '-300%',
|
||||||
|
});
|
||||||
|
_$elem.parent().append(_$other);
|
||||||
|
|
||||||
|
_$elem.velocity(
|
||||||
|
{
|
||||||
|
width: _$other.width()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
duration: _options.animateDuration,
|
||||||
|
easing: _options.easing,
|
||||||
|
complete: _self.next
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Erase
|
||||||
|
*/
|
||||||
|
this.animateErase = function() {
|
||||||
|
_$elem.velocity(
|
||||||
|
{
|
||||||
|
width: 0 //'= ' + _$other.width()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
duration: _options.animateDuration,
|
||||||
|
easing: _options.easing,
|
||||||
|
complete: _self.next
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Switch to the next action.
|
||||||
|
* Pause request does not affect Erase => Fill switch
|
||||||
|
*/
|
||||||
|
this.next = function() {
|
||||||
|
_currentString = (_currentString + 1) % _options.strings.length;
|
||||||
|
|
||||||
|
switch (_currentAction) {
|
||||||
|
case ACTION_ERASE:
|
||||||
|
_currentAction = ACTION_FILL;
|
||||||
|
setTimeout(
|
||||||
|
_self.animateFill.bind(_self),
|
||||||
|
_options.waitFillDuration
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case ACTION_FILL:
|
||||||
|
if (!_pauseRequested) {
|
||||||
|
_currentAction = ACTION_ERASE;
|
||||||
|
setTimeout(
|
||||||
|
_self.animateErase.bind(_self),
|
||||||
|
_options.waitEraseDuration
|
||||||
|
);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Start animation (again)
|
||||||
|
*/
|
||||||
|
this.start = function() {
|
||||||
|
// choose next string
|
||||||
|
_pauseRequested = false;
|
||||||
|
_self.next();
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Request animation stop
|
||||||
|
*/
|
||||||
|
this.stop = function() {
|
||||||
|
_pauseRequested = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Set up element properties
|
||||||
|
*/
|
||||||
|
function initialize() {
|
||||||
|
_$elem.css({
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
display: 'inline-block',
|
||||||
|
overflow: 'hidden',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
verticalAlign: 'bottom',
|
||||||
|
width: 0
|
||||||
|
});
|
||||||
|
_self.start();
|
||||||
|
}
|
||||||
|
initialize();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.fluidType = function(userOptions) {
|
||||||
|
var $target = $(this);
|
||||||
|
var fluidType = new FluidType($target, userOptions);
|
||||||
|
return fluidType;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
1
dist/fluidtype-jquery.min.js
vendored
Normal file
1
dist/fluidtype-jquery.min.js
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
$(function(){var u={strings:["Hello!","How are you?"],waitFillDuration:200,waitEraseDuration:2e3,animateDuration:400,easing:"swing"};function t(i,t){var n,e=i,a=!1,o=2,s=0,r=$.extend({},u,t),l=this;this.animateFill=function(){var i=r.strings[s];e.html(i),e.parent().find(n).remove(),(n=e.clone()).css({width:"",position:"absolute",visibility:"hidden",display:"block",left:"-300%"}),e.parent().append(n),e.velocity({width:n.width()},{duration:r.animateDuration,easing:r.easing,complete:l.next})},this.animateErase=function(){e.velocity({width:0},{duration:r.animateDuration,easing:r.easing,complete:l.next})},this.next=function(){switch(s=(s+1)%r.strings.length,o){case 2:o=1,setTimeout(l.animateFill.bind(l),r.waitFillDuration);break;case 1:a||(o=2,setTimeout(l.animateErase.bind(l),r.waitEraseDuration))}},this.start=function(){a=!1,l.next()},this.stop=function(){a=!0},e.css({boxSizing:"border-box",display:"inline-block",overflow:"hidden",whiteSpace:"nowrap",verticalAlign:"bottom",width:0}),l.start()}$.fn.fluidType=function(i){return new t($(this),i)}});
|
26
example/app.css
Normal file
26
example/app.css
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
|
||||||
|
h1 { color: red; }
|
||||||
|
|
||||||
|
#text {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.3;
|
||||||
|
padding: 60px;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text .red {
|
||||||
|
padding: 0 0.25em;
|
||||||
|
background-color: #fee;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text .green {
|
||||||
|
padding: 0 0.25em;
|
||||||
|
background-color: #efe;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text .blue {
|
||||||
|
padding: 0 0.25em;
|
||||||
|
background-color: #eef;
|
||||||
|
}
|
31
example/app.js
Normal file
31
example/app.js
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
/*jslint browser: true */
|
||||||
|
/*global $*/
|
||||||
|
$(function () {
|
||||||
|
|
||||||
|
// prepare fluidType initialization parameters
|
||||||
|
var options = {
|
||||||
|
strings: [
|
||||||
|
"<span class='red'>a technologist.</span>",
|
||||||
|
"<span class='green'>an entrepreneur.</span>",
|
||||||
|
"<span class='blue'>a humanist.</span>"
|
||||||
|
],
|
||||||
|
waitFillDuration: 200,
|
||||||
|
waitEraseDuration: 2000,
|
||||||
|
animateDuration: 400,
|
||||||
|
};
|
||||||
|
|
||||||
|
// get fluidType object to make it controllable by a button
|
||||||
|
var fluidType = $('#dynamic').fluidType(options);
|
||||||
|
|
||||||
|
$('input[type=button]').click(function(ev) {
|
||||||
|
var $this = $(this);
|
||||||
|
ev.preventDefault();
|
||||||
|
if ($this.val() === 'Play') {
|
||||||
|
$this.val('Pause');
|
||||||
|
fluidType.start();
|
||||||
|
} else {
|
||||||
|
$this.val('Play');
|
||||||
|
fluidType.stop();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
28
example/index.html
Normal file
28
example/index.html
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Demo</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/app.css"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>FluidType jQuery Plugin</h1>
|
||||||
|
|
||||||
|
<div id="text">
|
||||||
|
Hello!<br/>
|
||||||
|
My name is Glenn,<br/>
|
||||||
|
I’m <span id="dynamic"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="button" value="Pause" />
|
||||||
|
<!-- external libraries -->
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.js"></script>
|
||||||
|
<script src="js/fluidtype-jquery.js"></script>
|
||||||
|
|
||||||
|
<!-- page specific settings -->
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue