Via de oogverblindende post over transitions op Trent Walton’s blog ben ik terecht gekomen op de uiterst bruikbare uitleg van Net Tuts over CSS3 transitions. Hoe Trent zijn header zo heeft geanimeerd (een animerende div met een semi transparante achtergrond?) ben ik nog niet achter.
Hover this… (en de code)
a{
color: #fe2b76;
-webkit-transition:color 1s ease-in;
-moz-transition:color 1s ease-in;
-o-transition:color 1s ease-in;
transition:color 1s ease-in;
}
color: #fe2b76;
-webkit-transition:color 1s ease-in;
-moz-transition:color 1s ease-in;
-o-transition:color 1s ease-in;
transition:color 1s ease-in;
}
a:hover{
color: #88083a;
}
Let op: De -webkit toevoeging werkt alleen op Chrome en Safari vandaar deze workaround die meeste browsers zullen ondersteunen.
Bron:
net.tutsplus.com: css-fundametals-css-3-transitions
trentwalton.com: css3-in-transition
Hey,
uitleggen hoe je een geanimeerde tekst maakt in een comment is wat lastig, maar ik zal het proberen.
Volledig met css is waarschijnlijk wel mogelijk, maar met twee plaatjes is het een stuk sneller.
Plaatje 1 : zie het als papier waar je met een schaar de tekst eruit knipt en vervolgens dat a4 papier bewaard. Leg je dit op een blauw papier dan heb je dus blauwe tekst, op groen papier groene tekst. enfin.
Plaatje 2 : Ik heb om het te testen even een simpele gradient van 2 kleuren gebruikt dus bijv van geel naar rood. (te maken met photoshop)
Dan de html :
De bijbehorende css :
.text-effect {
width : 999px;
height : 380px;
background: #fff url(gradient.png) repeat;
-webkit-animation-name: ‘text-effect’;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes ‘text-effect’ {
0% { background-position: left bottom;}
50% { background-position: right bottom; }
100% { background-position: left bottom; }
}
width en height moet je meegeven als er een randje verschijnt, weet niet precies hoe het komt maar zet in elk geval een width die 10px kleiner is dan de breedte van het plaatje en hoogte 10px kleiner dan de hoogte van het plaatje.
vervolgens komt het echte werk, de achtergrond is nu een gradient (maak deze langer dan de tekst dus als de tekst 500px breed is maak het plaatje iets van 1500px)
met animation-name : ‘text-effect’ kunnen we de keyframes later regelen. duration is hoe lang het duurt, hoe subtieler hoe langer je de duration maakt. Iteration op infinite betekent voor altijd, je kunt ook gewoon 10 invullen.
Dan komt de keyframes functie die zorgt voor het animeren. op 0% staat de achtergrond dus links en omdat onze tekst maar 500px breed is en de gradient 1500px zien we alleen het eerste deel van de gradient. Vervolgens gaan we naar 50% (dus nu na 5 seconden) en is het rechter deel van de gradient te zien. dus de gradient van 1000 tot 1500 pixels. Om van 0 tot 50% te gaan schuift de gradient dus als het ware achter je tekst langs en lijkt het geanimeerd.
Om het tot een mooie oneindige loop te maken gaat het van 50% naar 100% in omgekeerde richting (dus van 5 naar 10 seconde van rechts naar links).
Dus wat ik heb is iets anders dan Trent walton, maar hij krijgt natuurlijk gewoon de credits.
Veel plezier,
Fabiën Tesselaar (tessmore)
Oh de html wordt niet ge-escaped dus hier nogmaals
<div class=”text-effect”>
<img src=”tekst_sjabloon.png” alt=”titel”>
</div>
Effect werkt alleen voor -webkit- browsers. (zover ik weet) maar het is wel leuk en alles.
Hi Fabiën,
Wat cool, dank je wel voor de geweldige uitleg!