Trik Penggabungan CSS3 Dan JQUERY
<script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#hide").click(function(){
$(".asal").hide( "fold",
ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#hide").click(function(){
$(".asal").hide( "fold",
{horizFirst: false, size:200 }, 6000 );});
$("#show").click(function(){$(".asal").show( "fold",
{horizFirst: true, size:200 }, 6000 );});});
</script>
<style type="text/css">
.asal{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS2YbguwA-0SpA5quBNry9GNj-5uHG28UJ6jeyI47PPlHJFh0rOtTOPriv58Ck9ACzflI9o2AcDWuQndW0_3ctpqwZa2aserelU9lC9n2wuEdZav2AuTw3UMhmexSRgQskucMq3zJfuMHS/s1600/Logo---500.gif);
margin-left:10px;margin-bottom: 10px;
margin-top:10px;width:560px;height:480px;
-webkit-box-shadow: 4px 4px 4px #333;opacity:.8;
-moz-box-shadow: 4px 4px 4px #333;
text-align:center;clear: both;font-size:1px;
-moz-border-radius:20px;
-webkit-border-radius:20px;}
.asal:hover{opacity:1.1;-webkit-box-shadow: 4px 4px 94px red;-moz-box-shadow: 4px 4px 94px red;text-shadow:2px 2px 6px #333;color:red;font-size:1.5em;}</style>
<button id="hide"> Open/Close </button>
<button id="show"> Open </button>
<br />
<div class="asal">
Masukkan Teks Disini
</div>
Keterangan :
- Ganti warna Merah dengan URL gambar anda dan teks silahkan anda tulis sesuai pada kolom Masukan Teks disini
- HorizFirst: merupakan ketentuan dari animasi apakah mau horizontal atau tidak. Jika kita memberikan nilai true maka gerakan animasi gambar akan bergerak secara horizontal dan jika anda merubah menjadi false maka gerakan animasi gambar tidak horizontal.
- Size:200 merupakan ukuran dari lipatan gambar, semakin rendah nilainya maka lipatan makin ke atas.
- }, 6000 ); merupakan kecepatan dari bergerknya animasi, semakin rendah nilainya maka gerakan animasi makin lambat.
0 comments :
Ads 2
Ads 2
Post a Comment
Mari Kita berdiskusi, apa pendapatmu. Ditunggu komentarnya kawan