Quantcast
Channel: PhpBB3 BBCodes
Viewing all articles
Browse latest Browse all 89

Snippets • FadeIn BBCode

$
0
0
FadeIn BBCode

The FadeIn BBCode let you use a bbcode that will fadein your post.

Demo:
First part of this post.
BBCode:

Code:

[fadein]{TEXT}[/ticker][/fadein]HTML: [code]<div class="fade-in-text">{TEXT}</div>
Helpline:

Code:

Fadein: [fadein]Your text here[/fadein]
Example:

Code:

[fadein]Lorem ipsum dolor sit amet, consectetuer adipiscing elit.[/fadein]
Now, to make this work we need some css.
You can add it to the bottom of your styles colours.css

Code:

.fade-in-text {  animation: fadeIn 5s;  -webkit-animation: fadeIn 5s;  -moz-animation: fadeIn 5s;  -o-animation: fadeIn 5s;  -ms-animation: fadeIn 5s;}@keyframes fadeIn {  0% { opacity: 0; }  100% { opacity: 1; }}@-moz-keyframes fadeIn {  0% { opacity: 0; }  100% { opacity: 1; }}@-webkit-keyframes fadeIn {  0% { opacity: 0; }  100% { opacity: 1; }}@-o-keyframes fadeIn {  0% { opacity: 0; }  100% { opacity: 1; }}@-ms-keyframes fadeIn {  0% { opacity: 0; }  100% { opacity: 1; }}
This piece controls the speed:

Code:

animation: fadeIn 5s;  -webkit-animation: fadeIn 5s;  -moz-animation: fadeIn 5s;  -o-animation: fadeIn 5s;  -ms-animation: fadeIn 5s;
Save, upload and refresh

Statistics: Posted by Stoker — Yesterday, 23:12



Viewing all articles
Browse latest Browse all 89

Trending Articles