浙江 杭州

jQuery和css3文章标题动画特效

系统分类: 网页特效 - css3 - css3 变形 2015-08-03

人气7240

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款使用jQuery和css3制作的文章标题动画特效。该文章标题动画特效共有10种效果,分别是:打印机效果、翻转效果、翻牌效果、滑动效果等等。

这是一款效果非常不错的jQuery和css3文章标题动画特效。

HTML结构

所有效果的html结构是一样的,使用一个<section>作为wrapper,给它一些margins和max-width。标题使用的是<h1>标签,每一个单词都使用<b>标签包裹,然后所有的词都放到<span>行内元素中。

<section class="cd-intro">
  <h1 class="cd-headline rotate-1">
    <span>My favourite food is</span>
    <span class="cd-words-wrapper">
      <b class="is-visible">pizza</b>
      <b>sushi</b>
      <b>steak</b>
    </span>
  </h1>
</section> <!-- cd-intro -->
                

CSS样式

让我们来看看如何制作第一种旋转效果。

首先第一件事是给<h1>标签应用class .rotate-1

我们将创建一个3d旋转效果,可见的文字将沿x轴消失,新的文字将从底部出现,它们总是绕着x轴旋转。看下图:

文章标题动画特效示意图

要创建3d效果,我们需要设置perspective值。其它的元素将依旧是平面的。记住:Perspective属性不被应用到动画元素上(CSS Transition, Transformation 或者 Animation)。在这个例子中,Perspective被应用到.cd-words-wrapper上。

.cd-headline.rotate-1 .cd-words-wrapper {
  display: inline-block;
  perspective: 300px;
}
                

当设置了透视(Perspective)属性,我们将每一个<b>元素作为目标,设置它们妈的透明度为0和绝对定位。通过这个方法,我们将它们隐藏并从文档流中将它们移除。最好,我们将.is-visible类应用到第一个<b>元素上,并将他的透明度设置为1,定位设置为相对定位。这样便可以使第一个单词可见。

注意:我们为每一个单词应用一个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来帮助触发动画效果:我们从第一个元素上移除.is-visible并将它添加到第二个元素上。然后以此类推往下移除添加,形成一个循环。每次我们移除.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

为了触发标题动画效果,我们定义了函数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秒后触发hideWord() 。这个函数从第一个单词上移除.is-visible,并将它添加到第二个单词上,同时移除第二个单词的 .is-hidden。接下来,hideWord() 再次被触发以形成一个循环。

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');
}
                
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);
  });
}
                

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:42.45KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-913.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和css3文章标题动画特效

我当前G币余额:0 已下载次数:1

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有1 评论)