Animated Avatar Overlays

[Nyxira]

I looked into this a bit, but I couldn't really find anything that I could figure out how to make it work for avatars. 

So if one were to make it so that the avatars on the mini-profiles had a glitchy animated overlay, how would one go about doing that?

[Nyxira]

And I realize that one could just make animated avatars, but that's harder to regulate for every person's avatar in a forum (kind of my last resort, that).

[Kami]

Jul 20, 2022 17:41:19 GMT -8 Nyxira said:

I looked into this a bit, but I couldn't really find anything that I could figure out how to make it work for avatars.

So if one were to make it so that the avatars on the mini-profiles had a glitchy animated overlay, how would one go about doing that?

Jul 22, 2022 19:33:27 GMT -8 Nyxira said:

And I realize that one could just make animated avatars, but that's harder to regulate for every person's avatar in a forum (kind of my last resort, that).

This is probably the easiest option, of the ones that exist: codepen.io/AlainBarrios/pen/OEOKgm

However, I would like to note that doing this for all avatars on your forum would be a horrific user experience and would present a tangible health risk for any user (member or guest) that has epilepsy, motion sickness, or any photosensitivity. As both a photosensitive user and a UX/UI professional, I would really really really x a million encourage you to find another use for this effect that will present less risk (such as using it on a single, non-repeating / non-plentiful image or text selection), or not at all.

[Nyxira]

Jul 23, 2022 9:21:21 GMT -8 Kami said:

This is probably the easiest option, of the ones that exist: codepen.io/AlainBarrios/pen/OEOKgm

However, I would like to note that doing this for all avatars on your forum would be a horrific user experience and would present a tangible health risk for any user (member or guest) that has epilepsy, motion sickness, or any photosensitivity. As both a photosensitive user and a UX/UI professional, I would really really really x a million encourage you to find another use for this effect that will present less risk (such as using it on a single, non-repeating / non-plentiful image or text selection), or not at all.

Have you not seen my buttons? (this particular effect that the example you provided uses is a bit much, though)

However, I have also previously found this option. It is not easy at all because I cannot for the life of me figure out how that could be applied to the avatars.

[Kami]

Jul 25, 2022 18:33:23 GMT -8 Nyxira said:

Jul 23, 2022 9:21:21 GMT -8 Kami said:

This is probably the easiest option, of the ones that exist: codepen.io/AlainBarrios/pen/OEOKgm

However, I would like to note that doing this for all avatars on your forum would be a horrific user experience and would present a tangible health risk for any user (member or guest) that has epilepsy, motion sickness, or any photosensitivity. As both a photosensitive user and a UX/UI professional, I would really really really x a million encourage you to find another use for this effect that will present less risk (such as using it on a single, non-repeating / non-plentiful image or text selection), or not at all.

Have you not seen my buttons? (this particular effect that the example you provided uses is a bit much, though)

However, I have also previously found this option. It is not easy at all because I cannot for the life of me figure out how that could be applied to the avatars.

• I did see your menu buttons; I do not personally care for them, but it is a good example of a use that is mild and probably acceptable to most users. Just for context, the reason I advise against avatars is because they are a) bigger than the menu buttons, and b) occur more frequently on a page than the menu buttons do. Ultimately it's your choice! There's no law or rule or anything that says you can't do this.

• As far as how to apply to the avatars, having a re-read of the code it looks like it makes use of a javascript library that PB doesn't support, sorry. I did a little bit more digging and I found [this]; you can drop the portion that say "JS" into a JS container in a new plugin, add the class "glitch-img" to the avatar HTML in the mini-profile layout templates, find the CSS portion that starts with /*glitch elem must have absolute position*/, and paste into your CSS. It should work, though you might need to make minor tweaks to suit your tastes.

[Nyxira]

Okay, I'll give it a shot, thanks. Alternatively could just do the glitch look on mouseover, but I'm not really sure of anything yet.

At this point I am not particularly worried about an abundance of photosensitive users, as this is not intended to be an open forum but more of a private one. Also because the visuals are styled with a more retro sci-fi look that shouldn't be any more sickening than watching an old VHS home video.

[Kami]

Jul 26, 2022 12:46:50 GMT -8 Nyxira said:

Okay, I'll give it a shot, thanks. Alternatively could just do the glitch look on mouseover, but I'm not really sure of anything yet.

At this point I am not particularly worried about an abundance of photosensitive users, as this is not intended to be an open forum but more of a private one. Also because the visuals are styled with a more retro sci-fi look that shouldn't be any more sickening than watching an old VHS home video.

Yeah if you know your audience then I wouldn't be too worried about it; it was just a recommendation, not a must.

If you run into any problems sorting out what parts go where, let me know! I still have your URL so I can pop over as needed to check things out.

[Nyxira]

Jul 26, 2022 12:59:20 GMT -8 Kami said:

Yeah if you know your audience then I wouldn't be too worried about it; it was just a recommendation, not a must.

If you run into any problems sorting out what parts go where, let me know! I still have your URL so I can pop over as needed to check things out.

Okay, thanks.

I think the problem I'm having is that all of these tutorials are specifically designed for consistent individual image instead of something like an avatar that varies. So might just be better to somehow do like... an overlay of the glitch lines animated over a transparent background?; How does one fix something into position over something that varies in its own placement, though?

[Kami]

Jul 26, 2022 13:15:58 GMT -8 Nyxira said:

Jul 26, 2022 12:59:20 GMT -8 Kami said:

Yeah if you know your audience then I wouldn't be too worried about it; it was just a recommendation, not a must.

If you run into any problems sorting out what parts go where, let me know! I still have your URL so I can pop over as needed to check things out.

Okay, thanks.

I think the problem I'm having is that all of these tutorials are specifically designed for consistent individual image instead of something like an avatar that varies. So might just be better to somehow do like... an overlay of the glitch lines animated over a transparent background?; How does one fix something into position over something that varies in its own placement, though?

You could use the ::before pseudo element CSS to overlay the image on top of the avatar class. So (imaginary classes as I'm not looking at a forum right now) something like:

<div class="avatar">

then the CSS would be:

.avatar::before {
  background: url('glitch.gif');
  z-index: 5;
}

You'd have to play around with it a bit to get the alignment right but adding a positive z-index should overlay it. you just have to be sure that the glitch gif is transparent.

[Nyxira]

Gotcha. I'll see what I can do, then, thanks. ^^

[Kami]

Jul 26, 2022 18:55:19 GMT -8 Nyxira said:

Gotcha. I'll see what I can do, then, thanks. ^^

here if you need me! :)

[Nyxira]

Much appreciated ^^