html5文章标题定格,jQuery和css3文章标题动画特效
這是一款效果非常不錯(cuò)的jQuery和css3文章標(biāo)題動(dòng)畫特效。
HTML結(jié)構(gòu)
所有效果的html結(jié)構(gòu)是一樣的，使用一個(gè)作為wrapper，給它一些margins和max-width。標(biāo)題使用的是
標(biāo)簽,每一個(gè)單詞都使用標(biāo)簽包裹，然后所有的詞都放到行內(nèi)元素中。
My favourite food is
pizza
sushi
steak
CSS樣式
讓我們來看看如何制作第一種旋轉(zhuǎn)效果。
首先第一件事是給
標(biāo)簽應(yīng)用class .rotate-1。
我們將創(chuàng)建一個(gè)3d旋轉(zhuǎn)效果，可見的文字將沿x軸消失，新的文字將從底部出現(xiàn)，它們總是繞著x軸旋轉(zhuǎn)。看下圖：
要?jiǎng)?chuàng)建3d效果，我們需要設(shè)置perspective值。其它的元素將依舊是平面的。記住：Perspective屬性不被應(yīng)用到動(dòng)畫元素上(CSS Transition, Transformation 或者 Animation)。在這個(gè)例子中，Perspective被應(yīng)用到.cd-words-wrapper上。
.cd-headline.rotate-1 .cd-words-wrapper {
display: inline-block;
perspective: 300px;
}
當(dāng)設(shè)置了透視(Perspective)屬性，我們將每一個(gè)元素作為目標(biāo)，設(shè)置它們媽的透明度為0和絕對(duì)定位。通過這個(gè)方法，我們將它們隱藏并從文檔流中將它們移除。最好，我們將.is-visible類應(yīng)用到第一個(gè)元素上，并將他的透明度設(shè)置為1，定位設(shè)置為相對(duì)定位。這樣便可以使第一個(gè)單詞可見。
注意：我們?yōu)槊恳粋€(gè)單詞應(yīng)用一個(gè)transformation(rotateX(180deg))。transform-origin的值設(shè)置在底部。這一點(diǎn)很重要，你可以從gif圖片中看出，旋轉(zhuǎn)的原點(diǎn)并不是在中間的，我們需要在CSS文件中指定它。
.cd-headline.rotate-1 b {
opacity: 0;
transform-origin: 50% 100%;
transform: rotateX(180deg);
display: inline-block;
position: absolute;
left: 0;
top: 0;
}
.cd-headline.rotate-1 b.is-visible {
position: relative;
opacity: 1;
transform: rotateX(0deg);
}
我們需要jQuery來幫助觸發(fā)動(dòng)畫效果：我們從第一個(gè)元素上移除.is-visible并將它添加到第二個(gè)元素上。然后以此類推往下移除添加，形成一個(gè)循環(huán)。每次我們移除.is-visible類，就將它更換為.is-hidden類。為什么這里需要兩個(gè)class呢？因?yàn)樵诿總€(gè)class中我們都定義了一個(gè)CSS animation。
.cd-headline.rotate-1 b {
opacity: 0;
transform-origin: 50% 100%;
transform: rotateX(180deg);
display: inline-block;
position: absolute;
left: 0;
top: 0;
}
.cd-headline.rotate-1 b.is-visible {
position: relative;
opacity: 1;
transform: rotateX(0deg);
animation: cd-rotate-1-in 1.2s;
}
.cd-headline.rotate-1 b.is-hidden {
transform: rotateX(180deg);
animation: cd-rotate-1-out 1.2s;
}
剩下要做的事情就是為動(dòng)畫制作動(dòng)畫關(guān)鍵幀。
@keyframes cd-rotate-1-in {
0% {
transform: rotateX(180deg);
opacity: 0;
}
35% {
transform: rotateX(120deg);
opacity: 0;
}
65% {
opacity: 0;
}
100% {
transform: rotateX(360deg);
opacity: 1;
}
}
@keyframes cd-rotate-1-out {
0% {
transform: rotateX(0deg);
opacity: 1;
}
35% {
transform: rotateX(-40deg);
opacity: 1;
}
65% {
opacity: 0;
}
100% {
transform: rotateX(180deg);
opacity: 0;
}
}
JAVASCRIPT
為了觸發(fā)標(biāo)題動(dòng)畫效果，我們定義了函數(shù)animateHeadline()。
var animationDelay = 2500;
animateHeadline($('.cd-headline'));
function animateHeadline($headlines) {
$headlines.each(function(){
var headline = $(this);
//trigger animation
setTimeout(function(){ hideWord( headline.find('.is-visible') ) }, animationDelay);
//other checks here ...
});
}
它的作用是用于在延時(shí)2.5秒后觸發(fā)hideWord()。這個(gè)函數(shù)從第一個(gè)單詞上移除.is-visible，并將它添加到第二個(gè)單詞上，同時(shí)移除第二個(gè)單詞的.is-hidden。接下來，hideWord()再次被觸發(fā)以形成一個(gè)循環(huán)。
function hideWord($word) {
var nextWord = takeNext($word);
switchWord($word, nextWord);
setTimeout(function(){ hideWord(nextWord) }, animationDelay);
}
function takeNext($word) {
return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
}
function switchWord($oldWord, $newWord) {
$oldWord.removeClass('is-visible').addClass('is-hidden');
$newWord.removeClass('is-hidden').addClass('is-visible');
}
注意：有一些效果需要單個(gè)字母的動(dòng)畫效果(例如：打印機(jī)效果)。對(duì)于這些動(dòng)畫，我們?yōu)閔1標(biāo)題添加.letters類，并通過singleLetters()函數(shù)將每一個(gè)字母用標(biāo)簽來包裹起來。
singleLetters($('.cd-headline.letters').find('b'));
function singleLetters($words) {
$words.each(function(){
var word = $(this),
letters = word.text().split(''),
selected = word.hasClass('is-visible');
for (i in letters) {
letters[i] = (selected) ? '' + letters[i] + '': '' + letters[i] + '';
}
var newLetters = letters.join('');
word.html(newLetters);
});
}
總結(jié)
以上是生活随笔為你收集整理的html5文章标题定格,jQuery和css3文章标题动画特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html之一行代码给table设置标题.
- 下一篇： 用lru_cache提高性能