Cicada Effect: add some wobble to your member avatar lists


I came across this article today that described an effect that one site uses to make their member avatars more distinctive looking:

If you like what they did there, here's some code for you to add to your own site that adds the "Cicada Effect" on your Members Directory and in widgets that displays grids of user avatars:

/* add blobbiness to member directory avatars */
#membersPage .h-member-box:nth-child(2n+1) img.member-avatar,
.h-members-grid:nth-child(2n+1) img.member-avatar,
.widget-box:nth-child(2n+1) img.avatar-list {
border-top-left-radius: 59%;
border-top-right-radius: 52%;
border-bottom-left-radius: 59%;
border-bottom-right-radius: 56%;
transform: rotate(-6deg);
#membersPage .h-member-box:nth-child(2n+1) img.member-avatar:hover,
.h-members-grid:nth-child(2n+1) img.member-avatar:hover,
.widget-box:nth-child(2n+1) img.avatar-list:hover {
border-top-left-radius: 51%;
border-top-right-radius: 67%;
border-bottom-left-radius: 64%;
border-bottom-right-radius: 56%;
transform: rotate(-4deg);

Original Post

Activity Stream

That's a fun effect.

I wonder...would be pretty cool if when 'blobbing' on roll over a text also appeared saying, "Member Since 2010."  Or "likes cats" (i.e. something from their profile's "blob field.") Would be a fun recognition.

Add Reply