Tutorial Belajar Pemrograman, membuat game, membuat aplikasi, membuat program, android, game maker, yii, php, CSS, HTML, java, javascript, codeigniter, jquery, Pascal, c++

» » » Cara Membuat Banner Animasi Dengan CSS3 dan HTML5

Sunday, May 18, 2014

Cara Membuat Banner Animasi Dengan CSS3 dan HTML5

Cara Membuat Banner Animasi Dengan CSS3 dan HTML5 - Banner animasi adalah sekumpulan teks atau gambar bergerk yang digunakan sebagai media promosi atau iklan. Banner sering kita jumpai pada kehidupan sehari - hari baik di dunia nyata ataupun di dunia maya. Pada dasarnya ada terdapat dua jenis banner yaitu banner statis dan dinamis atau animasi bergerak. 

Pada umumnya sebelum adanya CSS3 dan HTML5 banner yang berbentuk animasi dibuat dengan menggunakan flash, akan tetapi untuk menjalankan flash kita memerlukan plugin flash yang terpasang pada browser kita. Dengan adanya CSS3 dan HTML5, sekarang kita bisa membuat banner tanpa harus menggunakan flash jadi kita juga tidak perlu memasang pluginnya pada web browser kita. Banner ini juga berjalan lebih ringan dibandingkan dengan menggunakan flash, pada kali ini kita akan membuat banner dengan CSS3 dan HTML5, untuk lebih jelasnya langsung saja kita meluncur ke programmya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Banner CSS3 kemudian buatlah lagi folder di dalamnya dengan nama CSS , Sekarang style tampilan demonya buatlah sebuah file baru dengan notepad++ kemudian ketikan script berikut :

/* CSS reset */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
 margin:0;
 padding:0;
}
fieldset,img { 
 border:0;
}
ol,ul {
 list-style:none;
}
h1,h2,h3,h4,h5,h6 {
 font-size:100%;
 font-weight:normal;
}
/* General Demo Style */
body{
 font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
 background: #fbf8f4 url(../images/wood_pattern.jpg) repeat top left;
 font-weight: 400;
 font-size: 15px;
 color: #936a46;
 overflow-y: scroll;
 overflow-x: hidden;
}
.ie7 body{
 overflow:hidden;
}
a{
 color: #333;
 text-decoration: none;
}
.container{
 position: relative;
 text-align: center;
}
.clr{
 clear: both;
}
.container > header{
 padding: 20px 30px 10px 30px;
 margin: 0px 20px 10px 20px;
 position: relative;
 display: block;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
 font-family: 'Alfa Slab One', 'Arial Narrow', Arial, sans-serif;
 font-size: 35px;
 line-height: 35px;
 position: relative;
 font-weight: 400;
 color: #333;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    padding: 0px 0px 5px 0px;
}
.container > header h1 span{
 color: #008dc1;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h2, p.info{
 font-family: 'Boogaloo', 'Arial Narrow', Arial, sans-serif;
 font-size: 22px;
 font-style: italic;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.container > header h2 a{
 color: #936a46;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h2 a:hover{
 color: #614429;
}
/* Header Style */
.codrops-top{
 font-family:'Arial Narrow', Arial, sans-serif;
 line-height: 24px;
 font-size: 11px;
 width: 100%;
 background: #000;
 opacity: 0.9;
 text-transform: uppercase;
 z-index: 9999;
 position: relative;
 -moz-box-shadow: 1px 0px 2px #000;
 -webkit-box-shadow: 1px 0px 2px #000;
 box-shadow: 1px 0px 2px #000;
}
.codrops-top a{
 padding: 0px 10px;
 letter-spacing: 1px;
 color: #ddd;
 display: block;
 float: left;
}
.codrops-top a:hover{
 color: #fff;
}
.codrops-top span.right{
 float: right;
}
.codrops-top span.right a{
 float: none;
 display: inline;
}

p.codrops-demos{
 text-align:center;
 display: block;
 padding: 14px;
 font-family: 'Alfa Slab One', 'Arial Narrow', Arial, sans-serif;
}
p.codrops-demos a,
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
    display: inline-block;
 border: 1px solid #ddd;
 border-color: #ddd #aaa #aaa #ddd;
 padding: 4px 10px 3px;
 font-size: 15px;
 line-height: 18px;
 margin: 0px 3px;
 -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
 -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
 box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
 color: #29abe1;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background: #fff;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.9);
 background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
 background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
 background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
 background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
 background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}
