kibibit new team member

index.html

<div class="main">
    <div id="logo" class="kb-logo"><span class="letter">k</span><!--
--><div class="shape-animation shape-one to-red">
        <div class="shape shape1"></div>
        <div class="shape shape2"></div>
        </div><!--
--><div class="shape-animation shape-zero">
        <div class="shape shape1"></div>
        <div class="shape shape2"></div>
        </div><!--
--><div class="shape-animation shape-one to-blue middle">
        <div class="shape shape1"></div>
        <div class="shape shape2"></div>
        </div><!--
--><div class="shape-animation shape-zero">
        <div class="shape shape1"></div>
        <div class="shape shape2"></div>
        </div><!--
--><div class="shape-animation shape-one to-yellow">
        <div class="shape shape1"></div>
        <div class="shape shape2"></div>
        </div><span class="letter">t</span><div class="k1b1b0t-mouth-container"><div class="k1b1b0t-mouth">[||||]</div></div>
    </div>
    <div class="login">
        <a class="btn" id="login"><i class="mega-octicon octicon-mark-github"></i>login</a>
    </div>
    <div class="step1">
        Hello, roni!
        Next, we'll set up your GitHub user to work with kibibit
        <a class="btn btn-show" id="next1">COOL!</a>
    </div>
    
    <div class="step2">
        Next, we need to setup your own organization page! yay! ^_^
        You can either forward your subdomain to another site,
        or create a CNAME record to your own server or github page:
        <a class="btn btn-show" id="next2">SWEET!</a>
    </div>
    <div style="color: white; font-size: 26px; font-family: 'Righteous', cursive; flex-shrink: 0; width: 100%; text-align: center; position: absolute; bottom: 5vh;">Welcome</div>
</div>

kibibit-new-team-member.markdown

kibibit new team member

A Pen by neil kalman on CodePen.

License.

script.js

var ELEMENTS = {
    $logo: $('#logo'),
    $main: $('.main'),
    $login: $('#login'),
    $loginStep: $('.login'),
    $firstStep: $('.step1'),
    $step1Next: $('#next1')
};

var CLASSES = {
    onlyWhite: 'no-extra-colors',
    alwaysKT: 'always-k-t',
    squiggly: 'squiggly',
    alwaysSquiggly: 'always-squiggly',
    loader: 'loader',
    turnToName: 'shape-active',
    activeButton: 'toggler-active',
    purpleText: 'purple',
    k1b1b0t: 'k1b1b0t',
    show: 'visible',
    expose: 'expose'
};

setTimeout(changeToKibibit, 2000);
ELEMENTS.$login.click(login);
ELEMENTS.$step1Next.click(subdomain);

// var refreshIntervalId = changeBetween();

function changeToLoader() {
    if (refreshIntervalId) {
        clearInterval(refreshIntervalId);
        refreshIntervalId = null;
        ELEMENTS.$logo.addClass(CLASSES.loader);
    } else {
        refreshIntervalId = changeBetween();
        ELEMENTS.$logo.removeClass(CLASSES.loader);
    }
    ELEMENTS.$logo.removeClass(CLASSES.turnToName);
};

function login() {
    ELEMENTS.$main.addClass('email');
}

function subdomain() {
    ELEMENTS.$main.removeClass('email').addClass('subdomain');
}

function changeToKibibit() {
    ELEMENTS.$logo.addClass(CLASSES.turnToName).delay( 800 )
        .queue(function(next) {
        ELEMENTS.$main.addClass(CLASSES.expose);
        next();
    });
}

// function toggleK1b1b0t(element) {
//     if (element.hasClass(CLASSES.k1b1b0t)) {
//             element
//                 .removeClass(CLASSES.k1b1b0t)
//                 .delay( 800 )
//                 .queue(function(next) {
//                 $(this).addClass(CLASSES.turnToName);
//                 next();
//             });
//         } else {
//             element
//                 .removeClass(CLASSES.turnToName)
//                 .delay( 800 )
//                 .queue(function(next) {
//                 $(this).addClass(CLASSES.k1b1b0t);
//                 next();
//             });
//         }
// }

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

