猫灿先生博客,简约即美
« 上一篇: 下一篇: »

jQuery&CSS实现变换彩色文本效果

猫灿先生  |  2011 年 01 月 31 日  |  位置: »

这篇文章介绍的是设计Photo Gallery网站标志时使用的一个技巧,利用jQuery和CSS实现Logo图片里的文字随时间变化颜色,如夜晚霓虹灯一般,具体样式请进入art.maocan.com首页查看。这个应用适用于设计炫彩标题,对于熟悉jQuery、CSS和Photoshop的童鞋可以很快上手,如果配色得当效果相当不错。

Photoshop图样设计

本文以Photo Gallery的标志设计为例进行讲解~首先打开Photoshop新建工作区,宽度为200px,高度为160px,背景为白色。新建文本图层,在背景图层上半部分写下logo或标题的名称,逐个字词进行配色。然后复制此图层移动到背景图层下半部分,重新对每个字词进行配色,具体的效果见右图。从这个初步设计完成的图样来看,大家应该可以明白图片中文本变换颜色实现的本质就是图层的叠加,使用jQuery达到图像上下两部分在同一个位置交替显示,加上淡入淡出效果,这样看起来文本有一种炫彩的效果。

需要注意的是在制作图片时上部分文本图层上边缘与整体背景图层上边缘齐平(文本内容贴顶部),将图片从中间分开后将上下两部分重叠文字必须完全吻合,可以借助网格和辅助线。这样避免了上下两层图片交替显示时出现重影,从而达到最好效果。

CSS布局与jQuery代码实现

新建index.html,引入jQuery库(建议最新版本1.4.2)和logo.js。具体内容如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery&CSS实现变换彩色文本效果 - Bamboo Talk!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="logo.js"></script>
</head>
<body>
<h1 id="neonText">
    Bamboo Talk! - jQuery&CSS实现变换彩色文本效果
    <span class="textVersion" id="version1"></span>
    <span class="textVersion" id="version2"></span>
</h1>
</body>
</html>

其中#version1覆盖在#version2上,具体的CSS内容为:

#neonText span{width:200px;height:80px;position:absolute;left:0;top:0;
background:url('images/logo.png') no-repeat left top;}
span#version1{z-index:100;}
span#version2{background-position:left bottom;z-index:99;}
#neonText{height:80px;position:absolute;width:200px;text-indent:-9999px;bottom:40px;left:40px;}

在应用CSS文件时注意根据实际设计的图片大小修改width和height的值,确保图像显示正确。
然后是logo.js的内容:

$(document).ready(function(){
	setInterval(function(){
		var versions = $('.textVersion:visible');
		if(versions.length<2){
			$('.textVersion').fadeIn(1800);
		}
		else{
			versions.eq(0).fadeOut(1800);
		}
	},1000);
});

其中fadeIn(1800)和fadeOut(1800)表示淡入淡出的时间,这里设置为1800毫秒,可根据喜好修改。

应用总结

完成以上步骤,这个应用基本就算掌握了。本效果在Chrome和IE 8环境测试很流畅,顺便说一句,为了能让您获得更好的上网体验同时支持W3C新标准网站的发展,请使用Chrome浏览器或将IE升级到最新版。如果是PS达人还可以设计出更炫的图样,配合jQuery与CSS相信能达到更好的效果。关于配色可以到网上找一些配色表,合理的色彩搭配能让设计上一个层次。

日志信息 »

® 文章信息:本篇日志于 2011年01月31日 21:16 发表在分类 "设计 Design"
™ 本文标签:, , ,
© 声明信息:本作品采用 license 协议进行许可,转载请注明来自"Bamboo Talk!"
喜欢本文,那就收藏到 :

“jQuery&CSS实现变换彩色文本效果” 当前没有评论 »

发表您的评论




    添加表情    发布自定义图片
a b c d e f g h i j k l m n o p q r s t u v w x y z
(Ctrl+Enter快速提交) 如何设置头像?
0

Bamboo Talk! is Mr. Maocan's private blog. Hope you enjoy your every visit here!