CSS3 animáció és tipográfia jQuery-vel

by Szabó Viktor · Published 2012/12/28 · Updated 2016/10/22

A következőkben egy nagyon egyszerű példát mutatok be nektek, hogy a tipográfia és a CSS3 animációs képessége miként teheti esztétikailag gazdagabbá weboldalainkat. A Példában egy kis jQuery-t is használunk. Az Internet Explorer kivételével az összes böngésző támogatja a CSS3 animációt. Javasolt böngészők: (Firefox vagy Chrome).

Az előző cikkben (CSS3 animáció) már bemutattam, hogy miként is működik az animációs modul. Így itt most csak a tipográfia részével foglalkozunk. A példámban a régebben már ismertetett @font-face megoldást is használom, hogy egyedi betűtípusokkal is gazdagodjon az animációm.

CSS3 animáció kiinduló állapot

A fenti ábra a kiindulóállapotom, aminek az esetében annyit szeretnék módosítani, hogy a HTML5 felirat betűi egyesével össze-vissza tűnjenek elő.

Nézzük először a HTML5 forrásomat:

<!DOCTYPE html>
<html>
<head>
<title>CSS3 animáció & tipográfia jQuery-vel</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<script type="text/javascript">
$(function() {
$("#letters h2").lettering();
});
</script>
</head>
<body>
<div class="container">
<div id="letters" class="letters">
<h2><span>HTML5</span></h2>
</div>
<h3>CSS3 Tipográfia jQuery-vel <br /><a href="http://html5.ugyesen.com">HTML5 és CSS3 programozás ügyesen</a>  </h3>

</div>
</body>
</html>

Ahogy láthatjátok is, roppant egyszerű kódról van szó. Használom a jQuery script gyűjteményt valamint azon belül még a jquery.lettering.js-t. Készítettem két div-et, egy “konténert” és egyet a “betűk”-nek. Nézzük talán hogyan fognak elkülönülni a betűk. Ezért a következő script felel a kódomban:

<script type="text/javascript">
$(function() {
$("#letters h2").lettering();
});
</script>

Hogy hova kerülnek a betűk, figyeljétek majd az :nth-child(1-5) részeket.

Most nézzük a style.css fájlomat (amit csak lehetett megjegyzésekkel láttam el):

@font-face { /*deklarálom a használandó betűtípust*/
font-family: 'journalregular';
src: url('journal-webfont.eot');
src: url('journal-webfont.eot?#iefix') format('embedded-opentype'),
url('journal-webfont.woff') format('woff'),
url('journal-webfont.ttf') format('truetype'),
url('journal-webfont.svg#journalregular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background:url(backg.jpg); /*háttérkép beállítása*/
}
h3,a {
font-family: 'journalregular', sans-serif; /*betű szín, méret és igazítás beállítása*/
color: white;
text-align:center;
font-size: 40px;
}
.letters { /*a div méretének megadása, igazítás*/
height: 270px;
width: 1100px;
margin: 0px auto;
}
.letters h2 {
text-align: center; /*A h2 tag betűtípusának beállítása*/
font-family: Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.letters h2 { /*igazítás*/
text-align: center;
padding: 0px;
}
.letters h2 span{/*betűméret és IE kompatibilitás beállítása*/
font-size: 105px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";/*IE8*/
filter: alpha(opacity=70);/*IE5-7*/
opacity: 0.9; /*átlátszóság értékének megadása*/
text-shadow: 0px 0px 2px #373852, 1px 1px 4px rgba(0,0,0,0.7); /*árnyékolás beállítása*/
-webkit-transition: all 0.4s linear; /*az átmenet idejének és módjának definiálása*/
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-animation: elotunes 0.8s linear backwards; /*elotunes nevu keyframes meghívása és paramétereinek definiálása*/
-moz-animation: elotunes 0.8s linear backwards;
-o-animation: elotunes 0.8s linear backwards;
animation: elotunes 0.8s linear backwards;
}
.letters h2 span:hover{ /*hover esetén fehér szín*/
color: white;
}
.letters h2 span:nth-child(1) {  /*Az egyes betűk előtűnésének időzítése*/
-webkit-animation-delay: 1.3s;/*safari es chrome*/
-moz-animation-delay: 1.3s;/*firefox*/
-o-animation-delay: 1.3s;/*opera*/
animation-delay: 1.3s;/*default*/
}
.letters h2 span:nth-child(2) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.letters h2 span:nth-child(3) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.letters h2 span:nth-child(4) {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.letters h2 span:nth-child(5) {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
animation-delay: 1.2s;
}
@keyframes elotunes  /*css3 animáció előtűnés effekt*/
{
0% {
opacity: 0;
text-shadow: 0px 0px 90px #373852;
color: transparent;
}
30% {
opacity: 0.3;
text-shadow: 0px 0px 10px #373852;
color: transparent;
}
70% {
opacity: 0.7;
text-shadow: 0px 0px 10px #373852;
color: transparent;
}
100% {
color: #373852;
opacity: 1;
text-shadow: 0px 0px 2px #373852, 1px 1px 4px rgba(0,0,0,0.7);
}
}
@-moz-keyframes elotunes /*firefox*/
{
0% {
opacity: 0;
text-shadow: 0px 0px 90px #373852;
color: transparent;
}
30% {
opacity: 0.3;
text-shadow: 0px 0px 10px #373852;
color: transparent;
}
70% {
opacity: 0.7;
text-shadow: 0px 0px 10px #373852;
color: transparent;
}
100% {
color: #373852;
opacity: 1;
text-shadow: 0px 0px 1px #373852, 1px 1px 3px rgba(0,0,0,0.7);
}
}
@-webkit-keyframes elotunes /*safari és chrome*/
{
0% {
opacity: 0;
text-shadow: 0px 0px 90px #373852;
color: transparent;
}
30% {
opacity: 0.3;
text-shadow: 0px 0px 10px #373852;
color: transparent;
}
70% {
opacity: 0.7;
text-shadow: 0px 0px 10px #373852;
color: transparent;
}
100% {
color: #373852;
opacity: 1;
text-shadow: 0px 0px 1px #373852, 1px 1px 3px rgba(0,0,0,0.7);
}
}
@-o-keyframes elotunes /*opera*/
{
0% {
opacity: 0;
text-shadow: 0px 0px 90px #373852;
color: transparent;
}
30% {
opacity: 0.3;
text-shadow: 0px 0px 10px #373852;
color: transparent;
}
70% {
opacity: 0.7;
text-shadow: 0px 0px 10px #373852;
color: transparent;
}
100% {
color: #373852;
opacity: 1;
text-shadow: 0px 0px 1px #373852, 1px 1px 3px rgba(0,0,0,0.7);
}
}

Ha megnézitek, csak azért hosszú, hogy az egyes böngészőkben ugyanazt lássátok, egyébként a felére lehetne zsugorítani a kódot. A legfontosabb két rész a CSS fájlban az :nth-child(1-5) (betűk) és a keyframes (animáció) beállítása. Az nth-child segítségével időzítettem az egyes betűk megjelenését. A keyframes-el a betűk színét, az átlátszóságukat és árnyékolásukat definiáltam. A kettő együttes eredményét láthatjátok az alábbi képen.