p.codrops-demos a:hover{
 background: #fff;
 color: #29abe1;
}
p.codrops-demos a:active{
 background: #e5e5e5;
 background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff));
 background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.9);
 -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9);
 box-shadow: 0px 1px 1px rgba(255,255,255,0.9);
}
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
 color: #fff;
 background: #29abe1;
 border-color: #29abe1;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
/* Media Queries */
@media screen and (max-width: 767px) {
 .container > header{
  text-align: center;
 }
 p.codrops-demos {
  position: relative;
  top: auto;
  left: auto;
 }
}

Simpan dengan nama demo.css letakan dalam folder CSS tadi, kemudian buatlah sebuah file baru untuk style banner serta animasi bannernya ketikan script berikut di notepad++ :

/* Begin Ad 1 */

#ad-1 {
 width: 720px;
 height: 300px;
 margin: 40px auto 0;
 background-image: url(../images/ad-1/background.png);
 background-position: center;
 background-repeat: no-repeat;
 overflow: hidden;
 position: relative;
 box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
#ad-1 #content {
 width: 325px;
 float: right;
 margin: 40px;
 text-align: center;
 z-index: 4;
 position: relative;
 overflow: visible;
}
 #ad-1 #content h2 {
  font-family: 'Alfa Slab One', cursive;
  color: #137dd5;
  font-size: 50px;
  line-height: 50px;
  text-shadow: 0px 0px 4px #fff;
  -webkit-animation: h2-animation 7s 1 ease-in-out;
  -moz-animation: h2-animation 7s 1 ease-in-out;
  -o-animation: h2-animation 7s 1 ease-in-out;
  -ms-animation: h2-animation 7s 1 ease-in-out;
  animation: h2-animation 7s 1 ease-in-out;
 }
 #ad-1 #content h3 {
  font-family: 'Boogaloo', cursive;
  color: #202224;
  font-size: 31px;
  line-height: 31px;
  text-shadow: 0px 0px 4px #fff;
  -webkit-animation: h3-animation 10s 1 ease-in-out;
  -moz-animation: h3-animation 10s 1 ease-in-out;
  -o-animation: h3-animation 10s 1 ease-in-out;
  -ms-animation: h3-animation 10s 1 ease-in-out;
  animation: h3-animation 10s 1 ease-in-out;
 }
 #ad-1 #content form {
  margin: 30px 0 0 6px;
  position: relative;
  -webkit-animation: form-animation 12s 1 ease-in-out;
  -moz-animation: form-animation 12s 1 ease-in-out;
  -o-animation: form-animation 12s 1 ease-in-out;
  -ms-animation: form-animation 12s 1 ease-in-out;
  animation: form-animation 12s 1 ease-in-out;
 }
 #ad-1 #content #email {
  width: 158px;
  height: 48px;
  float: left;
  padding: 0 20px;
  font-size: 16px;
  font-family: 'Lucida Grande', sans-serif;
  color: #fff;
  text-shadow: 1px 1px 0px #a2917d;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border:1px solid #a2917d;
  outline: none;
  box-shadow: -1px -1px 1px #fff;
  background-color: #c7b29b;
  background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -o-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);
 }
 #ad-1 #content #email:focus {
  background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -o-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);
  
 }
 #ad-1 #content #submit {
  height: 50px;
  float: left;
  padding: 0 20px;
  font-size: 20px;
  font-family: 'Boogaloo', cursive;
  color: #137dd5;
  text-shadow: 1px 1px 0px #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border:1px solid #bcc0c4;
  border-left: none;
  background-color: #fff;
  background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -o-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);
  cursor: pointer;
 }
 #ad-1 #content #submit:hover {
  background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);
 }
