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:

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 class
ini 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 id
li 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:
Fayllar:https://drive.google.com/file/d/1QsyRVq6MA_P1mamyR4b00FymmvSPxOhG/view?usp=sharing
Juda zo'r do'stim , Yanada qiziq maqolalar kutib qolamiz
Raxmat😁
Ajoyib chiqibdi omad