html5文章标题定格,jQuery和css3文章标题动画特效
這是一款效果非常不錯的jQuery和css3文章標題動畫特效。
HTML結構
所有效果的html結構是一樣的，使用一個作為wrapper，給它一些margins和max-width。標題使用的是
標簽,每一個單詞都使用標簽包裹，然后所有的詞都放到行內(nèi)元素中。
My favourite food is
pizza
sushi
steak
CSS樣式
讓我們來看看如何制作第一種旋轉效果。
首先第一件事是給
標簽應用class .rotate-1。
我們將創(chuàng)建一個3d旋轉效果，可見的文字將沿x軸消失，新的文字將從底部出現(xiàn)，它們總是繞著x軸旋轉。看下圖：
要創(chuàng)建3d效果，我們需要設置perspective值。其它的元素將依舊是平面的。記住：Perspective屬性不被應用到動畫元素上(CSS Transition, Transformation 或者 Animation)。在這個例子中，Perspective被應用到.cd-words-wrapper上。
.cd-headline.rotate-1 .cd-words-wrapper {
display: inline-block;
perspective: 300px;
}
當設置了透視(Perspective)屬性，我們將每一個元素作為目標，設置它們媽的透明度為0和絕對定位。通過這個方法，我們將它們隱藏并從文檔流中將它們移除。最好，我們將.is-visible類應用到第一個元素上，并將他的透明度設置為1，定位設置為相對定位。這樣便可以使第一個單詞可見。
注意：我們?yōu)槊恳粋€單詞應用一個transformation(rotateX(180deg))。transform-origin的值設置在底部。這一點很重要，你可以從gif圖片中看出，旋轉的原點并不是在中間的，我們需要在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ā)動畫效果：我們從第一個元素上移除.is-visible并將它添加到第二個元素上。然后以此類推往下移除添加，形成一個循環(huán)。每次我們移除.is-visible類，就將它更換為.is-hidden類。為什么這里需要兩個class呢？因為在每個class中我們都定義了一個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;
}
剩下要做的事情就是為動畫制作動畫關鍵幀。
@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ā)標題動畫效果，我們定義了函數(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 ...
});
}
它的作用是用于在延時2.5秒后觸發(fā)hideWord()。這個函數(shù)從第一個單詞上移除.is-visible，并將它添加到第二個單詞上，同時移除第二個單詞的.is-hidden。接下來，hideWord()再次被觸發(fā)以形成一個循環(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');
}
注意：有一些效果需要單個字母的動畫效果(例如：打印機效果)。對于這些動畫，我們?yōu)閔1標題添加.letters類，并通過singleLetters()函數(shù)將每一個字母用標簽來包裹起來。
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);
});
}
總結
以上是生活随笔為你收集整理的html5文章标题定格,jQuery和css3文章标题动画特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html之一行代码给table设置标题.
- 下一篇： 用lru_cache提高性能