Share the post "3+ JavaScript Ribbon Examples"

Share the post "3+ JavaScript Ribbon Examples"

Share the post "3+ JavaScript Ribbon Examples"

Share the post "3+ JavaScript Ribbon Examples"

3+ JavaScript Ribbon Examples

💚 JavaScript / By

This post contains a total of 3+ JavaScript Ribbon Examples with Source Code. All these Ribbons are made using JavaScript & Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

12+ CSS Ribbon Examples
CSS Ribbons
3 Bootstrap Ribbon Examples
Bootstrap Ribbons
5+ JavaScript Badge Examples
JavaScript Badges

JavaScript Ribbon Examples

1. Color Ribbons

Made by Evan You. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body,html {
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}
#about {
  position:absolute;
  width:100%;
  height:100%;
  text-align:center;
}
h1 {
  padding-top:2em;
}
#ribbon {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
}
</style>
</head>
<body>
  <div id="about">
  <h1>Evan You</h1>
  <p><a href="#">evanyou.me</a></p>
</div>
<canvas id="ribbon"></canvas>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
document.addEventListener('touchmove', function (e) {
  e.preventDefault();
});
var c = document.getElementsByTagName('canvas')[0],
x = c.getContext('2d'),
pr = window.devicePixelRatio || 1,
w = window.innerWidth,
h = window.innerHeight,
f = 90,
q,
m = Math,
r = 0,
u = m.PI * 2,
v = m.cos,
z = m.random;
c.width = w * pr;
c.height = h * pr;
x.scale(pr, pr);
x.globalAlpha = 0.6;
function i() {
  x.clearRect(0, 0, w, h);
  q = [{ x: 0, y: h * .7 + f }, { x: 0, y: h * .7 - f }];
  while (q[1].x < w + f) {if (window.CP.shouldStopExecution(0)) break;d(q[0], q[1]);}window.CP.exitedLoop(0);
}
function d(i, j) {
  x.beginPath();
  x.moveTo(i.x, i.y);
  x.lineTo(j.x, j.y);
  var k = j.x + (z() * 2 - 0.25) * f,
  n = y(j.y);
  x.lineTo(k, n);
  x.closePath();
  r -= u / -50;
  x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16);
  x.fill();
  q[0] = q[1];
  q[1] = { x: k, y: n };
}
function y(p) {
  var t = p + (z() * 2 - 1.1) * f;
  return t > h || t < 0 ? y(p) : t;
}
document.onclick = i;
document.ontouchstart = i;
i();
    </script>
</body>
</html>

2. Boredom

Made by Schmuh. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.rotate {
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.slideExpandUp {
  animation-name: slideExpandUp;
  -webkit-animation-name: slideExpandUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease -out;
  visibility: visible !important;
}

@keyframes slideExpandUp {
  0% {
    transform: translateY(100%) scaleX(0);
  }
  50% {
    transform: translateY(0%) scaleX(1.1);
  }
  60% {
    transform: translateY(0%) scaleX(0.9);
  }
  70% {
    transform: translateY(0%) scaleX(1.05);
  }
  80% {
    transform: translateY(0%) scaleX(0.95);
  }
  90% {
    transform: translateY(0%) scaleX(1.02);
  }
  100% {
    transform: translateY(0%) scaleX(1);
  }
}
@-webkit-keyframes slideExpandUp {
  0% {
    -webkit-transform: translateY(100%) scaleX(0);
  }
  50% {
    -webkit-transform: translateY(0%) scaleX(1.1);
  }
  60% {
    -webkit-transform: translateY(0%) scaleX(0.9);
  }
  70% {
    -webkit-transform: translateY(0%) scaleX(1.05);
  }
  80% {
    -webkit-transform: translateY(0%) scaleX(0.95);
  }
  90% {
    -webkit-transform: translateY(0%) scaleX(1.02);
  }
  100% {
    -webkit-transform: translateY(0%) scaleX(1);
  }
}
.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}

