FadeIn BBCode

[Stoker]

FadeIn BBCode

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

Demo:
First part of this post.

BBCode:

Code: Select all

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

Helpline:

Code: Select all

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

Example:

Code: Select all

[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: Select all

.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: Select all

animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;

Save, upload and refresh