CSS Xbox One Achievement

3/23/2016 - 6:07 PM

<link href="http://homeserver.djekl.co.uk/xbox-font/style.css" rel="stylesheet" />

style.scss

$xbox-green: #107C10;

html, body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #333;
    color: #fff;
}

.achievement-banner {
    position: absolute;
    bottom: 10px;
    // bottom: 50%;
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: transparent;
    overflow: hidden;

    &.animated {
        animation: mainAnimationFrames linear 7.5s;
        animation-delay: 0.5s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;
        animation-fill-mode:forwards; /*when the spec is finished*/
    }

    &-big {
        @extend .achievement-banner;
        width: 600px;
        left: calc(50% - 300px);
        background-color: $xbox-green;
    }

    .achievement-loader {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50px;
        background-color: lighten($xbox-green, 5%);

        animation: achievementLoaderAnimationFrames ease 9s;
        animation-iteration-count: 1;
        transform: scaleX(0.00) scaleY(0.00);
        transform-origin: 50% 50%;
        animation-fill-mode:forwards; /*when the spec is finished*/

        &:nth-of-type(1) {
            background-color: lighten($xbox-green, 5%);
            animation-duration: 10s;
        }

        &:nth-of-type(2) {
            background-color: $xbox-green;
            animation-delay: 0.25s;
            animation-duration: 9.5s;
        }

        &:nth-of-type(3) {
            background-color: darken($xbox-green, 5%);
            animation-delay: 0.5s;
            animation-duration: 9s;
        }

        &:nth-of-type(4) {
            background-color: $xbox-green;
            animation-delay: 0.75s;
            animation-duration: 8.5s;
        }

        &:nth-of-type(5) {
            background-color: lighten($xbox-green, 5%);
            animation-delay: 1s;
            animation-duration: 8s;
        }
    }

    .achievement-trophy {
        @extend .achievement-loader;
        background-color: lighten($xbox-green, 5%);
        animation: xboxLogoAnimationFrames ease-out 7.5s;
        animation-delay: 1s;
        color: #fff;
        background-color: transparent !important;

        &:before {
            font-size: 3em;
            top: 32px;
            left: 20px;
            position: absolute;
        }
    }

    .achievement-text {
        font-size: 2em;
        position: absolute;
        width: (600px - 125px);
        top: calc((100px - 50%) - 1.6em);
        left: 105px;
        text-align: center;
        white-space: pre-wrap;
        word-wrap: break-word;
        color: #fff;

        .achievement-notification {
            position: relative;
            width: 100%;
            animation: achievementTextAnimationFrames linear 2s;
            animation-delay: 2s;
            top: -13px;
            opacity: 0;
            top: -77px;
        }

        .achievement-name {
            // display: none;
            position: absolute;
            width: 100%;
            // width: (600px - 65px);
            // text-align: left;
            font-size: .8em;
            top: 75px;

            animation: achievementNameAnimationFrames linear 4s;
            animation-delay: 3s;
            opacity: 0;

            .xbox-gamerscore {
                position: relative;
                top: 5px;
            }
        }
    }
}

@keyframes achievementLoaderAnimationFrames {
    0% {
        transform: scaleX(0.00) scaleY(0.00);
    }

    10% {
        transform: scaleX(1.00) scaleY(1.00);
    }

    90% {
        transform: scaleX(1.00) scaleY(1.00);
    }

    100% {
        transform: scaleX(0.00) scaleY(0.00);
    }
}

@keyframes xboxLogoAnimationFrames {
    0% {
        background-color: transparent !important;
        transform: scaleX(0.00) scaleY(0.00);
    }

    5% {
        background-color: transparent !important;
        transform: scaleX(1.20) scaleY(1.20);
    }

    10% {
        background-color: transparent !important;
        transform: scaleX(1.00) scaleY(1.00);
    }

    90% {
        background-color: transparent !important;
        transform: scaleX(1.00) scaleY(1.00);
    }

    95% {
        background-color: transparent !important;
        transform: scaleX(1.20) scaleY(1.20);
    }

    100% {
        background-color: transparent !important;
        transform: scaleX(0.00) scaleY(0.00);
    }
}

