Rotating forum icon when new posts
#1
This is just a little CSS thing I use on one of my forum, to have a small animation when there are new posts in a forum.
All is in global.css

Start of the file
@-webkit-keyframes rotation {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

class forum_on
.forum_on {
    color: #0094d1;
    opacity: 1;
    -webkit-animation: rotation 2s infinite linear;
}
Nota: I use a fontawesome icon in my forumbit_depth2_forum but it works with pictures too. Didn't test with sprite.
[MyBB 1.8 mods] - Offer me a coffee
Do not ask me help through PM
Reply
#2
It would be nice to attach a preview of the end result.

Nonetheless, thanks for your contribution. Smile
Reply
#3
Here you are: [Image: AZmd8kk.gif]

You can see it in action @ https://forum.raspfr.org
[MyBB 1.8 mods] - Offer me a coffee
Do not ask me help through PM
Reply
#4
Yeah, seems nice.
Reply
#5
how about this is it looking good ?
[Image: cNzqhxX.gif]

ringing like alert bell , by the way thanks for tutotial , it create new ideas
Reply
#6
The ringing bell is more complex (for css):
@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }
  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

.forum_on {
    color: #0094d1;
    opacity: 1;
    -webkit-animation: ring 4s .7s ease-in-out infinite;
}
[MyBB 1.8 mods] - Offer me a coffee
Do not ask me help through PM
Reply
#7
Thank you
Reply
#8
(2020-08-11, 12:47 PM)Crazycat Wrote: This is just a little CSS thing I use on one of my forum, to have a small animation when there are new posts in a forum.
All is in global.css

Start of the file
@-webkit-keyframes rotation {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

class forum_on
.forum_on {
    color: #0094d1;
    opacity: 1;
    -webkit-animation: rotation 2s infinite linear;
}
Nota: I use a fontawesome icon in my forumbit_depth2_forum but it works with pictures too. Didn't test with sprite.
Does not working for me  Confused
Reply
#9
(2021-03-04, 03:21 PM)A_Joycel Wrote: Does not working for me  Confused

Without any url where I can see the trouble, I can only answer "working for me".
[MyBB 1.8 mods] - Offer me a coffee
Do not ask me help through PM
Reply
#10
+1. Thank You.
I will try in my forum Cool
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)