@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.1);
  }
  80% {
    -webkit-transform: scale(0.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
.textShadow {
  animation-name: textShadow;
  -webkit-animation-name: textShadow;
  animation-duration: 0.8s;
  -webkit-animation-duration: 0.8s;
  text-shadow: 4px 4px 0px rgba(150, 150, 150, 0.58);
}

@keyframes textShadow {
  0% {
    text-shadow: 0px 0px 0px rgba(150, 150, 150, 0);
  }
  50% {
    text-shadow: 2px 2px 0px rgba(150, 150, 150, 0.25);
  }
  100% {
    text-shadow: 4px 4px 0px rgba(150, 150, 150, 0.58);
  }
}
@-webkit-keyframes textShadow {
  0% {
    text-shadow: 0px 0px 0px rgba(150, 150, 150, 0);
  }
  50% {
    text-shadow: 2px 2px 0px rgba(150, 150, 150, 0.25);
  }
  100% {
    text-shadow: 4px 4px 0px rgba(150, 150, 150, 0.58);
  }
}
.moveOut {
  animation-name: moveOut;
  -webkit-animation-name: moveOut;
  animation-duration: 0.8s;
  -webkit-animation-duration: 0.8s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
}

@keyframes moveOut {
  0% {
    top: 0;
  }
  99% {
    top: 400px;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes moveOut {
  0% {
    top: 0;
  }
  99% {
    top: 400px;
  }
  100% {
    visibility: hidden;
  }
}
.pullDown {
  animation-name: pullDown;
  -webkit-animation-name: pullDown;
  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
}

@keyframes pullDown {
  0% {
    transform: scaleY(0.1);
  }
  40% {
    transform: scaleY(1.02);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(1);
  }
}
@-webkit-keyframes pullDown {
  0% {
    -webkit-transform: scaleY(0.1);
  }
  40% {
    -webkit-transform: scaleY(1.02);
  }
  60% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
  }
}
.stretchRight {
  animation-name: stretchRight;
  -webkit-animation-name: stretchRight;
  animation-duration: 0.2s;
  -webkit-animation-duration: 0.2s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
}

@keyframes stretchRight {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@-webkit-keyframes stretchRight {
  0% {
    -webkit-transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
  }
}
.hidden {
  display: none;
}

/* ------------------------------------------------------------  */
body {
  margin: 0;
  padding: 0;
}

#container {
  position: relative;
  width: 100%;
  padding-top: 50px;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

.layer {
  position: absolute;
}

/* -------------------------------------   BLACK BAR */
#black_bar {
  position: absolute;
  z-index: 200;
  width: 100%;
  margin-top: 310px;
  height: 50px;
  background: #000;
}

.black_bar {
  position: relative;
  width: 100%;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  font-size: 40px;
}

/* -------------------------------------   STAR */
#star {
  position: absolute;
  z-index: 5;
  left: 50%;
  margin-left: -110px;
  width: 220px;
  color: #ffff99;
}

.star, .star:before, .star:after {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  position: relative;
  text-align: center;
}
.star:before, .star:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
.star:before {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}
.star:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}

.star.outer, .outer.star:before, .outer.star:after {
  background: #80cfe3;
  padding: 10px;
}

.star.inner, .inner.star:before, .inner.star:after {
  background: #3985a9;
  margin-top: 10px;
  margin-left: 10px;
}
.star.inner:before, .star.inner:after {
  top: -10px;
  left: -10px;
}

.star_text {
  position: absolute;
  width: 200px;
  margin-left: 10px;
  z-index: 10;
  text-align: center;
  margin-top: 50px;
  font-size: 40px;
}

/* -------------------------------------   RIBBON */
#ribbon {
  position: absolute;
  width: 350px;
  z-index: 100;
  margin-top: 100px;
  left: 50%;
  margin-left: -175px;
  color: #ffff99;
}

