Menggerakkan Bayangan Teks Dengan Mouse

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:

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