@keyframes achievementTextAnimationFrames {
    0% {
        opacity: 0;
        top: -77px;
    }

    40% {
        opacity: 1;
    }

    55% {
        opacity: 1;
        top: -77px;
        right: 0;
    }

    100% {
        opacity: 0;
        top: -138px;
    }
}

@keyframes achievementNameAnimationFrames {
    0% {
        opacity: 0;
        top: 75px;
    }

    20% {
        opacity: 1;
        top: 9px;
    }

    90% {
        opacity: 1;
        top: 9px;
        right: 0;
    }

    100% {
        opacity: 0;
        top: 9px;
        // right: -495px;
        // top: -55px;
    }
}

@keyframes mainAnimationFrames {
    0% {
        // transform: scaleX(0.00) scaleY(0.00);
    }

    10% {
        background-color: $xbox-green;
        // transform: scaleX(0.00) scaleY(0.00);
    }

    15% {
        // transform: scaleX(1.00) scaleY(1.00);
        width: 100px;
        height: 100px;
        left: calc(50% - 50px);
    }

    20% {
        width: 100px;
        height: 100px;
        left: calc(50% - 50px);
    }

    30% {
        width: 600px;
        left: calc(50% - 300px);
    }

    80% {
        width: 600px;
        left: calc(50% - 300px);
    }

    90% {
        width: 100px;
        height: 100px;
        left: calc(50% - 50px);
        background-color: $xbox-green;
    }

    95% {
        // transform: scaleX(1.00) scaleY(1.00);
        width: 100px;
        height: 100px;
        left: calc(50% - 50px);
        background-color: transparent;
    }

    100% {
        // transform: scaleX(0.00) scaleY(0.00);
    }
}

style.css

html, body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: transparent;
  color: #fff;
}