#ad-1 ul#water{
}
 #ad-1 li#water-back {
  width: 1200px;
  height: 84px;
  background-image: url(../images/ad-1/water-back.png);
  background-repeat: repeat-x;
  z-index: 1;
  position: absolute;
  bottom: 10px;
  left: -20px;
  -webkit-animation: water-back-animation 3s infinite ease-in-out;
  -moz-animation: water-back-animation 3s infinite ease-in-out;
  -o-animation: water-back-animation 3s infinite ease-in-out;
  -ms-animation: water-back-animation 3s infinite ease-in-out;
  animation: water-back-animation 3s infinite ease-in-out;
 }
 #ad-1 li#water-front {
  width: 1200px;
  height: 158px;
  background-image: url(../images/ad-1/water-front.png);
  background-repeat: repeat-x;
  z-index: 3;
  position: absolute;
  bottom: -70px;
  left:-30px;
  -webkit-animation: water-front-animation 2s infinite ease-in-out;
  -moz-animation: water-front-animation 2s infinite ease-in-out;
  -o-animation: water-front-animation 2s infinite ease-in-out;
  -ms-animation: water-front-animation 2s infinite ease-in-out;
  animation: water-front-animation 2s infinite ease-in-out;
 }
#ad-1 ul#boat {
 width: 249px;
 height: 215px;
 z-index: 2;
 position: absolute;
 bottom: 25px;
 left: 20px;
 overflow: visible;
 -webkit-animation: boat-in-animation 3s 1 ease-out;
 -moz-animation: boat-in-animation 3s 1 ease-out;
 -o-animation: boat-in-animation 3s 1 ease-out;
 -ms-animation: boat-in-animation 3s 1 ease-out;
 animation: boat-in-animation 3s 1 ease-out;
}
 #ad-1 ul#boat li {
  width: 249px;
  height: 215px;
  background-image: url(../images/ad-1/boat.png);
  position: absolute;
  bottom: 0px;
  left: 0px;
  overflow: visible;
  -webkit-animation: boat-animation 2s infinite ease-in-out;
  -moz-animation: boat-animation 2s infinite ease-in-out;
  -o-animation: boat-animation 2s infinite ease-in-out;
  -ms-animation: boat-animation 2s infinite ease-in-out;
  animation: boat-animation 2s infinite ease-in-out;
 }
  #ad-1 #question-mark {
   width: 24px;
   height: 50px;
   background-image: url(../images/ad-1/question-mark.png);
   position: absolute;
   right: 34px;
   top: -30px;
   -webkit-animation: question-mark-animation 4s 1 ease-in-out;
   -moz-animation: question-mark-animation 4s 1 ease-in-out;
   -o-animation: question-mark-animation 4s 1 ease-in-out;
   -ms-animation: question-mark-animation 4s 1 ease-in-out;
   animation: question-mark-animation 4s 1 ease-in-out;
  }
#ad-1 #clouds {
 position: absolute;
 top: 0px;
 z-index: 0;
}
#ad-1 #cloud-group-1 {
 width:720px;
 position: absolute;
 left:0px;
 -webkit-animation: cloud-group-1-animation 30s infinite linear;
 -moz-animation: cloud-group-1-animation 30s infinite linear;
 -o-animation: cloud-group-1-animation 30s infinite linear;
 -ms-animation: cloud-group-1-animation 30s infinite linear;
 animation: cloud-group-1-animation 30s infinite linear;
}
#ad-1 #cloud-group-2 {
 width: 720px;
 position: absolute;
 left: 720px;
 -webkit-animation: cloud-group-2-animation 30s infinite linear;
 -moz-animation: cloud-group-2-animation 30s infinite linear;
 -o-animation: cloud-group-2-animation 30s infinite linear;
 -ms-animation: cloud-group-2-animation 30s infinite linear;
 animation: cloud-group-2-animation 30s infinite linear;
}
 #ad-1 .cloud-1 {
  width: 172px;
  height: 121px;
  background-image: url(../images/ad-1/cloud-1.png);
  position: absolute;
  top: 10px;
  left: 40px;
 }
 #ad-1 .cloud-2 {
  width: 121px;
  height: 75px;
  background-image: url(../images/ad-1/cloud-2.png);
  position: absolute;
  top: -25px;
  left: 300px;
 }
 #ad-1 .cloud-3 {
  width: 132px;
  height: 105px;
  background-image: url(../images/ad-1/cloud-3.png);
  position: absolute;
  top: -5px;
  left: 530px;
 }
 
/* WebKit Animations */

@-webkit-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-webkit-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-webkit-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-webkit-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-webkit-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-webkit-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-webkit-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-webkit-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-webkit-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-webkit-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* FireFox Animations */

@-moz-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-moz-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-moz-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-moz-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-moz-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-moz-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-moz-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-moz-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-moz-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-moz-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* Opera Animations */

@-o-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-o-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-o-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-o-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-o-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-o-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-o-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-o-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-o-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-o-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* IE Animations */

