Halo teman-teman sahabat Yellow, untuk artikel kali ini kita akan mencoba menggunakan plugin jQuery, yang berfungsi untuk memanipulasi tulisan atau teks. Tentunya kita siapkan dahulu file-file apa saja nanti yang akan kita gunakan.
File-file yang kita perlukan diantaranya:
1. index.html
2. Library jQuery
3. Plugin jQuery
Untuk mengunduh file plugin Text Rotator jQuery, kita bisa menuju link berikut:
Text Rotator Plugin
dan tentunya jangan lupa untuk mengunduh Library jQuery dari situsnya:
jQuery Library
File-file tersebut sudah kita siapkan, sekarang saatnya kita memulai:
Untuk potongan skrip kode pada bagian head
,
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Pacifico:400' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.simple-text-rotator.js"></script>
Pada potongan skrip diatas, disana untuk Library jQuery dapat menggunakan versi online (CDN). Kemudian untuk CSS
nya kalian bisa lihat potongan skrip kode berikut:
html { height: 100%; } body { background: #f4eedf; padding: 0; text-align: center; font-family: 'open sans'; position: relative; margin: 0; height: 100%; } .wrapper { height: auto !important; height: 100%; margin: 0 auto; overflow: hidden; } a { text-decoration: none; } h1, h2 { width: 100%; float: left; } h1 { margin-top: 100px; color: #555; margin-bottom: 5px; } h2 { color: #999; font-weight: 100; margin-top: 0; margin-bottom: 10px; } .pointer { color: #9b59b6; font-family: 'Pacifico', cursive; font-size: 30px; margin-top: 15px; } pre { margin: 80px auto; } pre code { padding: 35px; border-radius: 5px; font-size: 15px; background: rgba(0,0,0,0.1); border: rgba(0,0,0,0.05) 5px solid; max-width: 500px; } .main { float: left; width: 100%; margin: 0 auto; } .main h1 { padding:150px 50px; float: left; width: 100%; font-size: 45px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-weight: 100; color: white; margin: 0; } .main h1.demo1 { background: #1ABC9C; } .main h1.demo2 { background: #e74c3c; } .main h1.demo3 { background: #e67e22; } .main h1.demo4 { background: #f1c40f; } .main h1.demo5 { background: #34495e; } .reload, .btn{ display: inline-block; border: 4px solid #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: rgba(255,255,255, 0.75); display: inline-block; line-height: 100%; padding: 0.7em; text-decoration: none; opacity: 0.7; color: #555; width: 100px; line-height: 140%; font-size: 17px; font-family: open sans; font-weight: bold; } .reload:hover, .btn:hover { background: white; } .btn { width: 200px; } .btns { width: 230px; margin: 50px auto; } .credit { text-align: center; color: #999; padding: 10px; margin: 0 0 40px 0; background: rgba(255,255,255,0.25); float: left; width: 100%; } .credit a { color: #555; text-decoration: none; font-weight: bold; }
Lalu kita menuju ke CSS Plugin
, potongan skrip kodenya sebagai berikut:
.rotating { display: inline-block; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); -moz-transform: rotateX(0) rotateY(0) rotateZ(0); -ms-transform: rotateX(0) rotateY(0) rotateZ(0); -o-transform: rotateX(0) rotateY(0) rotateZ(0); transform: rotateX(0) rotateY(0) rotateZ(0); -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -webkit-transform-origin-x: 50%; } .rotating.flip { position: relative; } .rotating .front, .rotating .back { left: 0; top: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .rotating .front { position: absolute; display: inline-block; -webkit-transform: translate3d(0,0,1px); -moz-transform: translate3d(0,0,1px); -ms-transform: translate3d(0,0,1px); -o-transform: translate3d(0,0,1px); transform: translate3d(0,0,1px); } .rotating.flip .front { z-index: 1; } .rotating .back { display: block; opacity: 0; } .rotating.spin { -webkit-transform: rotate(360deg) scale(0); -moz-transform: rotate(360deg) scale(0); -ms-transform: rotate(360deg) scale(0); -o-transform: rotate(360deg) scale(0); transform: rotate(360deg) scale(0); } .rotating.flip .back { z-index: 2; display: block; opacity: 1; -webkit-transform: rotateY(180deg) translate3d(0,0,0); -moz-transform: rotateY(180deg) translate3d(0,0,0); -ms-transform: rotateY(180deg) translate3d(0,0,0); -o-transform: rotateY(180deg) translate3d(0,0,0); transform: rotateY(180deg) translate3d(0,0,0); } .rotating.flip.up .back { -webkit-transform: rotateX(180deg) translate3d(0,0,0); -moz-transform: rotateX(180deg) translate3d(0,0,0); -ms-transform: rotateX(180deg) translate3d(0,0,0); -o-transform: rotateX(180deg) translate3d(0,0,0); transform: rotateX(180deg) translate3d(0,0,0); } .rotating.flip.cube .front { -webkit-transform: translate3d(0,0,100px) scale(0.9,0.9); -moz-transform: translate3d(0,0,100px) scale(0.85,0.85); -ms-transform: translate3d(0,0,100px) scale(0.85,0.85); -o-transform: translate3d(0,0,100px) scale(0.85,0.85); transform: translate3d(0,0,100px) scale(0.85,0.85); } .rotating.flip.cube .back { -webkit-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.9,0.9); -moz-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); -ms-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); -o-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); } .rotating.flip.cube.up .back { -webkit-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.9,0.9); -moz-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); -ms-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); -o-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); }
Lanjutkan ke bagian aktivasi jQuerynya:
<script> $(document).ready(function(){ $(".demo1 .rotate").textrotator({ animation: "fade", speed: 1000 }); $(".demo2 .rotate").textrotator({ animation: "flip", speed: 1250 }); $(".demo3 .rotate").textrotator({ animation: "flipCube", speed: 1500 }); $(".demo4 .rotate").textrotator({ animation: "flipUp", speed: 1750 }); $(".demo5 .rotate").textrotator({ animation: "spin", speed: 2000 }); }); </script>
Untuk isinya sendiri, pada bagian body kalian bisa berikan potongan skrip kode berikut ini:
<div class="wrapper"> <div class="main"> <h1 class="demo1">Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style</h1> <h1 class="demo2">Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style</h1> <h1 class="demo3">Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style</h1> <h1 class="demo4">Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style</h1> <h1 class="demo5">Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style</h1> </div> </div>
Berikut keseluruhan kode, secara utuh:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery Text Rotator | Kursus Web YELLOWWEB.ID</title> <meta name="title" content="Tutorial jQuery Text Rotator Plugin | YELLOWWEB.ID" /> <meta name="description" content="Membuat Text Rotator dengan menggunakan Plugin jQuery" /> <meta name="author" content="YELLOWWEB"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Pacifico:400' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.simple-text-rotator.js"></script> <style> html { height: 100%; } body { background: #f4eedf; padding: 0; text-align: center; font-family: 'open sans'; position: relative; margin: 0; height: 100%; } .wrapper { height: auto !important; height: 100%; margin: 0 auto; overflow: hidden; } a { text-decoration: none; } h1, h2 { width: 100%; float: left; } h1 { margin-top: 100px; color: #555; margin-bottom: 5px; } h2 { color: #999; font-weight: 100; margin-top: 0; margin-bottom: 10px; } .pointer { color: #9b59b6; font-family: 'Pacifico', cursive; font-size: 30px; margin-top: 15px; } pre { margin: 80px auto; } pre code { padding: 35px; border-radius: 5px; font-size: 15px; background: rgba(0,0,0,0.1); border: rgba(0,0,0,0.05) 5px solid; max-width: 500px; } .main { float: left; width: 100%; margin: 0 auto; } .main h1 { padding:150px 50px; float: left; width: 100%; font-size: 45px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-weight: 100; color: white; margin: 0; } .main h1.demo1 { background: #1ABC9C; } .main h1.demo2 { background: #e74c3c; } .main h1.demo3 { background: #e67e22; } .main h1.demo4 { background: #f1c40f; } .main h1.demo5 { background: #34495e; } .reload, .btn{ display: inline-block; border: 4px solid #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: rgba(255,255,255, 0.75); display: inline-block; line-height: 100%; padding: 0.7em; text-decoration: none; opacity: 0.7; color: #555; width: 100px; line-height: 140%; font-size: 17px; font-family: open sans; font-weight: bold; } .reload:hover, .btn:hover { background: white; } .btn { width: 200px; } .btns { width: 230px; margin: 50px auto; } .credit { text-align: center; color: #999; padding: 10px; margin: 0 0 40px 0; background: rgba(255,255,255,0.25); float: left; width: 100%; } .credit a { color: #555; text-decoration: none; font-weight: bold; } </style> <link rel="stylesheet" type="text/css" href="simpletextrotator.css" /> <script> $(document).ready(function(){ $(".demo1 .rotate").textrotator({ animation: "fade", speed: 1000 }); $(".demo2 .rotate").textrotator({ animation: "flip", speed: 1250 }); $(".demo3 .rotate").textrotator({ animation: "flipCube", speed: 1500 }); $(".demo4 .rotate").textrotator({ animation: "flipUp", speed: 1750 }); $(".demo5 .rotate").textrotator({ animation: "spin", speed: 2000 }); }); </script> </head> <body> <div class="wrapper"> <div class="main"> <h1 class="demo1">Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style</h1> <h1 class="demo2">Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style</h1> <h1 class="demo3">Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style</h1> <h1 class="demo4">Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style</h1> <h1 class="demo5">Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style</h1> </div> </div> </body> </html>
Untuk melihat demonya, teman-teman bisa klik link berikut:
https://www.yellowweb.id/demo/jquery-text-rotator/