$font-size: 124px;
$font-anim-1: $font-size * 0.7;
$font-anim-2: $font-size * 0.4;
// ELASTIC
$shape-easing-elastic-1: cubic-bezier(0.68, -0.70, 0.265, 1.70);
$shape-easing-elastic-2: cubic-bezier(0.895, 0.03, 0.685, 0.22);

$squiggly-animation-length: 0.34s;
$change-font-size-length: 1s;
$logo-state-transition-length: 250ms;

.step1,
.step2 {
    transition: all 250ms;
    opacity: 0;
    pointer-events: none;
}

.login,
.step1,
.step2 {
    position: absolute;
    font-size: 1.2rem;
    color: white;
    font-family: 'Righteous', cursive;
    left: 0;
    right: 0;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.btn {
    font-family: 'Righteous', cursive;
    font-size: 1.2rem;
    background: white;
    color: black;
    padding: 0.3rem;
    box-shadow: 0.5rem 0.5rem 0 0 rgba(0,0,0,0.75);
    opacity: 0;
    transition: all 300ms ease 300ms;
    cursor: pointer;
    
    &.btn-show {
        opacity: 1;
    }

    i {
        font-size: 1.2rem;
        margin-right: 0.3rem;
    }
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    background: #212121;
    font-size: 16px;
    overflow: hidden;
}

.main {
    height: 300px;;
    width: 100vw;
    font-size: $font-size;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.main.expose.email {
    .login {
        opacity: 0;
        pointer-events: none;
    }
    
    .step1 {
        opacity: 1;
        pointer-events: all;
    }
}

.main.expose.subdomain {
    .login {
        opacity: 0;
        pointer-events: none;
    }
    
    .step2 {
        opacity: 1;
        pointer-events: all;
    }
}

.main.expose {
    .login .btn {
        opacity: 1;
    }
    .kb-logo {
        transform: scale(0.3) translate(0, -610px);
    }
}

// HOW TO USE:
// By default, it works with white text + colors
// OPTIONS:
// DEFAULT - logo is in the state `10101`
// loader - goes to loader animation (remove active class)
// shape-active - turn to the name 'kibibit'
// change `font-size` to change size (treat as if this is text)
// change `color` to effect the logo main color
// no-extra-colors - remove colors of `i`s
// always-k-t - shows k & t letters even when 10101
// purple - main color is purple (bright background option)
// squiggly - make loader animation squiggly
// always-squiggly - make entire logo squiggly
.kb-logo {
    white-space: nowrap;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 1em;
    line-height: 1em;
    font-family: 'Righteous', cursive;
    color: white;
    transition: all 500ms;

    // MODIFIERS

    &.always-k-t .letter {
        opacity: 1 !important;
    }

    &.purple {
        color: lighten(#682A8D, 20%) !important;
    }

    &.no-extra-colors {
        .shape-animation.shape-zero .shape2 {
            border-color: currentColor !important;
            background: transparent !important;
        }
        .shape {
            background: currentColor !important;
        }
    }

    // 10101 with size animation
    &.loader {
        animation: change-font-size $change-font-size-length linear 500ms infinite;
        font-size: 21vw;

        &.squiggly,
        &.always-squiggly {
            animation: change-font-size $change-font-size-length linear 500ms infinite, squiggly-animation-filter $squiggly-animation-length linear infinite;
            font-size: 21vw;
        }

        .shape-animation .shape1,
        .shape-animation .shape2 {
            transition: all $logo-state-transition-length ease-in-out, background $logo-state-transition-length ease-in-out;
        }
    }

    // state: kibibit name
    &.shape-active {
        .shape-animation {
            &.to-red .shape {
                background: #E31B36;
            }

            &.to-blue .shape {
                background: #00A2C9;
            }

            &.to-yellow .shape {
                background: #EEB146;
            }

            &.shape-zero {
                .shape1 {
                    height: 65%;
                }
                .shape2 {
                    height: 0.2625em;
                }
            }
            &.shape-one {
                .shape1 {
                    width: 0.1875em;
                    height: 0.1875em;
                    top: 0;
                    left: -0.025em;
                    right: -0.025em;
                    border-radius: 50%;
                }

                .shape2 {
                    height: 70%;
                }
            }
        }

        .letter {
            opacity: 1;
        }
    }

    // STATE: k1b1b0t
    &.k1b1b0t {
        transform: translate(0, -0.5em);
        .shape-animation.shape-zero {
            // height: auto;
        }

        .shape-animation.shape-zero .shape2 {
            bottom: 0.1em;
            height: 0.1em;
            animation: blink 2s infinite 250ms;
        }

        .shape-one:first-of-type .shape1 {
            left: 0;
            right: -0.06875em;
        }

        .shape-one.middle .shape1 {
            right: -0.06875em;
        }

        .k1b1b0t-mouth-container {
            .k1b1b0t-mouth {
                height: 100%;
            }
        }
    }

    // STATE: 10101. details:
    // * letters are hidden
    .letter {
        opacity: 0;
        transition: all $logo-state-transition-length $shape-easing-elastic-2;
    }

    .k1b1b0t-mouth-container {
        margin-left: 0.11em;
        font-size: 0.5em;
        overflow: hidden;
        top: 100%;
        position: absolute;
        width: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1em;

        .k1b1b0t-mouth {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            height: 0;
            transition: all 500ms ease 300ms;
        }
    }

    // two kind of shapes:
    // 0 - sub-shape1 is hidden, sub-shape2 is the zero
    // 1 - sub-shape1 is the horizontal line, sub-shape2 is the vertical line
    .shape-animation {
        display: inline-block;
        position: relative;
        transition: all $logo-state-transition-length ease-in-out;

        &.shape-zero {
            margin: 0 0.03125em;
            display: inline-block;
            height: 0.75em;
            width: 0.5625em;
            position: relative;

            .shape1 {
                width: 0.14375em;
                height: 0;
                background: currentColor;
                z-index: 500;
                position: absolute;
                bottom: 35%;
                left: 0;
            }

            .shape2 {
                width: 0.25em;
                height: 0.40625em;
                background: transparent;
                position: absolute;
                bottom: 0;
                left: 0;
                border-radius: 0.28125em;
                border: 0.15em solid currentColor;
            }
        }

        &.shape-one {
            margin: 0 0.0625em;
            display: inline-block;
            height: 0.7625em;
            width: 0.14375em;

            .shape1 {
                background: currentColor;
                position: absolute;
                top: 0.05625em;
                right: 0;
                height: 0.15em;
                left: -0.06875em;
            }

            .shape2 {
                width: 0.14375em;
                height: 92.5%;
                background: currentColor;
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }

        .shape1,
        .shape2 {
            transition: all $logo-state-transition-length $shape-easing-elastic-1, background $logo-state-transition-length $shape-easing-elastic-2;
        }
    }
}

.kg-hidden {
    display: none;
}

.always-squiggly {
    -webkit-animation: squiggly-animation-filter $squiggly-animation-length linear infinite;
    animation: squiggly-animation-filter $squiggly-animation-length linear infinite;
}

@-webkit-keyframes squiggly-animation-filter {
    0% {
        -webkit-filter: url("#squiggly-0");
        filter: url("#squiggly-0");
    }
    25% {
        -webkit-filter: url("#squiggly-1");
        filter: url("#squiggly-1");
    }
    50% {
        -webkit-filter: url("#squiggly-2");
        filter: url("#squiggly-2");
    }
    75% {
        -webkit-filter: url("#squiggly-3");
        filter: url("#squiggly-3");
    }
    100% {
        -webkit-filter: url("#squiggly-4");
        filter: url("#squiggly-4");
    }
}
@-webkit-keyframes change-font-size {
    0% {
        font-size: $font-anim-1;
    }
    10% {
        font-size: $font-anim-1;
    }
    40% {
        font-size: $font-anim-2;
    }
    60% {
        font-size: $font-anim-2;
    }
    100% {
        font-size: $font-anim-1;
    }
}

@-webkit-keyframes blink {
    0% {
        height: 0.1em;
    }
    45% {
        height: 0.1em;
    }
    50% {
        height: 0;
    }
    55% {
        height: 0.1em;
    }
    100% {
        height: 0.1em;
    }
}

@-webkit-keyframes to-small {
    100% {
        font-size: 1rem;
    }
}

styles

<link href="https://fonts.googleapis.com/css?family=Fredoka+One|Righteous" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" rel="stylesheet" />