.ribbon {
  width: 350px;
  position: absolute;
  text-align: center;
  font-size: 20px !important;
  background: #80cfe3;
}
.ribbon h1 {
  font-size: 50px !important;
  margin: 0px;
  padding: 6px 10px;
}
.ribbon:before, .ribbon:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -1em;
  border: 1.5em solid #80cfe3;
  z-index: -1;
}
.ribbon:before {
  left: -2em;
  border-right-width: 1.5em;
  border-left-color: transparent;
}
.ribbon:after {
  right: -2em;
  border-left-width: 1.5em;
  border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
  border-color: #248ba6 transparent transparent transparent;
  position: absolute;
  display: block;
  border-style: solid;
  bottom: -1em;
  content: "";
}
.ribbon .ribbon-content:before {
  left: 0;
  border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
  right: 0;
  border-width: 1em 1em 0 0;
}

/* -------------------------------------   FLAG */
#flag {
  position: absolute;
  margin-top: 10px;
  width: 110px;
  left: 50%;
  margin-left: -55px;
}

.flag {
  background: #fd8a4b;
  width: 110px;
  height: 450px;
  padding-top: 15px;
  position: relative;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 25px solid #ffff99;
}
.flag:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 40px solid #ffff99;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}
.flag.under {
  background: #febf3d;
}
.flag.under:before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 450px;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 40px solid #FFF;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

#flag_end {
  position: absolute;
  z-index: 150;
  background: #fd8a4b;
  width: 110px;
  height: 95px;
  margin-top: 398px;
}
#flag_end:before {
  content: "";
  position: absolute;
  background: #fd8a4b;
  margin-top: -20px;
  height: 40px;
  width: 110px;
  -moz-transform: skewY(-10deg);
  -webkit-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  transform: skewY(-10deg);
}
#flag_end:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 40px solid #fff;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}
#flag_end.border-top:before {
  border-top: 1px solid #000;
}

.flag_over {
  background: #fd8a4b;
  width: 110px;
  height: 380px;
  -moz-transform: skewY(-10deg);
  -webkit-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  transform: skewY(-10deg);
}

.flag_text_top {
  text-align: center;
  width: 110px;
  margin-top: 250px;
  color: #FFF;
  font-size: 30px;
  font-weight: bold;
}

.flag_text_bottom {
  text-align: center;
  width: 110px;
  margin-top: 390px;
  font-size: 22px;
  color: #000;
}
</style>
</head>
<body>
  <div id="container">
			<div id="black_bar" class="hidden">
				<div class="black_bar hidden">• SERIOUSLY •</div>
			</div>

			<div id="ribbon" class="hidden">
				<div class="ribbon">
					<strong class="ribbon-content">
						<h1>
							<span class="spacer">&nbsp;</span>
							<span class="hidden">B</span>
							<span class="hidden">O</span>
							<span class="hidden">R</span>
							<span class="hidden">E</span>
							<span class="hidden">D</span>
						</h1>
					</strong>
				</div>	
			</div>	

			<div id="star" class="hidden">
				<div class="layer"><div class="star_text">I AM SO</div></div>
				<div class="layer"><div class="star outer rotate"></div></div>
				<div class="layer"><div class="star inner rotate"></div></div>
			</div>	
			
			<div id="flag" class="hidden">
				<div class="layer"><div id="flag_end"></div></div>
				<div class="layer"><div class="flag under"></div></div>
				<div class="layer"><div class="flag_over"></div></div>
				<div class="layer"><div class="flag_text_top">LIKE,</div></div>
				<div class="layer"><div class="flag_text_bottom">LOL</div></div>
			</div>

		</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
