這是一款效果非常不錯(cuò)的jQuery和css3文章標(biāo)題動畫特效。

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)。看下圖：

要創(chuàng)建3d效果，我們需要設(shè)置perspective值。其它的元素將依舊是平面的。記住：Perspective屬性不被應(yī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和絕對定位。通過這個(gè)方法，我們將它們隱藏并從文檔流中將它們移除。最好，我們將.is-visible類應(yīng)用到第一個(gè)元素上，并將他的透明度設(shè)置為1，定位設(shè)置為相對定位。這樣便可以使第一個(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ā)動畫效果：我們從第一個(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;

}

剩下要做的事情就是為動畫制作動畫關(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)題動畫效果，我們定義了函數(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è)字母的動畫效果(例如：打印機(jī)效果)。對于這些動畫，我們?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文章标题动画特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。