html5文章标题定格,jQuery和css3文章标题动画特效
这是一款效果非常不错的jQuery和css3文章标题动画特效。
HTML结构
所有效果的html结构是一样的,使用一个作为wrapper,给它一些margins和max-width。标题使用的是
标签,每一个单词都使用标签包裹,然后所有的词都放到行内元素中。
My favourite food is
pizza
sushi
steak
CSS样式
让我们来看看如何制作第一种旋转效果。
首先第一件事是给
标签应用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)属性,我们将每一个元素作为目标,设置它们妈的透明度为0和绝对定位。通过这个方法,我们将它们隐藏并从文档流中将它们移除。最好,我们将.is-visible类应用到第一个元素上,并将他的透明度设置为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');
}
注意:有一些效果需要单个字母的动画效果(例如:打印机效果)。对于这些动画,我们为h1标题添加.letters类,并通过singleLetters()函数将每一个字母用标签来包裹起来。
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文章标题动画特效相关推荐
- html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
- 一款基于jquery和css3的头像恶搞特效
今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览 源码下载 实现的代 ...
- 9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
- html头像特效,一款基于jquery和css3的头像恶搞特效
今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 实现的代码. html代码: H ...
- html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码
效果图 各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...
- css3特效框,科技常识:6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效 的相关资料,希望小伙伴们看了有所帮助. ...
- html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose
这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览 源码下载 使用方法 HTML ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载 更多专业前端知识,请上 [猿2048]www.mk2048.com
- css沿曲线进行动画,jQuery沿贝兹曲线运动动画特效
特效描述:jQuery 沿贝兹曲线运动 动画特效.jQuery沿贝兹曲线运动动画特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 10条曲线 开始动画 Plot 10条贝兹曲线 开 ...
最新文章
- python 循环触发一次_Python中的循环
- SEO:影响网站排名的一些问题
- node服务:日志、配置、路由与控制器
- 值类型 引用类型 堆栈 堆 之 异想
- 《统计学习方法》代码全解析——第十一部分条件随机场
- Linux下svn的部署
- Centos7 FastDFS 安装和配置启动
- 整理OpenResty+Mysql+Tomcat+JFinal+Cannal+HUI
- 传奇登陆游戏黑屏错位以及登陆器配置和常见问题
- json格式的字符数据转换成map格式
- 专利查询下载的几个网站
- java中验证国际手机号码
- 移动设备管理与OMA DM 协议 V5(3)
- jvm:RunTimeDataArea
- 中小学语文80个常用成语,附故事讲解,孩子写作必备素材!
- 对RecyclerView Item做动画
- 单片机中动态数码管闪烁问题
- 读取EXCEL表格数据到MATLAB成为矩阵
- Java 17新特性,快到起飞?
- **matlab中 isempty ( ) 函数用法**
热门文章
- 如何使用 Solidity 创建 NFT
- C++中缀转后缀代码
- 数据库跟踪——SQL Server Profiler详解
- 跨境电商和传统外贸的区别
- oracle表如何创建序列,Oracle中如何创建序列
- 郑州海关销毁近2万张“问题地图” 重约5.3吨
- 浙江理工大学传播学转计算机,恒心是考研马拉松最强大的武器 | 浙江理工大学新传考研经验贴...
- TLE4274G V50是一款低压降稳压器,采用TO220,TO252和TO263封装——科时进商城
- English Word —— Day 38——四级中学已学单词表
- 保宁资本周建华科技资讯:AI的场景变化