Cara Membuat Efek Bayangan Dinamis dengan CSS3-Javascript

Efek bayangan merupakan efek yang cukup familiar dan bahkan sudah banyak yang menggunakan efek ini pada website, karena dengan kemudahan dalam membuat dan tampilan yang cukup menarik untuk dilihat membuat efek ini banyak sekali dipakai dalam setiap tampilan web, berbicara mengenai efek bayangan, berikut ini akan saya bagikan tutorial bagaimana Cara Membuat Efek Bayangan Dinamis dengan CSS3-Javascript, cara membuat efek bayangan ini cukuplah mudah apalagi buat kalian yang sudah dan sering menggunakan CSS3, simak lagkah-langkah nya berikut ini.

Untuk membuat efek bayangan kita perlu membuat sebuah objek yang akan diberi efek bayangan dalam kasus ini saya akan membuat satu buah teks seperti berikut.

<body>
<div class="teks">DUMETSCHOOL.</div><br>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Setelah membuat objek yang akan diberi bayangan, selanjut nya kita desain tampilan teks diatas menjadi sedemikian rupa dan tentunya efek bayangan pada teks tersebut, ketikan sintak CSS3 berikut untuk desain dan efek bayangan pada teks.

@import url('https://fonts.googleapis.com/css?family=Baloo');
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: rgba(0,0,0,0.1);
}

.teks {
  font-family: 'Baloo', cursive;
  font-size: 7rem;
  color: white;

  text-shadow: 0 1px 0 rgb(190,190,190),
               0 2px 0 rgb(185,185,185),
               0 3px 0 rgb(180,180,180),
               0 4px 0 rgb(175,175,175),
               0 5px 0 rgb(170,170,170),
               0 6px 0 rgb(165,165,165),
               0 7px 0 rgb(160,160,160),
               0 8px 0 rgb(155,155,155),
               0 9px 0 rgb(150,150,150),
               0 0 10px rgba(0,0,0,0.30),
               0 0 25px rgba(0,0,0,0.25),
               0 0 50px rgba(0,0,0,0.20),
               0 0 75px rgba(0,0,0,0.15),
               0 0 100px rgba(0,0,0,0.10);
}

Setelah desain pada teks telah dibuat, langkah selanjutnya adalah membuat efek bayangan pada teks diatas menjadi dinamis, untuk membuat efek bayangan agar terlihat dinamis kita akan buat dengan sintak javascript berikut ini.

var minShadow = 5;
var maxShadow = 150;
var minStrength = 0.1;
var maxStrength = 0.15;
var deintensify = 1.5;

function calculateShadows(calcX,calcY) {

   if(calcX > 1) {
      calcX = 1;
   }
   if(calcX < -1) {
      calcX = -1;
   }
   if(calcY > 1) {
      calcY = 1;
   }
   if(calcY < -1) {
      calcY = -1;
   }

  var shadows = "";
  
  for (var i = 1; i < 10; i++) {
    shadows += i == 1 ? "" : ", ";
    shadows += "0 " + i + "px 0 rgb("+ (195 - i * 5) + "," + (195 - i * 5) + "," + (195 - i * 5) + ")";
  }

  for (var j = minShadow; j < maxShadow; j *= deintensify) {
    var opacity = maxStrength - (j - minShadow) / maxShadow * (maxStrength - minStrength);
    shadows += ", " + (calcX * j) + "px " + (calcY * j + 5) + "px " + j + "px rgba(0,0,0," + opacity + ")";
  }
  
  console.log(shadows);

  return shadows;
  
}

if (!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i)) {
   
   window.addEventListener('mousemove',function(e) {

     var baseX = (e.x - window.innerWidth / 2) * -1;
     var baseY = (e.y - window.innerHeight / 2) * -1;

     $('.teks').css('text-shadow', calculateShadows(baseX/(window.innerWidth / 2),baseY/(window.innerHeight / 2)));

   });
   
} else {
   
   window.addEventListener('deviceorientation',function(e){

      var sensitivity = 15;

      var baseX = e.gamma;
      var baseY = e.beta;

      $('.teks').css('text-shadow', calculateShadows(baseX/sensitivity,baseY/sensitivity));

   });
   
}

Setelah semua sintak diatas diketikan, selanjutnya simpan file nya kemudian silahkan buka pada browser masing-masing dan lihat hasil nya. Maka ketika kita arahkan kursor pada sudut atau arah yang berbeda akan terlihat bayangan dinamis sesuai dengan gerakan kursor.

Baik, itulah tadi tutorial mengenai bagaimana Cara Membuat Efek Bayangan Dinamis dengan CSS3-Javascript, semoga bermanfaat, amin 🙂

Untuk lebih jelas tampilan efek bayangan dinamis diatas kalian bisa melihat demo dibawah ini.

Selamat mencoba 🙂

DEMO

Risman Hakim Author

Menjadi seorang Web Designer membuat saya ingin selalu berbagi ilmu. Berbagi tidak mengurangi ilmu, dengan berbagi ilmu akan terus bertambah. Kenal lebih jauh tentang saya di DUMET School :)

Leave a Reply

Your email address will not be published. Required fields are marked *