setTimeout("$('#star').removeClass('hidden').addClass('fadeIn');", 100);
setTimeout("$('#ribbon').removeClass('hidden').addClass('slideExpandUp');", 700);
setTimeout("$('.ribbon-content .spacer').addClass('hidden');", 1500);
setTimeout("$('.ribbon-content span').slice(1, 2).removeClass('hidden').addClass('fadeIn');", 1500);
setTimeout("$('.ribbon-content span').slice(2, 3).removeClass('hidden').addClass('fadeIn');", 1600);
setTimeout("$('.ribbon-content span').slice(3, 4).removeClass('hidden').addClass('fadeIn');", 1700);
setTimeout("$('.ribbon-content span').slice(4, 5).removeClass('hidden').addClass('fadeIn');", 1800);
setTimeout("$('.ribbon-content span').slice(5, 6).removeClass('hidden').addClass('fadeIn');", 1900);

setTimeout("$('.ribbon-content').addClass('textShadow');", 3000);

setTimeout("$('#flag').removeClass('hidden').addClass('pullDown');", 3600);
setTimeout("$('#black_bar').removeClass('hidden').addClass('stretchRight');", 4700);
setTimeout("$('.black_bar').removeClass('hidden').addClass('fadeIn');", 4900);
setTimeout("$('#flag_end').addClass('border-top');", 6900);setTimeout("$('#flag_end').removeClass('border-top').addClass('moveOut').delay(300).fadeOut(300);", 7100);
    </script>
</body>
</html>

3. Corner ribbon

Made by Kitty Giraudel. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/**
 * 1. Positioning context for the ribbon.
 * 2. Prevent the edges of the ribbon from being visible outside the
 *    box.
 */
