1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Animated online indicator (looks best on rounded avatars) 1.1

Some nice pulsating CSS3 animation

  1. zagorskey

    zagorskey Active Member

    zagorskey submitted a new resource:

    [1.4] Animated online indicator (looks best on rounded avatars) - Some nice pulsating CSS3 animation

    Read more about this resource...
     
    DEZero likes this.
  2. RoldanLT

    RoldanLT Well-Known Member

    WOW!
    This would be great for my Drift Style ;)
     
  3. zagorskey

    zagorskey Active Member

    I definitely agree. :)
     
  4. Collapsible Myth

    Collapsible Myth Active Member

    How much of a load does it put on the CPU? Is it something that wouldn't bring anything down on a shared server?
     
  5. RoldanLT

    RoldanLT Well-Known Member

    No, The site visitor will suffer it I think :D
     
    Collapsible Myth likes this.
  6. Andy.N

    Andy.N Well-Known Member

    Really nice. Can it be done to remove the animation, just keep the CSS.
     
  7. Eagle

    Eagle Well-Known Member

    Very nice. Thanks.
     
  8. zagorskey

    zagorskey Active Member

    The page tab varies 7%-12% on a quad core CPU which is acceptable. You can experiment with -webkit-transform: translateZ(0) which would fool the browser into using the GPU as well when rendering.

    Sure. Just wrap the keyframes animation in a CSS comment or simply delete those lines.
     
  9. Andy.N

    Andy.N Well-Known Member

    Great.
    On mobile view, the dot is now shown however.
     
  10. Pinn

    Pinn Active Member

    Can you an Icon add? zb: status_online.gif
     
    Lemminator likes this.
  11. zagorskey

    zagorskey Active Member

    Use this for .messageUserBlock div.avatarHolder .onlineMarker:before

    Code:
    .messageUserBlock div.avatarHolder .onlineMarker:before
    {
        content: '✔';
        color:#fff;
        font-size:10px;
        position: absolute;
        width: 10px;
        height: 10px;
        margin: 3px 0 0 3px;
        background:-webkit-linear-gradient(#75c088 0%,#098128 100%);
        background:linear-gradient(#75c088 0%,#098128 100%);
        border-color: #7fb900;
        border-radius: 50%
    }
    You can experiment a bit to achieve the most suitable effect for your needs.
     
    Lemminator and Pinn like this.
  12. RoldanLT

    RoldanLT Well-Known Member

    How about using FontAwesome?
    :)
     
  13. zagorskey

    zagorskey Active Member

    I usually avoid using FontAwesome and build a custom icon font with Fontello instead. That way one can take advantage of a .woff with a smaller size and no unnecessary icons that they'd never use. :)
     
    RoldanLT likes this.
  14. TheBigK

    TheBigK Well-Known Member

    What if a transparent, animated gif is used? o_O
     
  15. zagorskey

    zagorskey Active Member

    It's possible but the animation wouldn't be so smooth, it would require an additional http request and would look terrible when zoomed in on retina screens.
     
    TheBigK likes this.
  16. rainmotorsports

    rainmotorsports Well-Known Member

    Exactly thats what I came here to post actually was to suggest the notice be changed to say its the end user's cpu load that will increase.
     
    Collapsible Myth likes this.
  17. zagorskey

    zagorskey Active Member

    Done.
     
    rainmotorsports likes this.
  18. rainmotorsports

    rainmotorsports Well-Known Member

    Nice! More for your benefit. Less questions, more people willing to try your work when they fully understand.
     
  19. zagorskey

    zagorskey Active Member

    I completely agree. :)
     
    Collapsible Myth likes this.
  20. Votick

    Votick Member

    Can this be implemented on a 1.3 Install?
     

Share This Page