@-ms-keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-ms-keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@-ms-keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@-ms-keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@-ms-keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@-ms-keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@-ms-keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@-ms-keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@-ms-keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@-ms-keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* Animations */

@keyframes h2-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@keyframes h3-animation {
 0%   {opacity: 0;}
 80%  {opacity: 0;}
 100% {opacity: 1;}
}
@keyframes form-animation {
 0%   {opacity: 0; right: -400px;}
 90%  {opacity: 0; right: -400px;}
 95%  {opacity: 0.5; right: 20px;}
 100% {opacity: 1; right: 0px;}
}
@keyframes boat-in-animation {
 0%   {left: -200px;}
 100% {left: 20px;}
}
@keyframes boat-animation {
 0%   {bottom: 0px; left: 0px;}
 25%  {bottom: -2px; left: -2px;}
 70%  {bottom: 2px; left: -4px;}
 100% {bottom: -1px; left: 0px;}
}
@keyframes question-mark-animation {
 0%   {opacity:0;}
 80%   {opacity:0;}
 100% {opacity:1;}
}
@keyframes cloud-group-1-animation {
 0%       {left: 0px;}
 99.9999%   {left: -720px;}
 100%     {left: 0px;}
}
@keyframes cloud-group-2-animation {
 0%       {left: 720px;}
 99.9999%   {left: 0px;}
 100%     {left: 720px;}
}
@keyframes water-back-animation {
 0%   {bottom: 10px; left: -20px;}
 25%  {bottom: 8px; left: -22px;}
 70%  {bottom: 12px; left: -24px;}
 100% {bottom: 9px; left: -20px;}
}
@keyframes water-front-animation {
 0%   {bottom: -70px; left: -30px;}
 25%  {bottom: -68px; left: -32px;}
 70%  {bottom: -72px; left: -34px;}
 100% {bottom: -69px; left: -30px;}
}

/* End Ad 1 */

/* Begin Ad 2 */

#ad-2 {
 width: 160px;
 height: 600px;
 margin: 40px auto 40px;
 background-image: url(../images/ad-2/background.png);
 background-position: center;
 background-repeat: no-repeat;
 overflow: hidden;
 position: relative;
 box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
 text-align: center;
}
#ad-2 h2 {
 font-family: 'Alfa Slab One', cursive;
 color: #137dd5;
 font-size: 50px;
 line-height: 50px;
 text-shadow: 0px 0px 4px #fff;
 margin-top: 110px;
 -webkit-animation: h2-animation-2 10s 1 ease-in-out;
 -moz-animation: h2-animation-2 10s 1 ease-in-out;
 -o-animation: h2-animation-2 5s 1 ease-in-out;
 -ms-animation: h2-animation-2 5s 1 ease-in-out;
 animation: h2-animation-2 5s 1 ease-in-out;
}
#ad-2 ul#boat {
 width: 96px;
 height: 84px;
 overflow: visible;
 z-index: 2;
 position: absolute;
 top: 326px;
 left: 10px;
 -webkit-animation: boat-in-animation-2 15s 1 ease-in-out;
 -moz-animation: boat-in-animation-2 15s 1 ease-in-out;
 -o-animation: boat-in-animation-2 15s 1 ease-in-out;
 -ms-animation: boat-in-animation-2 15s 1 ease-in-out;
 animation: boat-in-animation-2 15s 1 ease-in-out;
}
 #ad-2 ul#boat li {
  width: 96px;
  height: 84px;
  z-index: 2;
  position: relative;
  top: 0px;
  left: 0px;
  background-image: url(../images/ad-2/boat.png);
  -webkit-animation: boat-animation-2 2.5s infinite ease-out;
  -moz-animation: boat-animation-2 2.5s infinite ease-out;
  -o-animation: boat-animation-2 2.5s infinite ease-out;
  -ms-animation: boat-in-animation-2 2.5s infinite ease-out;
  animation: boat-animation-2 2.5s infinite ease-out;
 }
