CSS Xbox One Achievement

CSS Xbox One Achievement.markdown

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.

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>

script.js

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

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

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

scripts

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

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;
  }
}

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);
    }
}

styles

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