14.1.15
37
Menggerakkan Bayangan Teks Dengan Mouse - Bila suatu benda (katakanlah teks sebagai objek) disorot lampu dari arah depan, maka benda tersebut akan menghasilkan efek banyangan yang berada dibelakang benda tersebut, begitu sebaliknya yang bila dari sisi kanan, efek bayangan akan tampil dari sisi kiri. Jika efek tersebut Anda deklerasikan pada sebuah teks, maka Anda bisa Membuat Efek Tulisan Dengan CSS Text Shadow untuk memberi efek bayangan, namun apakah Anda bisa menggerakkan bayangan teks tersebut.?

Seperti Cara Menampilkan Bayangan Teks Saat Hover pada pertemuan sebelumnya, tutorial kali ini saya akan coba menggerakkan bayangan teks tersebut dengan perintah panah mouse, sehingga Pointer Mouse (Panah Mouse) akan berperan sebagai lampu sorot untuk memberi bayangan pada teks yang dapat Anda atur tampilannya dari segala arah seperti ini:


mega shadow image





DEMO SHOW





NOTE -
Perhatikan panah mouse, coba geser panah mouse Anda kesudut kiri atas layar monitor, maka efek bayangan pada teks akan tampil dibawah teks dasar dengan efek mega-shadow (bayangan panjang dan membesar), dan sebaliknya -
Coba Anda geser panah mouse dari arah kiri, kanan, tengah-atas, tengah-bawah dan dari segala arah, maka Andalah yang menggerakkan bayangan teks tersebut dengan panah mouse dikomputer Anda.


Bagaimana.! sahabat mau mencoba efek seperti ini, cukup salin kode CSS berikut, lalu letakkan pada formulir kosong halaman posting mode tulis HTML (bukan yang Compose) sebagai tahap dasar percobaan. Kode lengkapnya seperti ini:



<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Oswald:700);
strong {
  display:block;
  position:absolute;
  width:100%;
  text-align:center;
  line-height:58px;
  color:hsl(201,3%,18%);
  font:65px "Oswald";
  text-transform:uppercase;
  perspective:100}

strong:first-child {
  transform:rotateX(-110deg);
  transform-origin:center bottom;
  color:transparent;
  user-select:none;
  text-shadow:0 0 1px hsla(201,3%,30%,.6),0 -7px 10px hsla(201,3%,30%,.3)}
</style>

Biasanya efek seperti ini identiknya selalu menggunakan fungsi gerak dengan elemen animasi, namun karena wilayah gerak jika menggunakan animasi akan terbatas, saya menggantikannya dengan perintah script untuk merotasi layar komputer secara responsive dengan kode script seperti ini:


<script>
$("html").mousemove(function(e) {
  var deg = (e.pageY/10)+240;
  var rotation = 'rotateX(' + deg + 'deg)';
  var rotate = {
      '-webkit-transform' : rotation,
      '-moz-perspective' : rotation,
      '-ms-perspective' : rotation,
      'perspective' : rotation}

  $("#shadow").css(rotate);
  var perspective = (e.pageX/2) + 25;
  var perspective = {
      '-webkit-perspective' : perspective,
      '-moz-perspective' : perspective,
      '-ms-perspective' : perspective,
      'perspective' : perspective}

  $("#perspective").css(perspective);
});
</script>


<h1 id="perspective">
<strong id="shadow">Sahabat Blogger 77</strong>
<strong>Sahabat Blogger 77</strong>
</h1>



Dengan begini saya yakin Anda pasti sudah menyimpan tulisan apa yang akan dijadikan sasaran percobaan efek seperti ini. Sembari Anda berpikir, beberapa efek pilihan dengan  teks sebagai objek sudah saya siapkan untuk melengkapi koleksi Anda seperti:

Mengontrol Efek Gerak Dengan Perintah Hover
Animasi Teks Hitam Putih Dengan Marquee
Menciptakan Efek Pelangi Pada Text
Membuat Efek CSS Animasi Pada Tulisan

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Menggerakkan Bayangan Teks Dengan Mouse
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