#ad-2 #water {
 position: absolute;
 top: 382px;
 -webkit-animation: water-in-animation-2 2s 1 ease-out;
 -moz-animation: water-in-animation-2 2s 1 ease-out;
 -o-animation: water-in-animation-2 2s 1 ease-out;
 -ms-animation: water-in-animation-2 2s 1 ease-out;
 animation: water-in-animation-2 2s 1 ease-out;
}
 #ad-2 #water-back {
  width: 200px;
  height: 75px;
  background-image: url(../images/ad-2/water-back.png);
  background-repeat: repeat-x;
  z-index: 1;
  position: absolute;
  top: 0px;
  left: -22px;
  -webkit-animation: water-back-animation-2 3s infinite ease-in-out;
  -moz-animation: water-back-animation-2 3s infinite ease-in-out;
  -o-animation: water-back-animation-2 3s infinite ease-in-out;
  -ms-animation: water-back-animation-2 3s infinite ease-in-out;
  animation: water-back-animation-2 3s infinite ease-in-out;
 }
 #ad-2 #water-front {
  width: 200px;
  height: 368px;
  background-image: url(../images/ad-2/water-front.png);
  background-repeat: repeat-x;
  z-index: 3;
  position: absolute;
  top: 2px;
  left:-30px;
  -webkit-animation: water-front-animation-2 2s infinite ease-in-out;
  -moz-animation: water-front-animation-2 2s infinite ease-in-out;
  -o-animation: water-front-animation-2 2s infinite ease-in-out;
  -ms-animation: water-front-animation-2 2s infinite ease-in-out;
  animation: water-front-animation-2 2s infinite ease-in-out;
 }
#ad-2 #content {
 width: 100%;
 position: absolute;
 bottom: 0px;
 z-index: 4;
 -webkit-animation: content-in-animation-2 15s 1 ease-in-out;
 -moz-animation: content-in-animation-2 15s 1 ease-in-out;
 -o-animation: content-in-animation-2 15s 1 ease-in-out;
 -ms-animation: content-in-animation-2 15s 1 ease-in-out;
 animation: content-in-animation-2 15s 1 ease-in-out;
}
 #ad-2 #content h3 {
  color: #fff;
  font-family: 'Boogaloo', cursive;
  font-size: 30px;
  line-height: 32px;
  text-shadow: 0px 0px 4px #137dd5;
 }
 #ad-2 #content a:link, #ad-2 #content a:visited {
  display: inline-block;
  height: 20px;
  padding: 15px;
  font-family: 'Boogaloo', cursive;
  font-size: 20px;
  line-height: 20px;
  color: #137dd5;
  text-shadow: 1px 1px 0px #fff;
  background-color: #fff;
  border-radius: 5px;
  margin: 20px 0px;
  box-shadow: 2px 2px 0px #137dd5;
  border: 1px solid #fff;
  background-image: linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -o-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
  background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 10%, rgb(255,255,255) 55%);
 }
 #ad-2 #content a:hover, #ad-2 #content a:active {
  background-image: linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
  background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(255,255,255) 55%);
 }

/* WebKit Animations */

@-webkit-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-webkit-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-webkit-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-webkit-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-webkit-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-webkit-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-webkit-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* FireFox Animations */

@-moz-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-moz-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-moz-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-moz-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-moz-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-moz-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-moz-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* Opera Animations */

@-o-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-o-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-o-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-o-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-o-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-o-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-o-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* IE Animations */

@-ms-keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@-ms-keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@-ms-keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@-ms-keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@-ms-keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@-ms-keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@-ms-keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* Animations */

@keyframes h2-animation-2 {
 0%   {opacity: 0; font-size: 0px;}
 90%  {opacity: 0; font-size: 0px;}
 95%  {opacity: 1; font-size: 60px;}
 100% {font-size: 50px;}
}
@keyframes content-in-animation-2 {
 0%   {opacity: 0;}
 90%  {opacity: 0;}
 95%  {opacity: 1;}
 100% {opacity: 1;}
}
@keyframes water-in-animation-2 {
 0%   {top: 600px; left: -10px;}
 100% {top: 380px; left: 0px;}
}
@keyframes water-front-animation-2 {
 0%   {top: 2px; left: -30px;}
 25%  {top: 0px; left: -32px;}
 70%  {top: 4px; left: -34px;}
 100% {top: 1px; left: -30px;}
}
@keyframes water-back-animation-2 {
 0%   {top: 0px; left: -20px;}
 25%  {top: -2px; left: -22px;}
 70%  {top: 2px; left: -24px;}
 100% {top: -1px; left: -20px;}
}
@keyframes boat-in-animation-2 {
 0%       {left: -150px;}
 7%       {left: -150px;}
 75%      {left: 310px;}
 75.0001% {left: -100px;}
 90%      {left: 10px;}
 100%     {left: 10px;}
}
@keyframes boat-animation-2 {
 0%   {top: 0px; left: 0px;}
 25%  {top: -2px; left: -2px;}
 70%  {top: 2px; left: -2px;}
 100% {top: -1px; left: -1px;}
}

