Animated Eyes Follow Mouse Cursor in Blogger & Wordpress HTML Code

Animated Eyes Follow Mouse Cursor in HTML Code

नमस्कार दोस्तों तो आज मैं बहुत ही दिनों के बाद कोई Script शेयर करने वाला हॅूं। जो की है Animated Eyes इसमें दो आँखे जो है वो आपनके कर्सर की तरह ही देखेंगी। आप जिधर अपने कर्सर को ले कर जायेंगें उधर ही आँखे भी देखेंगी । इसे आप अपने पेज इरर में भी लगा सकते है या कहीं और भी इसे इस्तेमाल कर सकते। तो अगर आप इसे लगाना चाहते है तो नीचे आपको कोड दिया गया है उस कोड को कॉपी कर ले और जिधर लगाना चाहते है उधर आप लगा सकते है जैसे की Page Error या कुछ ऐसी जगह जहाँ पर आप आप कुछ अच्छा बनाना चाहतें है इसे वेबसाइट में लगाइये जो भी ब्लॉगर या कोई और आपकी इन आँखों को देखेगा तो आपसे शायद ही जरूर पूछें।

तो अगर आप लगाना चाहते है तो आपको इसका कोड नीचे दिया गया जाकर अभी डाउललोड कर ले या कॉपी कर ले ।

इस लेख में, आप सीखेंगे कि एनिमेटेड आइज़ फॉलो माउस कैसे बनाया जाता है। यहाँ साधारण HTML CSS HTML का प्रयोग किया जाता है। वेबपेज को आकर्षक बनाने में एनिमेशन अहम भूमिका निभाता है। HTML eyes फॉलो माउस इफेक्ट यहां बनाया गया है।

HTML आंखें माउस प्रभाव का पालन करें

इस आईज़ फॉलो माउस कर्सर डिज़ाइन को बनाने के लिए कुछ CSS और कुछ जावास्क्रिप्ट का उपयोग किया गया है। लेकिन इसे डिजाइन करने के लिए आपको HTML के बारे में कुछ जानकारी होनी चाहिए। इस प्रकार के एनिमेशन का उपयोग किसी भी प्रकार के वेब तत्व या लोगो के साथ किया जा सकता है।

मैंने आपकी सुविधा के लिए नीचे एक डेमो दिया है। यहां आपको इस एनिमेटेड आईज फॉलो का लाइव प्रीव्यू दिखाई देगा। यहां से आप सभी कोड को सीधे कॉपी कर सकते हैं।

घने नीले वेबपेज पर दो वृत्त खींचे गए हैं। उस सर्कल को इस तरह से डिजाइन किया गया है कि यह एक आंख जैसा दिखता है।

उन वृत्तों में छोटे-छोटे वृत्त बनाए गए हैं जो नेत्रगोलक का कार्य करेंगे। जब आप माउस कर्सर की स्थिति बदलते हैं तो यह नेत्रगोलक आपके माउस कर्सर का अनुसरण करेगा।

Demo

Download Click here

Copy this Code

<!DOCTYPE html>
 <!--- Code Get Here https://priyanshuomsd.blogspot.com/2022/05/curser-eye-animated.html --->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style media="screen">
  @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: "Bebas Neue", cursive;
background: #fff;  
 }

.container {
display: flex;
}

.container .eyes {
position: relative;
width: 100px;
height: 100px;
display: block;
background-color: #fff;
margin: 0 20px;
border-radius: 50%;
box-shadow: 0 5px 45px rgba(0, 0, 0, 0.2), inset 0 0 15px #f5af19,
  inset 0 0 25px #f5af19;
}
.container .eyes::before {
content: "";
top: 50%;
left: 35px;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: #000;
position: absolute;
border: 10px solid skyblue;
box-sizing: border-box;
}

  </style>
</head>
<body>

      <div class="container">
        <div class="eyes"></div>
      
        <div class="eyes"></div>
        
      </div>

    <script type="text/javascript">
    document.querySelector("body").addEventListener("mousemove", eyeball);

    function eyeball() {
      const eye = document.querySelectorAll(".eyes");
      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 rotate = radian * (180 / Math.PI) * -1 + 270;
        eye.style.transform = "rotate(" + rotate + "deg)";
      });
    }

    </script>
  
 
  
 
</body>
</html>

इसी तरह के और बहुत सारे कोड की स्क्रीप्ट फ्री में पाने और नई-नई जानकारियाँ पाने के लिये हमारी वेबसाइट के साथ जुड़े रहें मैं इसी तरह के कोड की स्क्रीप्ट फ्री में लाता रहता। तो चलिये मिलते है किसी और नई पोस्ट के साथ तब तक के लिये जय जिन्द‚ जय भारत

धन्यवाद