AGcreator Blog

Smooth Scrolling Effect - Paling Simple BRO!

Haha , kenapa ane bilang paling simple? monggo sobat bukti.in sendiri yahh :D , pada kesempatan kali ini ane cuman mau re-share tutorial dari web nya abang ane "CSS-Tricks.com" wkwkwk, soalnya abang ane sama-sama tak berambut kaya author nya css-tricks.com :D hehe *bercanda ..

Untuk demonstransi nya , contoh kita akan membuat sebuah link/anchor text yang fungsinya ketika di klik link tersebut akan menggiring kita ( bukan menggiring bola ) untuk ke tempat/area divisi yang kita inginkan , contoh klik tombol tambahkan komentar dibawah ini :

Tambahkan Komentar

Markup seperti link di atas, ± Sepert ini :

<a href="#comment-form">Tambahkan Komentar</a>

Ekhm , belum beres bro! :D , sebelum bikin markup di atas jangan lupa pasang javascript di bawah ini tepat di atas kode </head> yaah bro, silahkan bro! jangan malu-malu :


<script type='text/javascript'>
//<![CDATA[
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
//]]>
</script>

Cara Menampilkan Jam, Hari & Tanggal dengan Javascript.

Kesempatan oh Kesempatan .. alhamdulillah akhirnya ada kesempatan juga buat sharing lagi! . kali ini saya ingin berbagi pengetahuan seputar bumbu Javascript.. tentang "Bagaimana Cara Menampilkan Jam dan Tanggal dan Hari dengan JavasScript" ..

Berikut Pilihan Javascript untuk Menampilkan Jam / Tanggal / Hari , sesuai dengan kebutuhan sobat :

Cara Menampilkan Tanggal dengan Javascript :


<script type='text/javascript'>
<!--
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(day + " " + months[month] + " " + year);
//-->
</script>

Hasilnya :

Cara Menampilkan Hari dan Tanggal dengan Javascript :

<script type='text/javascript'>
<!--
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum&#39;at', 'Sabtu'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var thisDay = date.getDay(),
    thisDay = myDays[thisDay];
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year);
//-->
</script>

Hasilnya :

Cara Menampilkan Jam saat ini! dengan Javascript ( Pasif ) :

<script type="text/javascript">
<!--
var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1) {
    curr_min = "0" + curr_min;
}
document.write(curr_hour + " : " + curr_min);
//-->
</script>

Hasilnya :

Dengan Format AM/PM :


<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12) {
    a_p = "AM";
} else {
    a_p = "PM";
}
if (curr_hour == 0) {
    curr_hour = 12;
}
if (curr_hour > 12) {
    curr_hour = curr_hour - 12;
}

var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1) {
    curr_min = "0" + curr_min;
}
document.write(curr_hour + " : " + curr_min + " " + a_p);
//-->
</script>

Hasilnya :

Cara Menampilkan Jam saat ini! dengan Javascript ( Aktif ) :

<div id="clock"></div>
<script type="text/javascript">
<!--
function showTime() {
    var a_p = "";
    var today = new Date();
    var curr_hour = today.getHours();
    var curr_minute = today.getMinutes();
    var curr_second = today.getSeconds();
    if (curr_hour < 12) {
        a_p = "AM";
    } else {
        a_p = "PM";
    }
    if (curr_hour == 0) {
        curr_hour = 12;
    }
    if (curr_hour > 12) {
        curr_hour = curr_hour - 12;
    }
    curr_hour = checkTime(curr_hour);
    curr_minute = checkTime(curr_minute);
    curr_second = checkTime(curr_second);
 document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;
    }

function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
setInterval(showTime, 500);
//-->
</script>

Hasilnya :

Silahkan berikan komentar jika ada pertanyaan :)

Cara Cepat Belajar Pure CSS3 Animation.

Hello world, Pada kesempatan kali ini Kang Rian ingin berbagi ilmu secara instan di dalam 1 halaman membahas seputar CSS Animasi ( Support di semua Browser ).

Apa itu Pure CSS Animation ?
Maksud dari Pure sendiri adalah , Pembuatan Animasi yang hanya menggunakan satu metode yaitu CSS (Cascading Style Sheets) , tanpa di iringi dengan panggilan Bumbu Javascript, dsb .

Berikut Simple Demonstrasi-nya sob :

Dan berikut adalah contoh mudah Syntax CSS Animasi :


.animasi {

position:relative;

animation:sukasuka 3s infinite; /*Safari*/

-webkit-animation:sukasuka 3s infinite; /*Chrome*/

}



@keyframes sukasuka

{

0% {top:0px; }

50% {top:50px;}

100% {top:0px;}

}



@-webkit-keyframes sukasuka /*Safari and Chrome*/

{

0% {top:0px; }

50% {top:5px;}

100% {top:0px;}

}

Pengertian dari Syntax CSS Animation di atas :

1. @keyframes : keyframes berfungsi untuk menentukan gerak animasi ..

2. sukasuka : itu hanyalah sebuah nama animasi yang menentukan animasi yang dibuat melalui properti @keyframes seperti contoh di atas , bisa dirubah sesuka hati sobat.

3. % : Persentase , nah! didalam @keyframe / menentukan gerak animasi , sobat bisa menggunakan persentase agar lebih mudah , setiap persentase 0 - 100% bisa sobat kreasikan sesuka-hati sobat. :)

4. -webkit- : Hmm, untuk sobat yang paham Syntax CSS3 , itu pasti udah pada tau yah :D .. Untuk sobat yang belum tau , -webkit- sendiri berfungsi agar CSS Animasi berjalan pada Browser-browser baru, seperti Google Chrome & Safari.

5. 3s : 3 Second , maksud nya adalah untuk menentukan durasi / kecepatan animasi yang di buat dari @keyframes tadi . :)

6. infinite : Maksudnya adalah menentukan bahwa animasi yang dibuat dari @keyframes tadi bergerak terus-menerus ( tanpa henti ) . Hehe kalo Bahasa sunda nya tuh "Teu Eureun-eureun" :D hehe *kidding

* Sekian penjelasan seputar Pure CSS3 Animation menurut Kang Rian , semoga postingan "Cara Cepat Belajar Pure CSS3 Animation" ini bermanfaat. Kurang dan lebih nya mohon dimaafkan, karena si akang juga sama-sama masih belajar.! hehe , untuk pertanyaan seputar CSS3 Animasi silahkan Komentar pada Form Komentar dibawah postingan ini .

Referensi : http://w3schools.com/css/css3_animations.asp