JavaScript || Sichqoncha harakati orqali animatsiya yaratamiz.

Bu maqolada animatsiya yaratamiz. JavaScriptning onmousemove dan foydalanamiz. Har bir qator kod uchun izoh qoldiraman.

Birinchi bo'lib sizlar bilishingiz kerak bo'lgan bilimlar:

HTML
CSS
JavaScript

Menda 4 ta rasm mavjud. 2 tasi orqa fonni kun va tundagi korinishi qolgan 2 tasi quyosh va oy.

Animatsiyamizning ko'rinishi:

Animatsiyamizning boshlang'ich ko'rinishi

Kod:

<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Animatsiya</title>
   <style>
       .kun{
           width: 800px;
           height: 600px;
           position: absolute;
           
       }
       .tun{
           width: 800px;
           height: 600px;
               position: absolute;
               
       }
   
       .quyo{
           top:150px;
           width: 800px;
           height: 600px;
           position: absolute;
       }
       .container{
           margin-left:250px;
           
           
       }
       
       
   </style>
</head>
<body>
   <div class="container" onmousemove="myFunction(event)">
       <img class="kun" src="kun.svg">
       <img id="demo" class="tun" src="tun.svg">
       <img id="quyo" class="quyo" src="quyosh.svg">
   </div>

   <script>
       function myFunction(e) {
         var x = e.clientX;
         var y = e.clientY;
         var d = (x * 0.0064516129/5.2)-0.2;
          var qay = d*360*1.2 ;
           
         document.getElementById("demo").style.opacity = d;
         var hg = "rotate(" + qay.toString() + "deg)";
         document.getElementById("quyo").style.transform = hg;
         if (qay>=270){
           document.getElementById("quyo").src = 'oy.svg';
         }
         else{
           document.getElementById("quyo").src = 'quyosh.svg';
         }
         
       }
       </script>
       
</body>
</html>

Birinchi bo'lib Html tilidagi kodlarni yozib olamiz:

<div class="container" onmousemove="myFunction(event)">
       <img class="kun" src="kun.svg">
       <img id="demo" class="tun" src="tun.svg">
       <img id="quyo" class="quyo" src="quyosh.svg">
   </div>

div tagining classini container deb olamiz va onmousemove="myFunction(event)" deb yozamiz bu agar sichqonchamiz shu divning ichiga olib borsak sichqonchamiz qanday kordinatada joylashganini myFunction funksiyasiga jo'natadi. Shu div ichiga 3 ta rasm joylaymiz.

JavaScript qismini tushuntirib o'taman:

<script>
       function myFunction(e) {
         var x = e.clientX;
         var y = e.clientY;
         var d = (x * 0.0064516129/5.2)-0.2;
         var qay = d*360*1.2 ;
           
         document.getElementById("demo").style.opacity = d;
         var hg = "rotate(" + qay.toString() + "deg)";
         document.getElementById("quyo").style.transform = hg;
         if (qay>=270){
           document.getElementById("quyo").src = 'oy.svg';
         }
         else{
           document.getElementById("quyo").src = 'quyosh.svg';
         }
         
       }
       </script>

myFunction() ga kelgan malumotni e o'zgaruvchisiga qabul qilib olamiz

var x = e.clientX; x o'zgaruvchisi hosil qilamiz va unga e o'zgaruvchisidan clientX ga tenglab olamiz. Y ni shunday qilib olamiz.

var d = (x * 0.0064516129/5.2)-0.2; d o'zgaruvchi hosil qilib olamiz va uni ko'paytiib olamiz(ekran va div hajmining nisbati)

var qay = d*360*1.2 ; qay o'zgaruvchisi quyosh va oy qandacha gradusda joylashishi

document.getElementById("demo").style.opacity = d; => demo idli tungi ko'rinishining rasmini opacity sini d(tun yoki kunligini belgilaydi)ga tenglab olamiz bunda sichqonchamizni rasmning o'ng tomoniga olib borsak tungi rasmimiz paydo bo'ladi.

var hg = "rotate(" + qay.toString() + "deg)";
document.getElementById("quyo").style.transform = hg;

hg o'zgaruvchisi matnli o'zgaruvchi bo'lib qay o'zgaruvchisidan kelgan malumotni "rotate()" ning qovslari ichiga kirgizadi va shu matnga tenglanadi. So'ngra quyo idli rasmni hg darajada buramiz.

if (qay>=270){
document.getElementById("quyo").src = 'oy.svg';
}
else{
document.getElementById("quyo").src = 'quyosh.svg';
}

Agar qay o'zgaruvchisi 270 gradusdan oshsa bizning quyoshimiz oy rasmi bilan alishadi(src dagi manzil alishtiriladi).

Sichqonchamizni rasmning o;ng tomoniga olib borganimizdagi animatsiyamizning ko'rinishi

Xulosa: Bugungi maqolamizdan siz onmousemove ni bilib oldingiz degan umiddaman. CSS ni izohlab ketmadim o'zingiz tushinib oldingiz deb o'ylayman. Rasm va shu animatsiyani shu maqolaning pastki qismida joylab qo'yaman.

Qanday ishlashini videodan ko'rib oling:

https://youtu.be/98iPtM1M4fM

Fayllar:https://drive.google.com/file/d/1QsyRVq6MA_P1mamyR4b00FymmvSPxOhG/view?usp=sharing