CARA MELIPAT GAMBAR DENGAN MENGGABUNGKAN CSS3 DAN JQUERY

Translate

CARA PENGGABUNGKAN CSS3 DAN JQUERY

• 

Pada postingan sebelumnya saya pernah membahas mengenai Cara Membuat Gallery Image / Photo Dengan CSS3  nah kali ada Tips dan trik blogspot juga ngebahas tentang penggabungan efek CSS3 dengan JQuery (1.8.5 fold), dimana fungsinya yaitu memberikan efek melipat pada gambar dan penempatannya bisa diletakkan didalam postingan atau di sidebar.

Triks ini saya dapat dari blog suryabinamitra dan sudah saya modifikasi. Langsung saja ya kita lihat demonya dulu dibawah ini, dan tugas anda harus mengklik tombol open/close dan open supaya lebih jelas.

Surya Bina Mitra adalah salah satu mitra afiliasi, didirikan untuk tidak bersaing dengan peluang online lainnya, tetapi sebaliknya,untuk benar-benar memaksimalkan potensi penghasilan dari semua peluang online di luar sana.
Surya Bina Mitra memahami bahwa, sangat sulit bagi beberapa orang untuk mendapatkan informasi. Sementara yang lain mungkin tidak memiliki kesulitan untuk mendapatkan informasi tentang bisnis online.
Tujuan kami adalah untuk membuat orang menyadari apa sebenarnya yang dibutuhkan untuk mendapatkan uang secara online. Apa pola pikir yang dibutuhkan, dan jenis usaha yang diperlukan untuk benar-benar mencapai kebebasan finansial melalui peluang bisnis online.

Kami percaya bahwa dengan informasi yang benar, orang akan saling membantu, saling mendukung, mengajar satu sama lain, dan yang paling penting, memotivasi dan mendorong satu sama lain untuk bisa belajar dan mengahargai tentang kebebasan bisnis online yang jujur dan fair.
Kemudian, tidak peduli apa jenis peluang usaha di luar sana, tidak peduli apa jenis sistem yang mereka miliki, seperti ANDA juga .. yang akan berhasil -seperti mereka. Semoga!!

Bagaimana menurut anda setelah melihat demo diatas, tertarik membuatnya? ok kita mulai saja bagaimana cara membuat efek css dan jquery untuk lipatan gambar.

Caranya yaitu anda buat postingan seperti biasa, lalu masukan kode dibawah ini di dalam postingan pada posisi HTML, bukan di compose.

<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", 

{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/AVvXsEjAWM-EbKONwYQRWpN41GnH6y-rniv9Og2sNXSooxn4rhh6LiKCdglouX2X5vKcsjMa8zcQ6azwXHiE0Qj-le61rOpnAmoXJ1tXbwO3Bp70LR0mxg1jw2P7D3HdbHMQRLC2IlWGCPr9MJhf/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.

- Hasilnya akan terlihat seperti gambar di bawah ini. Selamat mencoba..

Saul Hudson (born July 23, 1965), better known by his stage name Slash, is a British-American musician and songwriter. He is best known as the former lead guitarist of the American hard rock band Guns N' Roses, with whom he achieved worldwide success in the late 1980s and early 1990s. During his later years with Guns N' Roses, Slash formed the side project Slash's Snakepit. He then co-founded the supergroup Velvet Revolver, which re-established him as a mainstream performer in the mid to late 2000s. Slash has since released two solo albums, Slash (2010), featuring an all-star roster of guest musicians, and Apocalyptic Love (2012), recorded with singer/guitarist Myles Kennedy, along with rhythm section Brent Fitz and Todd Kerns.

Silahkan dicoba ya kalau anda berminat. Sekian dulu tutorial tentang Membuat efek CSS3 dengan Jquery 1.8.5 fold.
Semoga postingan CARA MELIPAT GAMBAR DENGAN MENGGABUNGKAN CSS3 DAN JQUERY dapat bermanfaat untuk anda, salam sukses selalu ...

Edit; wawansurya
Sumber ;
www.affiliate-waones.com
http://waones-sbm.blogspot.com
http://mitra-sbm.blogspot.com

merchant 

Artikel Menarik Lainnya :