37 komentar

  1. Dapet Pertamax ni

    Awalnya saya ndak paham apa maksudnya mbak, tapi setelah saya taruh kursor ke atas kiri, baru saya terkejut ada munculnya bayang-bayang semi ayng muncul dari teksnya :D

    BalasHapus
    Balasan
    1. benar mas, karena kerja efeknya dengan mengontrol gerakan dengan perintah fungsi mousemove, tanpa ada gerakan dari panah mouse, efek tidak akan bisa dinikmati.

      Hapus
  2. Wuih ajeb2 banget itu effectnya. Pinter banget sih mbak?. Makan apa kok bisa pinter bikin effect yang nyata gitu? :-d

    BalasHapus
    Balasan
    1. makannya singkong bakar pakai keju mas :d

      Hapus
    2. devy makannya nasi ... minumnya tolak angin karn itulah devy pintar mas ary ... :)

      Hapus
    3. kalau mas ary sendiri makannya apa.?

      Hapus
    4. tuh benar kata mas Fiu, bukan makannya yang pakai apa tetapi minumnya tolak angin, kan orang pintar minum tolak angin, jangan es doger.hehe..!!

      Hapus
    5. Ah devy ini .... kn klo es doger bikin wajahnya devy makin seger ... mknya ksini dulu cobain atuh devy ...hehehe

      Hapus
    6. ngilu mas giginya minum es doger, padahal sudah pakai sensodent, tetap saja masih ngilu, apalagi musim hujan seperti ini, hehe..

      Hapus
    7. ya es jangan di gigit atuh ...hehehe ... devy blm pernah kn minum es doger ? hehehehe

      Hapus
    8. weeee... sudah tau, cuman tidak terlalu sering, kalau pengen saja ya minum dech, tuh pun terkadang berdua sama teman,

      Hapus
    9. weeeeeee sudah tho ...hehehehe :)
      tapi enak kn enak ? hehehe

      Hapus
    10. kurang mantef mas, tidak segerrr..!!
      enakan es buah mas.hehe

      Hapus
    11. heheheh, klo mkanya dg sy pasti jadi seger .....xixixixixixixixi .. (o)

      Hapus
  3. terus teks sasaran yang akan di eksekusi ditarus di bawah kode, di atas atau dmana nih ? hehehe

    BalasHapus
    Balasan
    1. <h1 id="perspective">
      <strong id="shadow">Teks Disisni...</strong>
      <strong>Teks Yang Sama Disini...</strong>
      </h1>


      namun sebariskan letak kode HTML agar bayang berada tepat sejajar dibawah teks dasar

      Hapus
    2. ow ..tadi sy kira krn ada kode itu di temptkn di template karn ada kode spt ini h1...

      Hapus
    3. karena saya tidak menggunakan elemen class pada CSS, jadi dengan tag h1 akan membuat teks memiliki font yang lebih besar dibanding font-normal.

      Hapus
    4. sudah sy coba ... eladalah .,. stelah di preview ,.,,,bayangan yg mucul bukan tulisan yg di maksud ,,,,,xixixixixixix

      Hapus
    5. lagian bayang devy dijadikan sasaran percobaan sih, hehe..

      Hapus
    6. hehehehe .... ydh nih bayangin devy sy balikin ... tpi devy nya aja deh yg sy bawa sbg gantinya,,, :)

      Hapus
    7. wahhh...mau diculik ya, gak mauuuuuuuu...!!!

      Hapus
    8. eh ... trs mw nya devy gmn coba klo gk mw dibawa ....hehehehe :D

      Hapus
    9. kira-kira mas fiu tau ga trik n tips buat menggerakkan hati mbak Devy :d

      Hapus
    10. apa tuh kang jum ? :-?
      pake es dogeeeeer kah ? hehehe

      Hapus
  4. bisaan aja nie mbak Dev, kreatif, keren apalagi yak....semuanya deh buat mbak Dev

    BalasHapus
  5. Kalau dijadikan header kayaknya bagus nih. Cuman gak tau deh caranya sama atau enggak.

    BalasHapus
    Balasan
    1. untuk header satu kolom mungkin sama penggunaannya, tetapi akan berpengaruh jika header yang memiliki 2 kolom. karena kolom terbagi 2 dengan widget page

      Hapus
  6. .Wah keren juga nih mbak. .Baru tau nih berkat si mbak bahwa bayangan teks bisa dimoving juga. :)

    BalasHapus
  7. menarik juga ya bayangannya , mengikuti gerak mouse . warna bayangannya bisa dirubah gak min ?

    BalasHapus
  8. keren itu bisa menarik perhatian pengunjung buat nge-klik

    BalasHapus
  9. wahh keren ini mbak tutorial menggerakan bayangan teks dengan mouse nya keren ini tutorial nya :)

    BalasHapus
  10. pakai perspektif ya mbak...tampilannya keren....saya pelajari dulu ya mbak...terima kasih tutornya.

    BalasHapus
    Balasan
    1. sebenarnya lebih kepada perintah move dengan mouse sebagai alatnya, sedangkan perspective kan arah pandang, atau dari arah mana objek tersebut akan bergerak jika dipandang (perspective). seperti itu mbah.

      Hapus
  11. kira-kira kalo mao dibuat seperti bisa ga mbak :d
    aku tak jadi satpam saja dech mbak, buat mantau siapa saja yang comment cz yang befinian ga ngeh :d (c)

    BalasHapus
  12. Asyik juga ya kalo ada efek bayangannya

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK