Sekarang saya akan kasih kamu Jquery Animate yang untuk box di awal, tapi dengan menggu nakan Jquery ini maka box ini akan menjadi keren seperti di awal masuk kesini,,, langsung saja copas code dibawah:
1. Pasang Jquery berikut tepat di atas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
2. Selanjutnya taruh Css berikut tepat di atas kode ]]></b:skin> atau </style>
#bgbox-info{width:100%; height:100%; background:#000; position:fixed; left:0;top:0;display:none} #dialog-box { background: none repeat scroll 0 0 #174A87; border: 2px solid #333333; border-radius: 10px; box-shadow: 0 0 3px 2px #000000 inset; color: #FFFFFF; height: 200px; left: 130%; padding: 10px; position: fixed; text-align: center; top: 25%;z-index:1000; width: 350px;display:none } #kotak-muncul { background : none 0 0 repeat scroll #174A87; border : #333333 solid 2px; border-radius : 10px; box-shadow : 0 0 3px 2px #000000 inset; color : #FFFFFF; height : 200px; left : 130%; padding : 10px; position : fixed; text-align : center; top : 25%; width : 350px; display : none; z-index : 1000; } #kotak-muncul:before { content : "\f059 "; font-family : fontAwesome; font-size : 4em; position : absolute; bottom : 50px; left : 150px; } #tutup { width : 20px; height : 20px; background : #000; padding : 5px; border-radius : 25px; position : absolute; top : -20px; left : -15px; cursor : pointer; border : #fff solid 2px; }
3. dan yang terakhir silahkan pasang Html sekaligus fungsi jquerynya tepat di atas kode </body>
<div id="bgbox-info"> </div> <div id="kotak-muncul"> <div id="tutup"> X</div> Dengan menggunakan Jquery animate kita bisa membuat sebuah alert box tampil slide dari samping kanan ke kiri(sebaliknya)bahkan kita bisa membuat sebuah Alert Box seperti memantul ke atas dan ke bawah </div> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#kotak-muncul").show().animate({left:"40%"}); $('#bgbox-info').fadeTo("normal", 0.4).css({transition:"1s"}); $("#tutup").click(function(){ $('#bgbox-info').fadeOut(2000); $("#kotak-muncul").animate({top:"10%"}).animate({top:"30%"}).animate({top:"10%"}).animate({top:"30%"}).animate({top:"10%"}).animate({top:"130%"}); }); }); //]]> </script>
Ganti warna hijau dengan kata-kata yang mau di masukkan kedalamnya, itu juga bisa kamu letakkan gambar di dalamnya, terserah kretifitas sendiri-sendiri. Sekian dulu postingan saya tentang Alert Box dengan Animasi yang Keren.
0 komentar:
Post a Comment