.achievement-banner, .achievement-banner-big {
  position: absolute;
  bottom: 10px;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: transparent;
  overflow: hidden;
}
.achievement-banner.animated, .animated.achievement-banner-big {
  -webkit-animation: mainAnimationFrames linear 7.5s;
          animation: mainAnimationFrames linear 7.5s;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  /*when the spec is finished*/
}
.achievement-banner-big {
  width: 600px;
  left: calc(50% - 300px);
  background-color: #107C10;
}
.achievement-banner .achievement-loader, .achievement-banner-big .achievement-loader, .achievement-banner .achievement-trophy, .achievement-banner-big .achievement-trophy {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50px;
  background-color: #139313;
  -webkit-animation: achievementLoaderAnimationFrames ease 9s;
          animation: achievementLoaderAnimationFrames ease 9s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transform: scaleX(0) scaleY(0);
          transform: scaleX(0) scaleY(0);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  /*when the spec is finished*/
}
.achievement-banner .achievement-loader:nth-of-type(1), .achievement-banner-big .achievement-loader:nth-of-type(1), .achievement-banner .achievement-trophy:nth-of-type(1), .achievement-banner-big .achievement-trophy:nth-of-type(1) {
  background-color: #139313;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}
.achievement-banner .achievement-loader:nth-of-type(2), .achievement-banner-big .achievement-loader:nth-of-type(2), .achievement-banner .achievement-trophy:nth-of-type(2), .achievement-banner-big .achievement-trophy:nth-of-type(2) {
  background-color: #107C10;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
  -webkit-animation-duration: 9.5s;
          animation-duration: 9.5s;
}
.achievement-banner .achievement-loader:nth-of-type(3), .achievement-banner-big .achievement-loader:nth-of-type(3), .achievement-banner .achievement-trophy:nth-of-type(3), .achievement-banner-big .achievement-trophy:nth-of-type(3) {
  background-color: #0d650d;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.achievement-banner .achievement-loader:nth-of-type(4), .achievement-banner-big .achievement-loader:nth-of-type(4), .achievement-banner .achievement-trophy:nth-of-type(4), .achievement-banner-big .achievement-trophy:nth-of-type(4) {
  background-color: #107C10;
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
  -webkit-animation-duration: 8.5s;
          animation-duration: 8.5s;
}
.achievement-banner .achievement-loader:nth-of-type(5), .achievement-banner-big .achievement-loader:nth-of-type(5), .achievement-banner .achievement-trophy:nth-of-type(5), .achievement-banner-big .achievement-trophy:nth-of-type(5) {
  background-color: #139313;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.achievement-banner .achievement-trophy, .achievement-banner-big .achievement-trophy {
  background-color: #139313;
  -webkit-animation: xboxLogoAnimationFrames ease-out 7.5s;
          animation: xboxLogoAnimationFrames ease-out 7.5s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  color: #fff;
  background-color: transparent !important;
}
.achievement-banner .achievement-trophy:before, .achievement-banner-big .achievement-trophy:before {
  font-size: 3em;
  top: 32px;
  left: 20px;
  position: absolute;
}
.achievement-banner .achievement-text, .achievement-banner-big .achievement-text {
  font-size: 2em;
  position: absolute;
  width: 475px;
  top: calc((100px - 50%) - 1.6em);
  left: 105px;
  text-align: center;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: #fff;
}
.achievement-banner .achievement-text .achievement-notification, .achievement-banner-big .achievement-text .achievement-notification {
  position: relative;
  width: 100%;
  -webkit-animation: achievementTextAnimationFrames linear 2s;
          animation: achievementTextAnimationFrames linear 2s;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  top: -13px;
  opacity: 0;
  top: -77px;
}
.achievement-banner .achievement-text .achievement-name, .achievement-banner-big .achievement-text .achievement-name {
  position: absolute;
  width: 100%;
  font-size: .8em;
  top: 75px;
  -webkit-animation: achievementNameAnimationFrames linear 4s;
          animation: achievementNameAnimationFrames linear 4s;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  opacity: 0;
}
.achievement-banner .achievement-text .achievement-name .xbox-gamerscore, .achievement-banner-big .achievement-text .achievement-name .xbox-gamerscore {
  position: relative;
  top: 5px;
}

@-webkit-keyframes achievementLoaderAnimationFrames {
  0% {
    -webkit-transform: scaleX(0) scaleY(0);
            transform: scaleX(0) scaleY(0);
  }
  10% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  90% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  100% {
    -webkit-transform: scaleX(0) scaleY(0);
            transform: scaleX(0) scaleY(0);
  }
}

@keyframes achievementLoaderAnimationFrames {
  0% {
    -webkit-transform: scaleX(0) scaleY(0);
            transform: scaleX(0) scaleY(0);
  }
  10% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  90% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  100% {
    -webkit-transform: scaleX(0) scaleY(0);
            transform: scaleX(0) scaleY(0);
  }
}
@-webkit-keyframes xboxLogoAnimationFrames {
  0% {
    background-color: transparent !important;
    -webkit-transform: scaleX(0) scaleY(0);
            transform: scaleX(0) scaleY(0);
  }
  5% {
    background-color: transparent !important;
    -webkit-transform: scaleX(1.2) scaleY(1.2);
            transform: scaleX(1.2) scaleY(1.2);
  }
  10% {
    background-color: transparent !important;
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  90% {
    background-color: transparent !important;
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  95% {
    background-color: transparent !important;
    -webkit-transform: scaleX(1.2) scaleY(1.2);
            transform: scaleX(1.2) scaleY(1.2);
  }
  100% {
    background-color: transparent !important;
    -webkit-transform: scaleX(0) scaleY(0);
            transform: scaleX(0) scaleY(0);
  }
}
@keyframes xboxLogoAnimationFrames {
  0% {
    background-color: transparent !important;
    -webkit-transform: scaleX(0) scaleY(0);
            transform: scaleX(0) scaleY(0);
  }
  5% {
    background-color: transparent !important;
    -webkit-transform: scaleX(1.2) scaleY(1.2);
            transform: scaleX(1.2) scaleY(1.2);
  }
  10% {
    background-color: transparent !important;
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  90% {
    background-color: transparent !important;
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  95% {
    background-color: transparent !important;
    -webkit-transform: scaleX(1.2) scaleY(1.2);
            transform: scaleX(1.2) scaleY(1.2);
  }
  100% {
    background-color: transparent !important;
    -webkit-transform: scaleX(0) scaleY(0);
            transform: scaleX(0) scaleY(0);
  }
}
@-webkit-keyframes achievementTextAnimationFrames {
  0% {
    opacity: 0;
    top: -77px;
  }
  40% {
    opacity: 1;
  }
  55% {
    opacity: 1;
    top: -77px;
    right: 0;
  }
  100% {
    opacity: 0;
    top: -138px;
  }
}
@keyframes achievementTextAnimationFrames {
  0% {
    opacity: 0;
    top: -77px;
  }
  40% {
    opacity: 1;
  }
  55% {
    opacity: 1;
    top: -77px;
    right: 0;
  }
  100% {
    opacity: 0;
    top: -138px;
  }
}
@-webkit-keyframes achievementNameAnimationFrames {
  0% {
    opacity: 0;
    top: 75px;
  }
  20% {
    opacity: 1;
    top: 9px;
  }
  90% {
    opacity: 1;
    top: 9px;
    right: 0;
  }
  100% {
    opacity: 0;
    top: 9px;
  }
}
@keyframes achievementNameAnimationFrames {
  0% {
    opacity: 0;
    top: 75px;
  }
  20% {
    opacity: 1;
    top: 9px;
  }
  90% {
    opacity: 1;
    top: 9px;
    right: 0;
  }
  100% {
    opacity: 0;
    top: 9px;
  }
}
@-webkit-keyframes mainAnimationFrames {
  10% {
    background-color: #107C10;
  }
  15% {
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
  }
  20% {
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
  }
  30% {
    width: 600px;
    left: calc(50% - 300px);
  }
  80% {
    width: 600px;
    left: calc(50% - 300px);
  }
  90% {
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
    background-color: #107C10;
  }
  95% {
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
    background-color: transparent;
  }
}
@keyframes mainAnimationFrames {
  10% {
    background-color: #107C10;
  }
  15% {
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
  }
  20% {
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
  }
  30% {
    width: 600px;
    left: calc(50% - 300px);
  }
  80% {
    width: 600px;
    left: calc(50% - 300px);
  }
  90% {
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
    background-color: #107C10;
  }
  95% {
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
    background-color: transparent;
  }
}

scripts

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

script.js

$(function() {
    $('button').click(function() {
        console.log('swapout');

        var el = $('.achievement-banner'),
            newone = el.clone(true);

        el.before(newone);
        $('.achievement-banner:last').remove();
    });
});

index.html

<button style="margin: 0 auto; text-align: center; display: block; font-size: 1.5em;">Click Me To Restart Animation</button>

<div class="container">
    <div class="achievement-banner animated">
        <div class="achievement-loader"></div>
        <div class="achievement-loader"></div>
        <div class="achievement-loader"></div>
        <div class="achievement-loader"></div>
        <div class="achievement-loader"></div>
        <div class="achievement-trophy xbox-icon xbox-logo"></div>

        <div class="achievement-text">
            <p class="achievement-notification">Achievement Unlocked</p>
            <p class="achievement-name"><i class="xbox-icon xbox-gamerscore"></i> 1,000 &ndash; CSS Achievement Banner</p>
        </div>
    </div>
</div>

CSS Xbox One Achievement.markdown

Rendered
Source

CSS Xbox One Achievement

As an avid Xbox Gamer and always wanting to push myself, I decided to recreate the Xbox One Achievement Toast. ou can see a video example of it here - https://www.youtube.com/watch?v=CgwkK2uUk1c&feature=youtu.be

All I need to do now, is play this to make it complete - (Achievement Notification Sound) http://majornelson.com/2011/10/07/download-the-achievement-unlocked-sound/

Here is an example of the old 360 one - http://codepen.io/jesseGlacken/details/uwtsx/

A Pen by Alan Wynn on CodePen.

License.

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

CSS Xbox One Achievement

CSS Xbox One Achievement