Vytvoření pokročilého „Marquee“ s animací CSS3
Dnes se podíváme “stan” ještě jednou. Ve skutečnosti jsme se o tom věnovali v našem předchozím příspěvku, který hovořil o používání -webkit-marquee vlastnictví, ale tentokrát budeme tuto záležitost brát o něco dále.
V tomto příspěvku se chystáme vytvořit Marquee-like efekt pomocí animace CSS3. Tímto způsobem budeme schopni přidat další funkce, které nelze dosáhnout pouze pomocí -webkit-marquee.
Pokud již nejste obeznámeni s modulem CSS3 Animation, doporučujeme před zahájením této dokumentace se podívat na následující odkazy:
- CSS3 Animace - W3School
- CSS animace - Mozilla Dev. Síť
Všimněte si také, že CSS3 Animation může v současné době fungovat pouze ve Firefoxu 8+, Chrome 12+ a Safari 5.0+ s přednastavenou verzí (-moz- a -webkit-). Oficiální verzi z W3C však použijeme pouze bez předpony, aby se tento článek předešel přebytečnými kódy..
Řešení problému Marquee
Jedním z problémů s markýzem je, že se text neustále pohybuje. Toto chování je rušivé pro čtení a text je také obtížně čitelný. Tentokrát se pokusíme vytvořit vlastní verzi marquee a zpříjemnit ji. Například; místo toho, aby se text pohyboval průběžně, zastavíme ho, když je plně viditelný, takže si uživatel může na chvíli přečíst text.
Storyboard (druh)
Každá tvorba a tvorba designu, jako je logo, ilustrace nebo webová stránka, obvykle začíná skici. V oblasti animace se to děje pomocí scénáře. Než začneme s jakýmkoliv kódováním, nejprve vytvoříme druh scénáře, aby nám pomohla představit si naši animaci.
Jak vidíte z výše uvedeného scénáře, plánujeme zobrazit pouze dva řádky textu, které se budou pohybovat postupně zprava doleva..
Náš scénář není tak komplikovaný jako scénář pro skutečný animovaný film, ale jde o to: nyní jsme schopni vizualizovat, jak bude náš vzhled vypadat.
Značky HTML
Protože naše animace bude jednoduchá, značení HTML bude také jednoduché:
Jak přidat WordPress Související příspěvky bez pluginů
Automatizujte soubory Dropbox s akcemi
Základní styly
Než začneme pracovat na animaci, přidáme základní styly. Začněme tím, že přidáme texturu pozadí html živel.
html background: url ('… /images/skewed_print.png'); Dále umístíme rámeček do středu okna prohlížeče a přidáme některé detaily, jako je vnitřní stín, barva pozadí a okraje..
.marquee width: 500px; výška: 50px; okraj: 25px auto; přetečení: skryté; poloha: relativní; hranice: 1px pevná # 000; okraj: 25px auto; barva pozadí: # 222; -webkit-border-radius: 5px; hraniční rádius: 5px; -webk-box-shadow: inset 0px 2px 2px rgba (0, 0, 0, 5), 0px 1px 0px rgba (250, 250, 250, 2); box-shadow: inset 0px 2px 2px rgba (0, 0, 0, 0,5), 0px 1px 0px rgba (250, 250, 250, 2);
Pak umístíme text - který je v tomto případě zabalen do tagu odstavce - absolutně a od té doby absolutní pozice způsobí kolaps prvku, budeme muset definovat prvek šířky 100% tak, aby pokryla šířku jeho rodiče.
.marquee p pozice: absolutní; font-family: Tahoma, Arial, sans-serif; šířka: 100%; výška: 100%; marže: 0; výška řádku: 50px; zarovnání textu: střed; barva: #ff; text-shadow: 1px 1px 0px # 000000; filtr: dropshadow (barva = # 000000, offx = 1, offy = 1);
Podívejme se na výsledek na chvíli.
V tomto bodě jsme provedli všechny základní styly, které potřebujeme; můžete zdarma přidat další nebo přizpůsobené styly. Doporučujeme však, abyste se drželi našeho stanoveného rozměru (výška a šířka) až do konce výuky.
Animace
Stručně řečeno, animace je prezentace pohybujících se objektů. Každý pohyb je definován v časovém rámci. Když tedy pracujeme na animaci, většinou se zabýváme Čas. Bereme v úvahu následující záležitosti:
- Kdy se objekt začne pohybovat?
- Jak dlouho trvá, než se objekt přesune z jednoho bodu do druhého?
- Kdy a jak dlouho má objekt zůstat v daném bodě?
V animaci CSS3 čas lze definovat pomocí @ keyframe syntax. Než však skočíme do této sekce, nejprve určíme počáteční pozici textového pole.
Plánovali jsme, že text začne vpravo, pak se posunete doprava. Tady se nejprve umístíme doprava pomocí vlastnosti CSS3 Transformation.
.marquee p transform: translateX (100%);
Pamatujte, že 100% , které jsme definovali pro náš element odstavce, bylo stejné jako jeho rodič šířka. Totéž platí i zde; element odstavce bude přeloženo vpravo 100% který je v tomto příkladu roven 500px.
Klíčové snímky
@ keyframe Syntaxe může být pro některé lidi trochu záhadná, takže jsme zde vytvořili jednoduchý vizuální průvodce, který vám pomůže snadno pochopit, co se děje v @ keyframe syntax.
Klikněte zde pro zobrazení větší verze.
Celá animace vydrží 20 sekund a je rozdělen do dvou sekvencí 10 sekund každý.
V první sekvenci se první text okamžitě posouvá zprava a na okamžik zůstane viditelný, aby uživatel mohl text přečíst, zatímco druhý text zůstane skrytý. Ve druhé sekvenci se první text výřezu posouvá doleva a druhý text se okamžitě posouvá zprava..
A zde jsou všechny kódy klíčových snímků, které musíme použít pro spuštění animace.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
levý klíčové snímky definují první posloupnost animace, zatímco vlevo-dva klíčové snímky definují druhou sekvenci.
Použití animací na elementy
Aby animace fungovala, nezapomeňte použít animaci na prvek. První posloupnost se použije pro první text nebo v tomto případě první odstavec a druhá posloupnost se použije také pro druhý odstavec.
.marquee p: nth-child (1) animace: levá-20s snadná nekonečno; .marquee p: nth-child (2) animace: vlevo-dva 20s snadnost nekonečno;
Jsme všichni hotovi s naší animací; uvidíme výsledky v prohlížeči.
- Demo
- Stáhněte si zdroj
Bonus
Můžeme také definovat text markýzy, který ho přesune shora dolů nebo naopak, stejně jako v předchozím příspěvku. Zde je návod, jak to udělat; Nahraďte naše výše uvedené animační kódy tímto níže posuňte text směrem dolů:
.marquee p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @keyframes down-two 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Všimněte si, že jsme změnili Osa X na Osa Y a převrátit všechny překlad záporná hodnota kladná a naopak.
Také máme přejmenován na animaci na dolů a dolů-dva, takže musíme znovu použít název animace v elementu odstavce.
.marquee p: nth-child (1) animace: down-one 20s snadné nekonečno; .marquee p: nth-child (2) animation: down-two 20s snadné nekonečno;
Nebo jinak, pokud ho chcete přesunout naproti; zdola nahoru. Zde jsou všechny kódy, které musíte použít:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animace: up-one 20s snadné nekonečno; .marquee.up p: nth-child (2) animace: up-two 20s snadné nekonečno; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes up-two 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- Demo
- Stáhněte si zdroj
Závěr
Navzdory nedostatku aktuální podpory prohlížeče, bude CSS3 Animace, pokud bude provedena správně, nepochybně vyřešit mnoho problémů s použitelností v budoucnu, jako jsme to udělali v tomto příkladu. Pokud potřebujeme pouze krátkou animaci určenou pro moderní prohlížeče, je použití CSS3 Animation pravděpodobně lepší než načítání skriptu jQuery.
Konečně jsme si vědomi toho, že tento článek může být pro některé lidi trochu ohromující, takže pokud máte nějaké dotazy týkající se tohoto článku, můžete jej napsat do sekce Komentáře níže.
