CSS3 animáció és tipográfia jQuery-vel
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.
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="https://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.
A teljes forrást elérhetitek itt. Erről a linkről pedig letölthetitek az egész demót a betűtípusokkal együtt tömörítve.
Forrás:
http://dev.w3.org/csswg/css3-animations/