.container {
  position: relative; /* 1 */
  overflow: hidden; /* 2 */
  
  /* Demo styles */
  width: 20em;
  height: 10em;
  border-radius: 0.25em;
  margin: 8em auto 2em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.ribbon {
  position: absolute; /* 1 */
  top: 0; /* 1 */
  right: 0; /* 1 */
  padding: 0 2em; /* 2 */
  text-align: center; /* 3 */
  transform:
    translateY(-100%)
    rotate(90deg)
    translateX(70.71067811865476%)
    rotate(-45deg); /* 4 */
  transform-origin: bottom right; /* 4 */
  
  /* Demo styles */
  text-transform: uppercase;
  font-weight: 500;
  font-size: 75%;
  letter-spacing: 1px;
  background-color: #d3f5f6;
  color: rgba(0, 0, 0, 0.7);
}

/* Demo styles */

* {
  box-sizing: border-box;
}

body {
  font: 125% / 1.5 sans-serif;
}

.controls {
  width: 21em;
  margin: auto;
  display: flex;
}

.controls > * {
  padding: 0.5em;
  flex: 1 1 50%;
}

input {
  width: 100%;
  padding: 0.25em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

label {
  font-size: 75%;
  text-transform: uppercase;
  color: darken(#d3f5f6, 55%);
}
</style>
</head>
<body>
  <div class="container"><div class="ribbon" id="ribbon">Express</div></div>

<div class="controls">
  <div>
    <label for="content">Content</label>
    <input type="text" id="content" value="Express" />
  </div>
  <div>
    <label for="padding">Padding (em)</label>
    <input type="number" step="0.1" min="0" max="5" value="2" id="padding" />
  </div>
</div>
      <script>
document.addEventListener('DOMContentLoaded', () => {
  const ribbon = document.querySelector('#ribbon');

  document.querySelector('#content').addEventListener('change', event => {
    console.log(event.target.value);
    ribbon.innerText = event.target.value;
  }, false);

  document.querySelector('#padding').addEventListener('change', event => {
    ribbon.style.paddingLeft = event.target.value + 'em';
    ribbon.style.paddingRight = event.target.value + 'em';
  });
});
    </script>
</body>
</html>

4. CSS Animated Ribbon with JavaScript

Made by John Graham. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import "https://fonts.googleapis.com/css?family=Oswald:400,700";
body {
  font-family: "Oswald", sans-serif;
  letter-spacing: 1px;
}

* {
  box-sizing: border-box;
}

.ribbon {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
  right: 0;
}
.ribbon [class*=ribbon-] {
  margin: 74px auto 0;
  transform-origin: 50% 50%;
  transform: rotate(-8.5deg);
  position: relative;
  z-index: 4;
  width: 287px;
  height: 56px;
}
.ribbon [class*=ribbon-] .inner {
  background: #003468;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  display: block;
  width: 0;
  height: 100%;
  padding: 11px 0;
  font-size: 1.5em;
  text-shadow: 3px 3px 1px #001b47;
  position: relative;
  z-index: 2;
  transform: skewX(-9deg);
  transition: width 0.12s ease-in-out;
}
.ribbon [class*=ribbon-]:before {
  content: "";
  transform-origin: 0 0;
  transform: rotate(-17.25deg) skewX(-9deg) translateX(158px);
  display: block;
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 4px;
  background: #001b47;
  z-index: -1;
  transition: all 0.12s ease-in-out 0.7s;
}
.ribbon .ribbon-1 .inner {
  letter-spacing: 19px;
  font-weight: 700;
}
.ribbon.active .inner {
  width: 100%;
}
.ribbon.active .ribbon-1 .inner {
  transition-delay: 0.82s;
}
.ribbon.active .ribbon-1:before {
  width: 158px;
  transform: rotate(-17.25deg) skewX(-9deg) translateX(0);
}
.ribbon .ribbon-2 {
  z-index: 3;
  font-size: 45px;
  width: 451px;
  height: 137px;
  margin-top: 22px;
}
.ribbon .ribbon-2 .inner {
  padding: 19px 0;
}
.ribbon .ribbon-2 .inner:before, .ribbon .ribbon-2 .inner:after {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeYAAAALCAYAAACqPi4nAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjEyM0FFRTU0NUUzMTFFNTlDMjdDMEJDMDFCNjlGNDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjEyM0FFRTY0NUUzMTFFNTlDMjdDMEJDMDFCNjlGNDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEOUZEM0I5NDQ1QkQxMUU1OUMyN0MwQkMwMUI2OUY0OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MTIzQUVFNDQ1RTMxMUU1OUMyN0MwQkMwMUI2OUY0OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm3y348AAAIOSURBVHja7JvhboIwEMfbOZgyQF9h2cPtrfZ8+7APU0RQt7FrciQ3QqHodFT+v+RCc9ikHtX/tUe1GjFVVc3okij/0GRL5ScrT8edkt15OG4zv2cejvuRLPBw3BFZ6OG452y+8UC28HDcAc/xa/FN9k72RvaqSfzMH/EL2RPZMwcyFRMh4YkcKwAAAGC6GAHNyHZke7I1Wcm2Zp+5t+F2Trbltku/TGv9pQeuYGuxTjmjSISAS99CCHwt6l2+JfeNOaMN8PwBAAAMkSgWxIKF7oOvRYdQ5tx26kei+XmNL6JHG+Gqaop1yAIe8hZD7VuJbYc2X73ltuJ7kfAtMZcBAOAqWFeJ3N62CGXp2o9E83grgdJTnymUAEixluIfcVIQdPjq+knM91PhS/hztW+O3yUAYMSi2be6PHn7lkTzgBBDmMeaBEixbtbwkx6frVTQ5sNzBeB22DiuLvu2b8u2fiSae4QYwgwunwDcK3sN31bXt5UKusoHEaINJk524urSafuWRLNEiCHMAAxNAmQNv6+u3ywV9JUPZKlghmiDgeS2VaJyfznIJrBGNAuEGECYwZQTAHNGOVXudX1ZFnApH6RiBwFcnp0QynNWl60CS6KZI8QAwgzA7SQBlzgCGCp/jgUWLUJ5zuryl8CSaG4xywCAMAMw1iTgr44AmutBnfdykBHNDE8FgP/lR4ABABGzGigi55YSAAAAAElFTkSuQmCC") center bottom no-repeat;
  background-size: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out 1.86s;
}
.ribbon .ribbon-2 .inner:before {
  transform-origin: 50% 50%;
  transform: rotate(180deg);
}
.ribbon .ribbon-2:before {
  width: 0;
  left: 11px;
  transform: rotate(-10.25deg) skewX(-9deg) translateX(451px);
  height: 47px;
  transition-delay: 0.94s;
}
.ribbon.active .ribbon-2 .inner {
  transition-delay: 1.06s;
}
.ribbon.active .ribbon-2 .inner:before, .ribbon.active .ribbon-2 .inner:after {
  opacity: 1;
}
.ribbon.active .ribbon-2:before {
  width: 376px;
  transform: rotate(-10.25deg) skewX(-9deg) translateX(0);
}
.ribbon .ribbon-3 {
  z-index: 2;
  font-size: 9px;
  width: 326px;
  height: 55px;
  margin-top: 24px;
}
.ribbon .ribbon-3 .inner {
  color: #e8a713;
  padding: 19px 0;
}
.ribbon .ribbon-3:before {
  width: 0;
  height: 47px;
  left: 11px;
  transform: rotate(-10.25deg) skewX(-9deg) translateX(387px);
  transition-delay: 1.18s;
}
.ribbon .ribbon-3:after {
  content: "";
  transform-origin: 100% 100%;
  transform: rotate(-15.3deg) skewX(9deg) translateX(72px);
  display: block;
  width: 0;
  height: 45px;
  position: absolute;
  bottom: 0;
  right: 4px;
  background: #001b47;
  z-index: -1;
  transition-delay: 1.42s;
}
.ribbon.active .ribbon-3 .inner {
  transition-delay: 1.3s;
}
.ribbon.active .ribbon-3:before {
  width: 387px;
  transform: rotate(-10.25deg) skewX(-9deg) translateX(0);
}
.ribbon.active .ribbon-3:after {
  width: 56px;
  transform: rotate(-15.3deg) skewX(9deg) translateX(0);
}
.ribbon .ball {
  width: 190px;
  height: 190px;
  background: #e8a713;
  border-radius: 95px;
  padding: 85px 20px 0;
  text-align: center;
  color: #001b47;
  border: 10px solid #001b47;
  margin: -87px auto 0;
  position: relative;
  left: 18px;
  z-index: 1;
  transform-origin: 50% 50%;
  transform: rotate(-8.5deg);
}
.ribbon .ball .ball-text {
  font-size: 12px;
  line-height: 1.2;
  text-align: right;
  display: block;
  width: 119px;
}
.ribbon .ball .ball-text strong {
  font-size: 39px;
  font-style: italic;
  display: block;
  margin: 0 auto;
}
.ribbon .fadeLeft {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.3s ease-in-out 1.56s;
  display: block;
}
.ribbon .fadeRight {
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease-in-out 1.56s;
  display: block;
}
.ribbon .fadeIn {
  opacity: 0;
  transition: all 0.3s ease-in-out 1.42s;
  display: block;
}
.ribbon.active .fadeLeft,
.ribbon.active .fadeRight {
  opacity: 1;
  transform: translateX(0);
}
.ribbon.active .fadeIn {
  opacity: 1;
}
</style>
</head>
<body>
  <div class="ribbon">
  <div class="medallion"></div>

  <div class="ribbon-1">
    <span class="inner">
						  		<span class="fadeLeft">Funtime</span>
    </span>
  </div>

  <div class="ribbon-2">
    <span class="inner">
								<span class="fadeRight">Extravaganza</span>
    </span>
  </div>

  <div class="ribbon-3">
    <span class="inner">
								<span class="fadeLeft">Each Funtime Purchase = One Chance to Win</span>
    </span>
  </div>

  <div class="ball fadeIn">
    <span class="ball-text">
						   		<strong>$1,000</strong>
						   		Daily Prize
							</span>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  setTimeout(function () {
    $('.ribbon').addClass('active');
  }, 500);
});
    </script>
</body>
</html>