Geavanceerde selectiekader maken met CSS3-animatie
Vandaag gaan we een kijkje nemen “grote tent” nogmaals. We hebben er in onze vorige post over gesproken, dat we het gebruik van de -WebKit-tent eigendom, maar deze keer zullen we dit onderwerp een beetje verder nemen.
In deze post gaan we een maken marquee-like effect met behulp van de CSS3-animatie. Op die manier kunnen we meer functionaliteiten toevoegen die alleen met de -WebKit-tent.
Tenzij u al bekend bent met de CSS3-animatiemodule, raden we u aan de volgende referenties te bekijken voordat u verdergaat met deze documentatie:
- CSS3-animaties - W3School
- CSS-animaties - Mozilla Dev. Netwerk
Merk ook op dat CSS3 Animation op dit moment alleen in Firefox 8+, Chrome 12+ en Safari 5.0+ met de vooraf gedefinieerde versie (-moz- en -webkit-). We zullen echter alleen de officiële versie van W3C zonder het voorvoegsel gebruiken om te voorkomen dat dit artikel wordt overvuld met overbodige codes.
Het aanpakken van het selectiekader
Een van de problemen met een selectiekader is dat de tekst voortdurend in beweging is. Dit gedrag is verstorend voor lezen en de tekst is ook moeilijk te lezen. Deze keer zullen we proberen onze eigen versie van het selectiekader te maken en het gebruiksvriendelijker te maken. Bijvoorbeeld; in plaats van de tekst continu te laten bewegen, we stoppen het wanneer het volledig zichtbaar is, zodat de gebruiker de tekst even kan lezen.
Het storyboard (soort van)
Elke creatie van creativiteit en ontwerp, zoals een logo, een illustratie of een website, begint meestal met een schets. Op het gebied van animatieproductie wordt dit gedaan met een storyboard. Voordat we beginnen met codering, maken we eerst een soort storyboard, om ons te helpen onze animatie te visualiseren.
Zoals je kunt zien op het bovenstaande storyboard, zijn we van plan om slechts twee regels tekst weer te geven, die beide opeenvolgend van rechts naar links worden verplaatst.
Ons storyboard is niet zo ingewikkeld als een storyboard voor echte animatiefilms, maar het punt is: we kunnen nu visualiseren hoe ons selectiekader eruit zal zien.
De HTML-markering
Omdat onze animatie eenvoudig zal zijn, zal de HTML-opmaak ook zo simpel zijn als:
Hoe WordPress Gerelateerde berichten zonder plug-ins toe te voegen
Automatiseer uw Dropbox-bestanden met acties
De basisstijlen
Voordat we met de animatie gaan werken, voegen we enkele basisstijlen toe. Laten we beginnen met het toevoegen van een achtergrondstructuur voor de html element.
html background: url ('... /images/skewed_print.png'); Vervolgens plaatsen we het selectiekader in het midden van het browservenster en voegen we enkele details toe zoals binnenschaduw, achtergrondkleur en randen.
.selectiekader width: 500px; hoogte: 50px; marge: 25 px auto; overloop verborgen; positie: relatief; grens: 1px vast # 000; marge: 25 px auto; achtergrondkleur: # 222; -webkit-border-radius: 5px; grensradius: 5px; -webkit-vak-schaduw: inzet 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); vakschaduw: inzet 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Vervolgens plaatsen we de tekst - die in dit geval is ingepakt in een alineatag - absoluut, en sinds de absoluut positie zal ervoor zorgen dat het element in elkaar klapt, we zullen het element van de breedte moeten definiëren 100% om de breedte van de ouder te dekken.
.selectiekader p positie: absoluut; font-family: Tahoma, Arial, sans-serif; breedte: 100%; hoogte: 100%; marge: 0; regelhoogte: 50px; text-align: center; kleur: #fff; tekstschaduw: 1px 1px 0px # 000000; filter: slagschaduw (kleur = # 000000, offx = 1, offy = 1);
Laten we een tijdje naar het resultaat kijken.
Op dit punt hebben we gedaan met alle basisstijlen die we nodig hebben; je bent vrij om meer stijlen toe te voegen of te personaliseren. Maar we raden u aan om tot het einde van de tutorial met onze opgegeven selectiekaderdimensie (de hoogte en de breedte) vast te houden.
De animatie
Kortom, animatie is een presentatie van bewegende objecten. Elke beweging wordt gedefinieerd in een tijdsbestek. Dus, wanneer we aan animatie werken, hebben we meestal te maken met de Tijd. We houden rekening met zaken als:
- Wanneer begint het object te bewegen??
- Hoe lang duurt het voordat het object van het ene punt naar het andere is verplaatst??
- Wanneer en hoe lang moet het object op een bepaald punt blijven?
In CSS3 Animation, de tijd kan worden gedefinieerd met de @keyframe syntaxis. Maar voordat we in dit gedeelte springen, moeten we eerst de startpositie van de selectiekaderstekst opgeven.
We hebben gepland dat de tekst van rechts begint en vervolgens naar rechts verplaatst. Dus hier zullen we het eerst naar rechts plaatsen met behulp van de CSS3 Transformation-eigenschap.
.selectiekader p transform: translateX (100%);
Herinner de 100% die we hebben gedefinieerd voor ons paragraaf-element was gelijk aan de bovenliggende breedte. Dus hetzelfde zal hier ook worden toegepast; het alinea-element zal zijn vertaalde rechts voor 100% die in dit voorbeeld gelijk is aan 500px.
keyframes
De @keyframe syntaxis kan voor sommige mensen een beetje puzzelen, dus hier hebben we een eenvoudige visuele gids gemaakt om je te helpen begrijpen wat er gebeurt in de @keyframe syntaxis.
Klik hier voor de grotere versie.
De hele animatie duurt ongeveer 20 seconden en is verdeeld in twee opeenvolgende reeksen 10 seconden elk.
In de eerste reeks wordt de eerste tekst direct vanaf rechts ingevoegd en blijft deze tijdelijk zichtbaar om de gebruiker de tekst te laten lezen, terwijl de tweede tekst verborgen blijft. In de tweede reeks wordt de eerste selectiekader naar links geschoven en wordt de tweede tekst direct vanaf de rechterkant ingevoerd.
En hier zijn alle keyframecodes die we moeten toepassen om de animatie uit te voeren.
@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%);
De de linkse keyframes bepalen de eerste reeks van de animatie, terwijl de links twee keyframes definiëren de tweede reeks.
Animatie toepassen op de elementen
Om de animatie te laten werken, vergeet niet om de animatie op het element toe te passen. De eerste reeks wordt toegepast voor de eerste tekst of in dit geval de eerste alinea en de tweede reeks wordt ook toegepast voor de tweede alinea.
.selectiekader p: n-de-kind (1) animatie: left-one 20s ease oneindig; .marquee p: nth-child (2) animatie: links-twee 20s gemak oneindig;
We zijn allemaal klaar met onze animatie; laten we de resultaten in de browser zien.
- demonstratie
- Download de bron
Bonus
We kunnen ook de selectiekaderstekst definiëren om deze van boven naar beneden te verplaatsen of omgekeerd, net zoals we in onze vorige post deden. Hier is hoe het te doen; vervang onze bovenstaande Animatiecodes door deze hieronder naar verplaats de tekst naar beneden:
.selectiekader 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%);
Merk op dat we de X-as naar Y-as en flip alle vertaling negatieve waarde voor positief en vice versa.
We hebben ook hernoemd tot de animatie naar down-één en down-twee, dus we moeten ook de animatienaam opnieuw toepassen in het alinea-element.
.selectiekader p: n-de-kind (1) animatie: één-na-twintig gemakkelijk oneindig; .marquee p: nth-child (2) animation: down-two 20s ease infinite;
Of anders, als u het tegenovergestelde wilt verplaatsen; van onder naar boven. Hier zijn alle codes die u moet toepassen:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animatie: één-en-twintig gemakkelijk oneindig; .marquee.up p: nth-child (2) animatie: up-two 20s ease infinite; @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%);
- demonstratie
- Download de bron
Conclusie
Ondanks het gebrek aan actuele browserondersteuning, zal CSS3 Animation, indien goed uitgevoerd, ongetwijfeld vele bruikbaarheidsproblemen in de toekomst oplossen, zoals we in dit voorbeeld hebben gedaan. Als we alleen een korte animatie nodig hebben die is bedoeld voor moderne browsers, is het gebruik van CSS3-animatie waarschijnlijk beter dan het laden van een jQuery-script.
Ten slotte zijn we ons ervan bewust dat dit artikel voor sommige mensen misschien een beetje overweldigend is, dus als je vragen hebt over dit artikel, kun je dit in de reacties hieronder plaatsen..
