FadeIn BBCode

Mixed forum with code snippets
Guides and styles
User avatar
Stoker
Site Admin
Site Admin
Posts: 3,846
Joined: 12 May 2008, 21:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark

FadeIn BBCode

Post by 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: Select all

<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
~ The greatest achievement in life is to inspire ~
Regards Stoker