De PHPhulp kroeg
inline animation
Kan je animatie via inline style maken? Indien ja graag hoe.
Ik zou graag een animatie style toevoegen aan ckeditor en dat werkt met inline style.
Jan
Mijn toevoeging in css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.kleurlicht {
animation: blinker 1s linear infinite;
animation: regenboogAni 1s linear infinite;
text-align:center;
text-transform:uppercase;
}
@keyframes blinker {
50% { opacity: 0.0; }
}
@keyframes regenboogAni {
0% {background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);}
14% {background: -webkit-linear-gradient(left, violet, red, orange, yellow, green, blue, indigo);}
28% {background: -webkit-linear-gradient(left, indigo, violet, red, orange, yellow, green, blue);}
43% {background: -webkit-linear-gradient(left, blue, indigo, violet, red, orange, yellow, green);}
57% {background: -webkit-linear-gradient(left, green, blue, indigo, violet, red, orange, yellow);}
71% {background: -webkit-linear-gradient(left, yellow, green, blue, indigo, violet, red, orange);}
86% {background: -webkit-linear-gradient(left, orange, yellow, green, blue, indigo, violet, red);}
100% {background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);}
}
animation: blinker 1s linear infinite;
animation: regenboogAni 1s linear infinite;
text-align:center;
text-transform:uppercase;
}
@keyframes blinker {
50% { opacity: 0.0; }
}
@keyframes regenboogAni {
0% {background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);}
14% {background: -webkit-linear-gradient(left, violet, red, orange, yellow, green, blue, indigo);}
28% {background: -webkit-linear-gradient(left, indigo, violet, red, orange, yellow, green, blue);}
43% {background: -webkit-linear-gradient(left, blue, indigo, violet, red, orange, yellow, green);}
57% {background: -webkit-linear-gradient(left, green, blue, indigo, violet, red, orange, yellow);}
71% {background: -webkit-linear-gradient(left, yellow, green, blue, indigo, violet, red, orange);}
86% {background: -webkit-linear-gradient(left, orange, yellow, green, blue, indigo, violet, red);}
100% {background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);}
}
Quote:
No. since the animation is not declared in the element, it's only called upon it. It's like trying to add methods into an object instead of to a class. Not possible, sorry ;)
Sowieso is in-line styling toch iets wat je moet vermijden.
Nadeel is dat het in de editor niet te zien is maar toch in het resultaat.
Ik heb geen keuze dan werken met een oplossing zoals cke omdat de teksten bewerkbaar moeten zijn en inbrengbaar door digileken.
Toch bedankt om mee te denken.
Jan
Uiteraard zet je erbij dat dit 'enkel bedoeld is voor gebruikers met CSS-kennis'. In CKeditor weet ik dat je ook ID's en classes kan toevoegen aan elementen.
Kun je het niet zomaken dat ze (de digileken) sterretjes om de tekst zetten die moet 'blinken'.
Code (php)
1
Bla bla bla. Dit is de tekst die de digileken invoeren. ***Deze tekst blinkt.*** En deze tekst is weer normaal.
Op het moment dat je de tekst toont, vervang je de eerste *** door: <span class="kleurlicht">
En de tweede *** vervang je door </span>
Jan R op 29/10/2021 07:23:44:
Dat is dus een probleem ze kunnen nog niet deftig werken met Windows laat staan html/css
Dat is toch niet verplicht. Dan moeten ze die velden niet invullen. :-P
Dan verbergt je dit veld tot ze naar een 'advanced lay-out' overklikken. Of je verwerkt dit in een rechtensysteem. Maar UBB vind ik ook wel een handige oplossing. Ikzelf gebruik NBBC. Je kan zelf ook uitgebreid en eenvoudig tags maken.
Gewijzigd op 29/10/2021 13:22:50 door - Ariën -