यह वही है जो हम बनाने जा रहे हैं, प्रभाव देखने के लिए अपने माउस को कणों पर ले जाएं।

इस लेख में, मैं आपको जावास्क्रिप्ट और HTML5 कैनवास का उपयोग करके एक मनोरम कण एनीमेशन बनाने की प्रक्रिया के बारे में बताऊंगा। यह प्रोजेक्ट न केवल आपके वेब पेज के सौंदर्यशास्त्र को बढ़ाता है बल्कि कुछ दिलचस्प कोडिंग अवधारणाओं को समझने का एक शानदार अवसर भी प्रदान करता है। आइए गोता लगाएँ!

परियोजना अवलोकन

एनीमेशन में ऐसे कण होते हैं जो एक केंद्र बिंदु के चारों ओर एक गोलाकार पैटर्न में घूमते हैं। जब माउस कैनवास पर मंडराता है, तो कण कर्सर की ओर आकर्षित होते हैं, जिससे एक गतिशील और आकर्षक प्रभाव पैदा होता है। हम कुछ यादृच्छिकता लाने और कणों की गति को अधिक जैविक और देखने में आकर्षक बनाने के लिए सिम्पलेक्स नॉइज़ लाइब्रेरी का उपयोग करेंगे।

प्रयुक्त तकनीकें

• HTML5 कैनवस: एनीमेशन प्रस्तुत करने के लिए।
• जावास्क्रिप्ट: एनीमेशन तर्क के प्रबंधन के लिए।
• सीएसएस: स्टाइल और लेआउट के लिए।
• सिंप्लेक्स शोर: कण आंदोलन में यादृच्छिकता जोड़ने के लिए।

पर्यावरण की स्थापना

आरंभ करने के लिए, एक HTML फ़ाइल बनाएं और निम्नलिखित स्क्रिप्ट टैग का उपयोग करके सिम्पलेक्स नॉइज़ लाइब्रेरी शामिल करें:

जावास्क्रिप्ट कार्यान्वयन

यहां जावास्क्रिप्ट में हमारे एनीमेशन का मुख्य भाग है। हम कणों के लिए कॉन्फ़िगरेशन को परिभाषित करेंगे और उन्हें खींचने के लिए कैनवास सेट करेंगे।

'सख्त उपयोग करें'; // जावास्क्रिप्ट में सख्त पार्सिंग और त्रुटि प्रबंधन को लागू करने के लिए सख्त मोड सक्षम करता है // कण प्रणाली के लिए कॉन्फ़िगरेशन ऑब्जेक्ट स्थिरांक विन्यास = { कण गणना: 100, // सिस्टम में कणों की कुल संख्या पार्टिकलप्रॉपकाउंट: 9, // प्रत्येक कण में गुणों की संख्या बेसटीटीएल: 1, // प्रत्येक कण के लिए जीवित रहने का आधार समय (सेकंड में) रेंज टीटीएल: 2, // समय-से-जीवित भिन्नता की सीमा (सेकंड में) बेसस्पीड: 0.001, // कण गति की बेस स्पीड रेंजस्पीड: 0.002, // कण गति में भिन्नता वृत्ताकार गति: 0.001, // कणों की वृत्ताकार गति की गति बेसरेडियस: 2, // कणों की न्यूनतम त्रिज्या रेंजरेडियस: 3, // कण त्रिज्या में अधिकतम भिन्नता बेसह्यू: 220, // कणों का बेसह्यू (रंग)। रेंजह्यू: 120, // कण रंगों के लिए रंग में भिन्नता पृष्ठभूमिरंग: '#111827', // पृष्ठभूमि का रंग वृत्त त्रिज्या: 250, // वृत्ताकार क्षेत्र की त्रिज्या जिसमें कण चलते हैं चमक शक्ति: 10, // कणों के चारों ओर चमक प्रभाव की ताकत यादृच्छिकताकारक: 4, // कण व्यवहार में यादृच्छिकता का परिचय देने वाला कारक निशान की लंबाई: 10.2, // कणों द्वारा छोड़े गए निशान की लंबाई माउसफोर्स: 2, // कणों को खींचने के लिए माउस आकर्षण बल में वृद्धि माउसरेडियस: 200 // त्रिज्या जिसके भीतर माउस का प्रभाव कणों को प्रभावित करता है }; // अतिरिक्त जावास्क्रिप्ट कोड यहां जाता है...

