Motion Smiley Face Using HTML, CSS, aur JavaScript

Web development ke fascinating duniya mein, kuch simple aur mazedaar project banane ka anubhav kuch alag hi hota hai. Aaj hum ek aise project ke baare mein baat karenge jisme hum HTML, CSS, aur JavaScript ka use karke ek smiley face banayenge. Chaliye shuruwat karte hain aur dekhte hain kaise hum ek motion smiley face ko banate hain.
Motion Smiley Face Using HTML, CSS, aur JavaScript

Motion Smiley Face Using HTML, CSS, aur JavaScript

HTML: Banaiye Mukh Ki Neenv

Sabse pehle, humein HTML ka use karke mukh ki neenv rakhni hogi. HTML (HyperText Markup Language) ek aisi language hai jisse hum webpages banate hain. Neeche diya gaya HTML code ek mukh banane ke liye ek saral udaharan hai:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Motion Smiley Face</title>
</head>
<body>
    <div class="face">
        <div class="eyes">
            <div class="eye"></div>
            <div class="eye"></div>
        </div>
    </div>
</body>
</html>
Yahan humne ek <div> ka istemaal kiya hai jo "smiley" naam se hai. Is <div> mein humne do aankhon (eyes) aur ek muh (mouth) ko sthapit kiya hai.

CSS: Ranginata Aur Sajawat

CSS (Cascading Style Sheets) ka istemaal karke hum webpages ko sundar aur aakarshak bana sakte hain. CSS mein humne mukh ko khoobsurat banane ke liye kuch style di hai. Neeche diya gaya CSS code ek aakarshak smiley face banane ke liye hai:
<style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #431d23;
        }
        .face{
            position: relative;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: #ffcd00;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .face::before{
            content: '';
            position: absolute;
            top: 180px;
            width: 150px;
            height: 70px;
            background: #b57700;
            border-bottom-left-radius: 70px;
            border-bottom-right-radius: 70px;
            transition: 0.5s;
        }
        .face:hover:before{
            top: 210px;
            width: 150px;
            height: 20px;
            background: #b57700;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;  
        }
        .eyes{
          position: relative;
          top: -40px;
          display: flex;
        }
        .eyes .eye{
            position: relative;
            width: 80px;
            height: 80px;
            display: block;
            background: #fff;
            margin: 0 15px;
            border-radius: 50%;
        }
        .eyes .eye::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 25px;
            transform: translate(-50%,-50%);
            width: 40px;
            height: 40px;
            background: #333;
            border-radius: 50%;
        }
    </style>
Is CSS code mein, humne mukh ko khoobsurat banane ke liye style di hai.

JavaScript: Abhaav Aur Ubhaar

Ab humein JavaScript ka istemaal karna hoga taki hum mukh ki vyavastha ko badal sakein. Neeche diya gaya JavaScript code, jo muh ki vyavastha ko badalne ke liye hai:
<script>
    document.querySelector('body').addEventListener('mousemove',eyeball);
    function eyeball(){
        var eye = document.querySelectorAll('.eye');
        eye.forEach(function(eye){
            let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
            let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);
            let radian = Math.atan2(event.pageX - x, event.pageY - y);
            let rot = (radian*(180/Math.PI) * -1) + 270;
            eye.style.transform = "rotate("+ rot+"deg)";
        })
    }
</script>
Yeh function smiley face ka muh badalne ke liye hai. "Vyakhya Badle" cursor ko idhar udhar karne par yeh vyavahaar badal jaata hai aur aankhein aur mukh khul jaati hai.

Full Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Motion Smiley Face</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #431d23;
        }
        .face{
            position: relative;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: #ffcd00;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .face::before{
            content: '';
            position: absolute;
            top: 180px;
            width: 150px;
            height: 70px;
            background: #b57700;
            border-bottom-left-radius: 70px;
            border-bottom-right-radius: 70px;
            transition: 0.5s;
        }
        .face:hover:before{
            top: 210px;
            width: 150px;
            height: 20px;
            background: #b57700;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;  
        }
        .eyes{
          position: relative;
          top: -40px;
          display: flex;
        }
        .eyes .eye{
            position: relative;
            width: 80px;
            height: 80px;
            display: block;
            background: #fff;
            margin: 0 15px;
            border-radius: 50%;
        }
        .eyes .eye::before{
            content: '';
            position: absolute;
            top: 50%;
            left: 25px;
            transform: translate(-50%,-50%);
            width: 40px;
            height: 40px;
            background: #333;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="face">
        <div class="eyes">
            <div class="eye"></div>
            <div class="eye"></div>
        </div>
    </div>
</body>
<script>
    document.querySelector('body').addEventListener('mousemove',eyeball);
    function eyeball(){
        var eye = document.querySelectorAll('.eye');
        eye.forEach(function(eye){
            let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
            let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);
            let radian = Math.atan2(event.pageX - x, event.pageY - y);
            let rot = (radian*(180/Math.PI) * -1) + 270;
            eye.style.transform = "rotate("+ rot+"deg)";
        })
    }
</script>
</html>
Result:
Motion Smiley Face Using HTML, CSS, aur JavaScript

Is tarah, humne HTML, CSS, aur JavaScript ka istemaal karke ek mazedaar motion smiley face banaaya hai. Yeh ek saral udaharan hai jise aap aur bhi sundar aur jivit bana sakte hain. Aasha hai ki yeh article aapke liye mahatvapurn aur prerak hoga! Keep coding, keep smiling!
Yeh chhote projects aapko web development ke career mein aage badhne mein sahayak ho sakte hain. Jaise-jaise aap aage badhenge, aap apne projects mein aur bhi sudhar aur naye ideas laa sakenge. All the best!😊

एक टिप्पणी भेजें

0 टिप्पणियाँ
* Please Don't Spam Here. All the Comments are Reviewed by Admin.