CSS: Cicada Effect: add some wobble to your member avatar lists | Hey Stack! -- The Official Crowdstack Community

Discussions

Ted @ Crowdstack

Follow

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

http://www.lottejackson.com/le...ild-cicada-principle

If you like what they did there, here's some code for you to add to your own Crowdstack 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);
}

Tags: CSS, avatar

Replies sorted oldest to newest

neilHoop.la All-Star Bug Hunter

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.

Pretty ThunderMember

This isn't loading for me, is there another url?

3/2/177:42 PM

Ted @ CrowdstackSocial Strata

The URL works properly for me. I don't have an alternate URL.

3/3/178:21 AM

Add Reply

Sign In To Reply

<div id="{%=id%}" class="reveal-modal small h-alert-modal-popup" data-reveal>
    <div class="first-modal-focus focus-utility-element" tabindex="0" aria-label="Inside Modal"></div>

<h4 id="{%=id%}_title" class="margin-bottom-10 popup-title"></h4>
    <div id="{%=id%}_body" class="margin-bottom-10 popup-body">
        </div>

<ul id="{%=id%}ButtonGroup" class="button-group h-popup-buttons even-button-group even-1">
    <li id="{%=id%}Okay_buttonContainer"><a id="{%=id%}Okay" href="javascript:void(0);" class="button success no-margin-bottom h-alert-modal-ok-button" role="button">OK</a><script type="text/javascript">
        (function() {
            function {%=id%}Okay_click(event, data) {
            {%=id%}Popup.hide();
        }
        
                $('#{%=id%}Okay').on('click', {%=id%}Okay_click);
        })();
    </script></li></ul><a href="javascript:void(0);" class="close-reveal-modal" aria-label="Close Modal">&#215;</a><div class="last-modal-focus focus-utility-element" tabindex="0"></div>
</div>
<script type="text/javascript">
        (function() {
            {%=id%}Popup = new SS.Popup.ModalPopup('{%=id%}');
        })();
    </script>