我正在尝试使用一个表示“ hello world”的h1,并使用lettering.js(请参见下文)将h1分成一系列跨度,以便我可以分别更改字母的颜色以产生彩虹效果。我还想使用在此处找到的混乱文本效果:http : //cozuya.github.io/TextEffect-jQuery-plugin/。这是刻字插件的链接:https : //github.com/davatron5000/Lettering.js。
本质上发生的是,颜色将发生变化,但字母不会混乱,并且过一会儿颜色将恢复为白色。
我试过在字体调用之前使用.delay(),将其中一个放在脚本中,然后放在另一个脚本中,似乎没有什么办法使这两个插件协同工作。
这就是.lettering被调用后的h1“ hello world”的样子:
<h1 id = "letters">
<span class="char1">"</span>
<span class="char2">h</span>
<span class="char3">e</span>
<span class="char4">l</span>
<span class="char5">l</span>
<span class="char6">o</span>
<span class="char7"> </span>
<span class="char8">w</span>
<span class="char9">o</span>
... and so on
</h1>
我的jQuery:
$(document).ready(function() {
$('#letters').textEffect({effect: 'jumble',
effectSpeed: 150,
completionSpeed: 6000
});
$("#letters").lettering();
});
CSS:
#letters .char10 {
color: #94C472;
}
#letters .char11 {
color: #B33E92;
}
#letters .char12 {
color: #D18D61;
}
#letters .char13 {
color: #DA3C40;
}
#letters .char14 {
color: #1AAAA2;
}
#letters .char15 {
color: #1AAAA2;
}
这些插件不兼容。您的行为的原因是:
$('#letters').textEffect(...)
由于动画超时而延迟$("#letters").lettering()
在textEffect
渲染完成之前执行。该lettering
插件修改元素,它是导致你注意到那里混乱不正常的问题(它改变文本节点元素与多元素span
的元素,但textEffect
插件只是期待一个文本字符串,它自身的操作为span
元素) 。为使此工作正常textEffect
进行,需要对插件进行几个简单的修改。我更改了jumble
和runJumble
功能。
jumble
self.reset()
如您所指出的,删除了在延迟后颜色变回原来的呼叫。这是将各个span标签改回常规文本节点。(我注释掉了它,以显示它在哪里;请参阅下文)
colorArray
用您的示例颜色创建了一个。这可以是您想要的任何内容,并且可以轻松地进行修改以与一起传递options
。将colorArray
被传递到runJumble
了混乱的字母色,并且还使用了混乱动画完成后,设置正确的字母的颜色。
runJumble
用于colorArray
设置混乱字母的颜色。这替换了选项options.jumbleColor
,因此有效地改变了函数的工作方式(从数组中随机抽取颜色,而不是使用选项定义的单一颜色)。
这只是出于示例目的-您可能希望进一步进行此操作并创建不同的方法,也许调用它们rainbowJumble
而不是与原始方法搞混jumble
,或者可以添加一个选项{rainbow:true}
并针对不同的颜色行为进行分支。然后,您可以执行拉取请求,并将其合并到GitHub中的插件中。z!
$(document).ready(function() {
$('#letters').textEffect({effect: 'jumble',
effectSpeed: 150,
completionSpeed: 6000
});
});
// from http://cozuya.github.io/TextEffect-jQuery-plugin/javascripts/textEffect.jquery.js
// jQuery text effect plugin created by Chris Ozols copywrite MIT license 2013
// v0.1.6
if ( typeof Object.create !== 'function' ) {
Object.create = function( obj ) {
function F() {}
F.prototype = obj;
return new F();
};
}
(function( $, window, document, undefined ) {
var TextEffect = {
init: function (options, elem) {
var _options = {};
this.$elem = $(elem);
this.oldText = this.$elem.html();
typeof options === 'string' ? _options.effect = options : _options = options;
this.options = $.extend( {}, $.fn.textEffect.options, _options );
this[this.options.effect]();
},
setup: function (effectOption) {
this.textArray = [];
this.$elem.html(''); // oddly jQuery.empty() doesn't work as well here.
for (var i = 0; i < this.oldText.length; i++) {
this.textArray[i] = "<span class='text-effect' style='" + effectOption + "'>" + this.oldText.substr(i, 1) + "</span>";
this.$elem.append(this.textArray[i]);
}
},
random: function () {
var effects = ['grow', 'fade', 'jumble', 'slide', 'dropdown'];
var effect = effects[(Math.floor(Math.random() * effects.length))];
this[effect]();
},
slide: function () {
var startPosition = (this.$elem.offset().left + this.$elem.width());
this.setup('visibility: hidden; position: relative; left: ' + startPosition + 'px;');
this.run('left', 0);
},
dropdown: function () {
var offscreen = this.$elem.offset().top + this.$elem.height() * 1.1; // little extra padding
this.setup('position: relative; bottom: ' + offscreen + 'px;');
this.run('bottom', 0);
},
grow: function () {
this.setup('font-size: 0px;');
this.run('fontSize', this.$elem.css('fontSize'));
},
fade: function () {
this.$elem[0].style.opacity !== undefined ? this.setup('opacity: 0;') : this.setup('filter: alpha(opacity=0); display: inline-block;'); // IE8 and below. jQuery handles animating opacity natively.
this.run('opacity', this.$elem.css('opacity'));
},
jumble: function () {
var self = this;
var colorArray = ["#94C472","#B33E92","#D18D61","#DA3C40","#1AAAA2","#1AAAA2"];
var letterArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
var i = 0;
this.setup();
var jumbleEffectInterval = setInterval(function () {
if (self.jumbleInterval) {
clearInterval(self.jumbleInterval);
}
self.runJumble(letterArray, colorArray, i);
self.$elem.children('span.text-effect').eq(i).html(self.oldText.substr(i, 1)).css('color', colorArray[Math.floor(Math.random() * (colorArray.length - 1))]);
if (i === (self.oldText.length - 1)) {
clearInterval(jumbleEffectInterval);
//self.reset(); // omit reset. this was changing the charcter spans back to plain text
} else {
i++;
}
}, self.options.effectSpeed);
},
runJumble: function (letterArray, colorArray, jumbleLength) {
var self = this;
this.jumbleInterval = setInterval(function () {
for (var i = (self.textArray.length - 1); i > jumbleLength; i--) {
if (self.oldText.substr(i, 1) !== ' ') {
self.$elem.children('span.text-effect').eq(i).html(letterArray[Math.floor(Math.random() * (letterArray.length - 1))]).css('color', colorArray[Math.floor(Math.random() * (colorArray.length - 1))]);
} else {
self.$elem.children('span.text-effect').eq(i).html(' ');
}
}
}, 70);
},
run: function (effect, oldEffect) {
var self = this;
var obj = {};
var i;
obj[effect] = oldEffect;
this.options.reverse ? i = this.textArray.length - 1 : i = 0;
var $spans = self.$elem.children('span.text-effect');
var effectInterval = setInterval(function () {
$spans.eq(i).css('visibility', 'visible').animate(obj, self.options.completionSpeed / self.textArray.length, function () {
if ($(this).index() === self.textArray.length - 1 && !self.options.reverse || self.options.reverse && $(this).index() === 0) {
clearInterval(effectInterval);
self.reset();
}
});
self.options.reverse ? i-- : i++;
}, self.options.effectSpeed);
},
reset: function () {
this.$elem.html(this.oldText);
}
};
$.fn.textEffect = function(options) {
return this.each(function() {
var texteffect = Object.create(TextEffect);
texteffect.init(options, this);
});
};
$.fn.textEffect.options = {
effect: 'random',
effectSpeed: 150,
completionSpeed: 6000,
jumbleColor: '#7f7f7f',
reverse: false
};
})( jQuery, window, document );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id = "letters">goodbye cruel world</h1>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句