Be Programer

Make your dream to be programer is happen

Home » , » Cara Membuat Banner Animasi Dengan CSS3 dan HTML5

Cara Membuat Banner Animasi Dengan CSS3 dan HTML5

Tidak ada komentar
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
Share:

Tidak ada komentar:

Posting Komentar

Cari Blog Ini
Diberdayakan oleh Blogger.

Statemen Kendali / Kondisional If di C#

Statemen Kendali / Kondisional If di C#  -  C# mempunyai statemen kendali yang hampir sama dengan bahasa - bahasa pemrograman lainnya. Ter...

Label

Recent Posts

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Label Cloud

AJAX (3) Blogging (4) C (13) C# (15) Codeigniter (5) CSS (18) Game Maker (12) Google Maps (21) HTML (46) Instaling (2) Java (12) Java Script (40) JQUERY (16) PHP (12)

Sample Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.