'use strict'; // Enables strict mode to enforce stricter parsing and error handling in JavaScript

// Configuration object for particle system
const config = {
    particleCount: 100,                  // Total number of particles in the system
    particlePropCount: 9,                // Number of properties each particle has
    baseTTL: 1,                          // Base time-to-live for each particle (in seconds)
    rangeTTL: 2,                         // Range of time-to-live variation (in seconds)
    baseSpeed: 0.001,                    // Base speed of particle movement
    rangeSpeed: 0.002,                   // Variation in particle speed
    circularSpeed: 0.001,                // Speed of particles' circular motion
    baseRadius: 2,                       // Minimum radius of particles
    rangeRadius: 3,                      // Maximum variation in particle radius
    baseHue: 220,                        // Base hue (color) of particles
    rangeHue: 120,                       // Variation in hue for particle colors
    backgroundColor: '#111827',          // Color of the background
    circleRadius: 250,                   // Radius of the circular area in which particles move
    glowStrength: 10,                    // Strength of the glow effect around particles
    randomnessFactor: 4,                 // Factor to introduce randomness in particle behavior
    trailLength: 10.2,                   // Length of the trail left by particles
    mouseForce: 2,                       // Increased mouse attraction force to pull particles
    mouseRadius: 200                      // Radius within which mouse influence affects particles
};

// Additional JavaScript code goes here...

उपरोक्त कोड में, हम अपने कणों के लिए विभिन्न गुणों को कॉन्फ़िगर करते हैं, जिसमें उनकी गिनती, गति, त्रिज्या, रंग (रंग), और कैनवास की पृष्ठभूमि का रंग शामिल है।

प्रारंभिक कण

हम कणों को एक गोलाकार पैटर्न में प्रारंभ करते हैं और उन्हें यादृच्छिक गुण निर्दिष्ट करते हैं:

