Cara Membuat Animasi Ribbon dengan CSS3 dan Jquery

Animasi pada sebuah tampilan website merupakan hal yang wajib ada, ini akan berpengaruh pada kualitas tampilan web itu sendiri, maka dari itu ketika kita akan membuat website animasi sangat perlu diperhatikan, berbicara mengenai animasi pada tampilan webiste, berikut ini salah satu contoh animasi Ribbon menggunakan CSS3 dan juga Jquery yakni kita akan buat bagaimana Cara Membuat Animasi Ribbon dengan CSS3 dan Jquery. Untuk lebih jelas nya simak langkah-langkah nya berikut ini.

Pertama-tama kita akan buat struktur tampilan Ribbon dengan sintak HTML5 berikut ini.

<body>
	<div class="ribbon">
	  click to animate
	  <i></i>
	  <i></i>
	  <i></i>
	  <i></i>
	</div>
</body>

Setelah struktur awal dibuat, selanjutnya kita akan desain dengan CSS3 tujuan nya agar kita bisa melihat tampilan Ribbon, berikut sintak CSS3 untuk desain Ribbon.

body {
  background: #ddd;
  font: 14px/1.6em sans-serif;
}

.ribbon {
  width: 400px;
  height: 60px;
  margin: 100px auto 0px;
  position: relative;
  color: #333;
  font: 28px/60px sans-serif;
  text-align: center;
  text-transform: uppercase;
  background: #e67e22;
  
  -webkit-animation: main 250ms;
  -moz-animation: main 250ms;
  -ms-animation: main 250ms;
  animation: main 250ms;
}

.ribbon i {
  position: absolute;
}

.ribbon i:first-child, .ribbon i:nth-child(2) {
  position: absolute;
  left: -20px;
  bottom: -20px;
  z-index: -1;
  border: 20px solid transparent;
  border-right-color: #043140;
  
  -webkit-animation: edge 500ms;
  -moz-animation: edge 500ms;
  -ms-animation: edge 500ms;
  animation: edge 500ms;
}

.ribbon i:nth-child(2) {
  left: auto;
  right: -20px;
  border-right-color: transparent;
  border-left-color: #043140;
}

.ribbon i:nth-child(3), .ribbon i:last-child {
  width: 20px;
  bottom: -20px;
  left: -60px;
  z-index: -2;
  border: 30px solid #d35400;
  border-left-color: transparent;
  
  -webkit-animation: back 600ms;
  -moz-animation: back 600ms;
  -ms-animation: back 600ms;
  animation: back 600ms;
  
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.ribbon i:last-child {
  bottom: -20px;
  left: auto;
  right: -60px;
  border: 30px solid #d35400;
  border-right-color: transparent;

  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

p {
  text-align: center;
  color: #aaa;
}

/* animations */

@-webkit-keyframes main {
  0% { -webkit-transform: scaleX(0); }
  100% { -webkit-transform: scaleX(1); }
}

@-webkit-keyframes edge {
  0%, 50% { -webkit-transform: scaleY(0); }
  100% { -webkit-transform: scaleY(1); }
}

@-webkit-keyframes back {
  0%, 75% { -webkit-transform: scaleX(0); }
  100% { -webkit-transform: scaleX(1); }
}


@-moz-keyframes main {
  0% { -moz-transform: scaleX(0); }
  100% { -moz-transform: scaleX(1); }
}

@-moz-keyframes edge {
  0%, 50% { -moz-transform: scaleY(0); }
  100% { -moz-transform: scaleY(1); }
}

@-moz-keyframes back {
  0%, 75% { -moz-transform: scaleX(0); }
  100% { -moz-transform: scaleX(1); }
}


@keyframes main {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes edge {
  0%, 50% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes back {
  0%, 75% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

Langkah terakhir adalah kita buat fungsi untuk tampilan Ribbon agar bisa animasi berjalan ketika di klik, untuk fungsi animasi nya kita buat dengan sintak JS berikut.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$('.ribbon').on('click', function() {	
  var self = $(this),
      newone = self.clone(true);
  
  self.before(newone);
  $("." + self.attr("class") + ":last").remove();
});
</script>

Setelah semua sintak diketikan, simpan terlebih dahulu kemudian kalian buka pada browser masing-masing dan lihat hasilnya. Selesai

Baiklah cukup sekian tutorial mengenai Cara Membuat Animasi Ribbon dengan CSS3 dan Jquery. Semoga bermanfaat dan selamat mencoba 🙂

Risman Hakim Author

Menjadi seorang Web Designer membuat saya ingin selalu berbagi ilmu. Berbagi tidak mengurangi ilmu, dengan berbagi ilmu akan terus bertambah. Kenal lebih jauh tentang saya di DUMET School :)

Leave a Reply

Your email address will not be published. Required fields are marked *