/* End Ad 2 */

Kemudian simpan dalam folder CSS dengan nama style.css.

Image

Sekarang untuk gambar banner serta backgroundnya anda dapat mengunduhnya disini : DOWNLOAD
Letakan foder image tersebut dalam folder Banner CSS3

HTML

Sekarang untuk markupnya kita akan membuat dua buah jenis banner yaitu banner Vertikal dan Banner Horisontal, pertama untuk banner horisontal buatlah sebuah file baru di notepad++ kemudian ketikan script berikut :

Horisontal

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated Web Banners Dengan CSS3</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
   <header>
    <h1>Animated Web Banners Dengan CSS3</h1>
    <h2>Membuat banner tanpa flash hanya dengan CSS3.</h2>
    <p class="codrops-demos">
     <a class="current-demo"  href="index.html">Horisontal</a>
     <a href="index2.html">Vertikal</a>
    </p>
   </header>
            <section class="wrapper">
    <div id="ad-1">
     <div id="content">
      <h2>Kesasar di laut?</h2>
      <h3>Tenang - Konsultasikan dengan kami.</h3>
      <form>
       <input type="text" id="email" value="Email address..." />
       <input type="submit" id="submit" value="Submit" />
      </form>
     </div>
     <div id="clouds">
      <ul id="cloud-group-1">
       <li class="cloud-1"></li>
       <li class="cloud-2"></li>
       <li class="cloud-3"></li>
      </ul>
      <ul id="cloud-group-2">
       <li class="cloud-1"></li>
       <li class="cloud-2"></li>
       <li class="cloud-3"></li>
      </ul>
     </div>
     <ul id="boat">
      <li>
       <div id="question-mark"></div>
      </li>
     </ul>
     <ul id="water">
      <li id="water-back"></li>
      <li id="water-front"></li>
     </ul>
    </div>
            </section> 
        </div>
    </body>
</html>

Simpan dalam folder Banner CSS3 dengan nama index.html

Vertikal

Sekarang untuk yang vertikal buat sebuah file baru dan ketikan script berikut :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated Web Banners Dengan CSS3</title>
  <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
   <header>
    <h1>Animated Web Banners Dengan CSS3</h1>
    <h2>Membuat banner tanpa flash hanya dengan CSS3.</h2>
    <p class="codrops-demos">
     <a href="index.html">Horisontal</a>
     <a class="current-demo" href="index2.html">Vertikal</a>
    </p>
   </header>
            <section class="wrapper">
    <div id="ad-2">
     <h2>Ilang<br />di<br />laut?</h2>
     <ul id="boat">
      <li>
       <div id="question-mark"></div>
      </li>
     </ul>
     <ul id="water">
      <li id="water-back"></li>
      <li id="water-front"></li>
     </ul>
     <div id="content">
      <h3>Tenang.<br />Konsultasilah dengan kami.</h3>
      <a href="#">Sekarang !</a>
     </div>
    </div>
            </section> 
        </div>
    </body>
</html>

Sekarang Banner dengan CSS3 dan HTML5 anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE hehheeh jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWLOAD
Diposkan oleh - Blogger di 1 komentar
Label: ,

Terima Kasih Telah Mengunjungi Blog Sederhana Ini.

Di Mohon Apabila Anda Ingin Mengcopas Artikel Pada Blog ini Cantumkan URL Sumber.

Sebagai Pengunjung Yang Baik Anda Dapat Meninggalkan Komentar di Blog Sederhana Ini.

Share this post

1 komentar

:) :) :-) :-) :)) :)) =)) =)) :( :( :-( :-( :(( :(( :d :d :-d :-d @-) @-) :p :p :o :o :>) :>) (o) (o) [-( [-( :-? :-? (p) (p) :-s :-s (m) (m) 8-) 8-) :-t :-t :-b :-b b-( b-( :-# :-# =p~ =p~ :-$ :-$ (b) (b) (f) (f) x-) x-) (k) (k) (h) (h) (c) (c) cheer cheer

 
© Jin Toples Programming
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSS ∙ Comments RSS
Back to top