फ़ंक्शन initParticles() { पार्टिकलप्रॉप्स = नया Float32Array(config.particleCount * config.particlePropCount); स्थिरांक कोणवृद्धि = TAU / config.particleCount; के लिए (मान लीजिए i = 0; i 'use strict'; // Enables strict mode to enforce stricter parsing and error handling in JavaScript // Configuration object for particle system const config = { particleCount: 100, // Total number of particles in the system particlePropCount: 9, // Number of properties each particle has baseTTL: 1, // Base time-to-live for each particle (in seconds) rangeTTL: 2, // Range of time-to-live variation (in seconds) baseSpeed: 0.001, // Base speed of particle movement rangeSpeed: 0.002, // Variation in particle speed circularSpeed: 0.001, // Speed of particles' circular motion baseRadius: 2, // Minimum radius of particles rangeRadius: 3, // Maximum variation in particle radius baseHue: 220, // Base hue (color) of particles rangeHue: 120, // Variation in hue for particle colors backgroundColor: '#111827', // Color of the background circleRadius: 250, // Radius of the circular area in which particles move glowStrength: 10, // Strength of the glow effect around particles randomnessFactor: 4, // Factor to introduce randomness in particle behavior trailLength: 10.2, // Length of the trail left by particles mouseForce: 2, // Increased mouse attraction force to pull particles mouseRadius: 200 // Radius within which mouse influence affects particles }; // Additional JavaScript code goes here... ड्राइंग कण

कोर एनीमेशन लॉजिक को ड्रॉ फ़ंक्शन में नियंत्रित किया जाता है, जहां हम कणों को लगातार अपडेट और प्रस्तुत करते हैं:

फ़ंक्शन ड्रा() { सही का निशान लगाना ; ctx.a.clearRect(0, 0, कैनवास.ए.चौड़ाई, कैनवास.ए.ऊंचाई); ctx.b.fillStyle = config.backgroundColor; ctx.b.fillRect(0, 0, कैनवास.ए.चौड़ाई, कैनवास.ए.ऊंचाई); ड्रापार्टिकल्स(); रेंडरग्लो(); रेंडरटूस्क्रीन(); requestAnimationFrame(ड्रा); }

'use strict'; // Enables strict mode to enforce stricter parsing and error handling in JavaScript

// Configuration object for particle system
const config = {
    particleCount: 100,                  // Total number of particles in the system
    particlePropCount: 9,                // Number of properties each particle has
    baseTTL: 1,                          // Base time-to-live for each particle (in seconds)
    rangeTTL: 2,                         // Range of time-to-live variation (in seconds)
    baseSpeed: 0.001,                    // Base speed of particle movement
    rangeSpeed: 0.002,                   // Variation in particle speed
    circularSpeed: 0.001,                // Speed of particles' circular motion
    baseRadius: 2,                       // Minimum radius of particles
    rangeRadius: 3,                      // Maximum variation in particle radius
    baseHue: 220,                        // Base hue (color) of particles
    rangeHue: 120,                       // Variation in hue for particle colors
    backgroundColor: '#111827',          // Color of the background
    circleRadius: 250,                   // Radius of the circular area in which particles move
    glowStrength: 10,                    // Strength of the glow effect around particles
    randomnessFactor: 4,                 // Factor to introduce randomness in particle behavior
    trailLength: 10.2,                   // Length of the trail left by particles
    mouseForce: 2,                       // Increased mouse attraction force to pull particles
    mouseRadius: 200                      // Radius within which mouse influence affects particles
};

// Additional JavaScript code goes here...

सीएसएस स्टाइलिंग

यह सुनिश्चित करने के लिए कि हमारा एनीमेशन बेहतर दिखे, हम बॉडी और कैनवास को स्टाइल करने के लिए कुछ सीएसएस का उपयोग करेंगे:

शरीर { प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; संरेखित-आइटम: केंद्र; ऊंचाई: 100vh; /* पूर्ण व्यूपोर्ट ऊंचाई */ मार्जिन: 0; पृष्ठभूमि: #000; /* वैकल्पिक: पृष्ठभूमि रंग */ } .सामग्री--कैनवास { स्थिति: निरपेक्ष; शीर्ष: 0; z-सूचकांक: 1; चौड़ाई: 100vw; /* पूर्ण व्यूपोर्ट चौड़ाई */ ऊंचाई: 100vh; /* पूर्ण व्यूपोर्ट ऊंचाई */ } कैनवास { प्रदर्शन: ब्लॉक; }

'use strict'; // Enables strict mode to enforce stricter parsing and error handling in JavaScript

// Configuration object for particle system
const config = {
    particleCount: 100,                  // Total number of particles in the system
    particlePropCount: 9,                // Number of properties each particle has
    baseTTL: 1,                          // Base time-to-live for each particle (in seconds)
    rangeTTL: 2,                         // Range of time-to-live variation (in seconds)
    baseSpeed: 0.001,                    // Base speed of particle movement
    rangeSpeed: 0.002,                   // Variation in particle speed
    circularSpeed: 0.001,                // Speed of particles' circular motion
    baseRadius: 2,                       // Minimum radius of particles
    rangeRadius: 3,                      // Maximum variation in particle radius
    baseHue: 220,                        // Base hue (color) of particles
    rangeHue: 120,                       // Variation in hue for particle colors
    backgroundColor: '#111827',          // Color of the background
    circleRadius: 250,                   // Radius of the circular area in which particles move
    glowStrength: 10,                    // Strength of the glow effect around particles
    randomnessFactor: 4,                 // Factor to introduce randomness in particle behavior
    trailLength: 10.2,                   // Length of the trail left by particles
    mouseForce: 2,                       // Increased mouse attraction force to pull particles
    mouseRadius: 200                      // Radius within which mouse influence affects particles
};

// Additional JavaScript code goes here...

अपनी अनूठी एनीमेशन बनाने के लिए कॉन्फ़िगरेशन ऑब्जेक्ट में कण गुणों के साथ प्रयोग करने में संकोच न करें! कोडपेन पर लाइव डेमो देखें और नीचे टिप्पणी में अपने विचार या संवर्द्धन साझा करें।