शुरुआती डेवलपर्स के लिए माइक्रो-इंटरेक्शन ट्यूटोरियल: सीएसएस और जावास्क्रिप्ट के साथ एक इंटरएक्टिव “लाइक” बटन कैसे बनाएं

शुरुआती डेवलपर्स के लिए माइक्रो-इंटरेक्शन ट्यूटोरियल: सीएसएस और जावास्क्रिप्ट के साथ एक इंटरएक्टिव “लाइक” बटन कैसे बनाएं

शुरुआती डेवलपर्स के लिए माइक्रो-इंटरेक्शन ट्यूटोरियल: सीएसएस और जावास्क्रिप्ट के साथ एक इंटरएक्टिव “लाइक” बटन कैसे बनाएं
СОДЕРЖАНИЕ
02 июня 2020

शुरुआती लोगों के लिए माइक्रो-इंटरैक्शन ट्यूटोरियल


मुझे लगता है कि यह कहना सुरक्षित है कि माइक्रो-इंटरैक्शन शांत हैं। हम – वेब लोग – सार्वभौमिक रूप से सभी उन्हें पसंद करते हैं। और इससे कोई फर्क नहीं पड़ता कि आप उन्हें देख रहे हैं या नहीं, वे एक महत्वपूर्ण उपयोगकर्ता अनुभव सुधार प्रदान करते हैं। अपनी वेबसाइट या वेब टूल को सूक्ष्मता से और अनुकूल तरीके से जीवन में लाकर, वे केवल उपयोगकर्ता को संपूर्ण बातचीत का आनंद देते हैं.

उस भावना में, मैं आपको एक त्वरित माइक्रो-इंटरेक्शन ट्यूटोरियल देना चाहता हूं और आपको दिखाता हूं कि एक कूल कैसे बनाया जाए "पसंद" आपकी साइट के लिए बटन। न्यूनतम कोड के साथ। यहाँ यह कार्रवाई में है:

अंगूठे-अप बटन के लिए बहुत रोमांचक है, क्या यह नहीं है? चलो उसे करें!

लेकिन पहले:

पहली बार में माइक्रो-इंटरैक्शन से परेशान क्यों?

मैं आपको यहाँ बहुत अधिक समझाने की कोशिश नहीं करने जा रहा हूँ, लेकिन कुछ बातों पर ध्यान दें.

माइक्रो-इंटरैक्शन थोड़ी देर के लिए आसपास रहे हैं – पर्याप्त है ताकि उनके पास भी हो पूरी किताबें उनके बारे में लिखा है। साथ ही, कई प्रयोग और अध्ययन किए गए हैं जो यह देखते हैं कि वे वास्तव में कितने उपयोगी और प्रभावी हैं.

सबसे उल्लेखनीय अनुसंधान घरों में से एक, नीलसन नॉर्मन ग्रुप, सूक्ष्म-बातचीत को अधिक देखता था 2018 में बारीकी से. उनके निष्कर्षों के अनुसार, अन्य बातों के अलावा, माइक्रो-इंटरैक्शन ने साबित किया है, सगाई को प्रोत्साहित करके उपयोगकर्ता अनुभव में सुधार, और संचार ब्रांड.

संक्षेप में, सूक्ष्म-बातचीत वास्तव में फायदेमंद हो सकती है यदि सही उपयोग किया जाए और, बहुत भारी भी नहीं। आज, हम आपको क्रिया में सूक्ष्म-सहभागिता का एक सरल उदाहरण दिखाने जा रहे हैं:

माइक्रो-इंटरैक्शन ट्यूटोरियल: हमारे अंगूठे-अप बटन का मार्कअप और मूल सीएसएस

�� नोट; सबसे नीचे, हमारे पास आपके लिए कुछ विकल्प हैं जिनमें हाथ से लिखने का कोड शामिल नहीं है.

सबसे पहले, हमें इसे काम करने के लिए कुछ अच्छे पुराने HTML और CSS जादू की आवश्यकता है। संरचना बहुत सीधी है.

हम स्वयं जैसे आइकन के लिए एसवीजी टैग का उपयोग करने जा रहे हैं – यह है बहुत बढ़िया; आप अधिकांश आइकन पा सकते हैं यहाँ. एसवीजी टैग की चौड़ाई और ऊंचाई की विशेषताओं को समायोजित करने के लिए, हम नीचे दिए गए HTML का उपयोग करने जा रहे हैं:

अब CSS के लिए, हम वास्तविक आधार पर जाने वाले हैं। हम यहां जो कुछ भी करना चाहते हैं, वह हमारे जैसे बटन को एक अच्छा रूप देना है और स्क्रीन पर सब कुछ केंद्रित है। हम पहले से ही जानते हैं कि हम क्लिक (सक्रिय वर्ग) पर एक वर्ग को टॉगल करने जा रहे हैं, इसलिए हमें इसके लिए जिम्मेदार होना चाहिए। जब हम सक्रिय और गहरे भूरे रंग में नहीं होते हैं तो हम नीले रंग से आइकन भरने जा रहे हैं:

तन {
प्रदर्शन: फ्लेक्स;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
ऊंचाई: 100vh;
}

.बटन की तरह {
प्रदर्शन: फ्लेक्स;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
}

.जैसे-बटन। सक्रिय {
-वेबकिट-एनीमेशन: पॉप 0.9s दोनों;
एनीमेशन: पॉप 0.9s दोनों;
}

.बटन की तरह svg {
अपारदर्शिता: 1;
}

.जैसे बटन svg पथ {
भराव: # 333;
संक्रमण: भरण .4 एस आसानी से बाहर;
}

.जैसे-बटन। सक्रिय svg पथ {
भराव: # 2196f3;
}

एक और चीज़ जो हम यहाँ चाहते हैं वह है बटन के सक्रिय होने पर उपयोग किया जाने वाला पॉप एनीमेशन, इसलिए हम इसे अपनी CSS फ़ाइल में जोड़ने जा रहे हैं:

@ -webkit- कीफ़्रेम पॉप {
0% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (1, 1, 1);
रूपांतर: scale3d (1, 1, 1);
}
30% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (1.25, 0.75, 1);
रूपांतर: स्केल 3 डी (1.25, 0.75, 1);
}
40% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (0.75, 1.25, 1);
रूपांतर: स्केल 3 डी (0.75, 1.25, 1);
}
50% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (1.15, 0.85, 1);
रूपांतर: स्केल 3 डी (1.15, 0.85, 1);
}
65% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (0.95, 1.05, 1);
रूपांतर: स्केल 3 डी (0.95, 1.05, 1);
}
75% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (1.05, 0.95, 1);
रूपांतर: स्केल 3 डी (1.05, 0.95, 1);
}
100% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (1, 1, 1);
रूपांतर: scale3d (1, 1, 1);
}
}

@keyframes पॉप {
0% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (1, 1, 1);
रूपांतर: scale3d (1, 1, 1);
}
30% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (1.25, 0.75, 1);
रूपांतर: स्केल 3 डी (1.25, 0.75, 1);
}
40% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (0.75, 1.25, 1);
रूपांतर: स्केल 3 डी (0.75, 1.25, 1);
}
50% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (1.15, 0.85, 1);
रूपांतर: स्केल 3 डी (1.15, 0.85, 1);
}
65% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (0.95, 1.05, 1);
रूपांतर: स्केल 3 डी (0.95, 1.05, 1);
}
75% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (1.05, 0.95, 1);
रूपांतर: स्केल 3 डी (1.05, 0.95, 1);
}
100% {
-वेबकिट-ट्रांसफॉर्म: स्केल 3 डी (1, 1, 1);
रूपांतर: scale3d (1, 1, 1);
}
}

"बातचीत" इस माइक्रो-इंटरैक्शन ट्यूटोरियल का हिस्सा

अब जब हमें मूल स्टाइल मिल गई है, तो वास्तविक इंटरैक्शन को संभालने का समय है – इसका मतलब है कि जावास्क्रिप्ट!

सबसे पहले, हमें एक जावास्क्रिप्ट फ़ंक्शन की आवश्यकता है जो किसी दिए गए अंतराल (न्यूनतम और अधिकतम) के बीच एक यादृच्छिक पूर्णांक बनाता है:

समारोह randomInt (न्यूनतम, अधिकतम) {
वापसी Math.floor (Math.random () * (अधिकतम – न्यूनतम + 1) + मिनट);
}

अगला, हमें एक और फ़ंक्शन की आवश्यकता होगी जो यादृच्छिक रूप से +1 या -1 देता है ताकि हमारे पास यादृच्छिक नकारात्मक या सकारात्मक मान हो सकें:

फ़ंक्शन प्लसऑर्मिनस () {
वापसी Math.random () < 0.5? -1 1;
}

अब वास्तविक इंटरैक्शन हैंडलिंग के लिए; इसे ठीक से समझाने के लिए कोड को देखें:

  • सबसे पहले, हम अपने बटन को एक चर में सहेजने जा रहे हैं और इसमें एक क्लिक ईवेंट श्रोता को जोड़ेंगे.
  • जब बटन पर क्लिक किया जाता है, तो हम एक preventDefault () फ़ंक्शन जोड़ने जा रहे हैं ताकि हम सुनिश्चित करें कि अवांछित कुछ भी न हो.
  • उसके बाद, हम अपने सक्रिय वर्ग को बटन में जोड़ने जा रहे हैं, जिसे हमने पहले सीएसएस के माध्यम से नीले रंग के साथ स्टाइल किया था.
  • फिर हम जेनरेटक्लोन्स () फ़ंक्शन को चलाने जा रहे हैं (जो अभी तक परिभाषित नहीं है), इसके माध्यम से एक पैरामीटर के रूप में हमारे बटन को पास करना.

let बटन = document.querySelector (".बटन की तरह");

button.addEventListener ("क्लिक", समारोह (ई) {
e.preventDefault ();
this.classList.toggle ("सक्रिय");
generateClones (this);
});

अब जेनरेटक्लोन्स () फ़ंक्शन को परिभाषित करते हैं और इसके साथ निम्न चरणों के माध्यम से चलते हैं:

  1. सबसे पहले, आइए एक यादृच्छिक संख्या के क्लोन पर निर्णय लें। हम आइकन के लिए दो और चार क्लोनों के बीच त्वरित करने जा रहे हैं। हम पहले से परिभाषित randomInt () फ़ंक्शन का उपयोग करने जा रहे हैं.
  2. फिर, प्रत्येक क्लोन के लिए, हम अपने बटन के अंदर SVG टैग का उपयोग करने जा रहे हैं "नमूना" और इसे एक नए चर में क्लोन करने के लिए क्लोनऑन (सच) जावास्क्रिप्ट फ़ंक्शन का उपयोग करें। हम यादृच्छिक पूर्णांक जनरेटर फ़ंक्शन का उपयोग करके अपने क्लोन के लिए 5 और 16 के बीच एक आकार को परिभाषित करने जा रहे हैं.
  3. अगला, हम अपने क्लोन को बटन से जोड़ने जा रहे हैं, पहले से उत्पन्न संख्या के साथ उनकी चौड़ाई और ऊंचाई निर्धारित करते हैं, और उनकी स्थिति को पूर्ण बनाते हैं ताकि हम उन्हें बटन से स्वतंत्र रूप से चारों ओर ले जा सकें.
  4. दूसरी चीज़ जो हमें चाहिए वह है हमारे क्लोन के लिए एक संक्रमण, इसलिए वे क्लिक करते समय केवल अपनी नई जगह पर नहीं जाते हैं.
  5. अब, वास्तविक परिवर्तनों को जोड़ने के लिए जो हमारे आइकन को चारों ओर ले जाएंगे, हम थोड़ा पागल होने जा रहे हैं। हम चाहते हैं कि हमारे क्लोन हमारे बटन के केंद्र से बेतरतीब ढंग से आगे बढ़ें। हमारे randomInt () और plusOrMinus () फ़ंक्शंस के संयोजन का उपयोग करके, हम X3 अक्ष में अपने क्लोनों को Transl3d CSS संपत्ति के साथ स्थानांतरित करने जा रहे हैं। हम भी एक का उपयोग करने जा रहे हैं "किराये का", क्योंकि हमारा संक्रमण अन्यथा लागू नहीं होगा। इसलिए एक सरल सेटटाइमआउट () फ़ंक्शन को जोड़ने से हमें इसे प्राप्त करने में मदद मिलेगी। उसी समय, हम ओपेसिटी को 0 पर ले जाने वाले हैं, जिससे क्लोन गायब हो जाते हैं.
  6. हमारे क्लोन हटाना। सभी जाज के साथ काम करने के बाद हमें DOM को क्लियर करना होगा। इसलिए हमें एक और सेटटाइमआउट () फ़ंक्शन की आवश्यकता है जो एक सेकंड के बाद डोम से हमारे क्लोन को हटाने जा रहा है.

जेनरेटक्लोन्स (बटन) {
// 1. सेट संख्या पर क्लोन और पुनरावृति उत्पन्न करें
आज्ञा देना क्लोन = randomInt (2, 4);
के लिए (इसे = 1; यह <= क्लोन; यह ++) {
// 2. एक चर में SVG टैग क्लोन प्राप्त करें और एक यादृच्छिक आकार उत्पन्न करें
चलो क्लोन करें"svg") .CloneNode (सही),
आकार = यादृच्छिकभार (5, 16);
// 3. बटन पर हमारे क्लोन जोड़ें और इसकी ‘चौड़ाई / ऊंचाई / स्थिति बदलें
(क्लोन) button.appendChild;
clone.setAttribute ("चौड़ाई", आकार);
clone.setAttribute ("ऊंचाई", आकार);
clone.style.position = "पूर्ण";
// 4. कुछ आकर्षक बदलाव जोड़ें
clone.style.transition =
"बदलना 0.5s क्यूबिक-बेज़ियर (0.12, 0.74, 0.58, 0.99) 0.3s, अपारदर्शिता 1 आसानी-आउट .5 s।";
// 5. एक सेटटाइमआउट फ़ंक्शन के साथ हमारे आइकन को बाहर से चेतन करें ताकि CSS अनुपालन हो.
एनिमेटाउट = सेटटाइमआउट (फ़ंक्शन () {
clone.style.transform =
"translate3d (" +
plusOrMinus () * randomInt (10, 25) +
"पिक्सल," +
plusOrMinus () * randomInt (10, 25) +
"पिक्सल, 0)";
clone.style.opacity = 0;
clearTimeout (animTimeout);
}, 1);
// 6. 0.9 सेकंड के बाद क्लोन को निकालना
LetNodeTimeout = setTimeout (फ़ंक्शन () {
clone.parentNode.removeChild (क्लोन);
clearTimeout (removeNodeTimeout);
}, 900);
}
}

बस! हमने इसे अंत के माध्यम से बनाया है! नीचे आपको सभी कोड उदाहरण मिलेंगे:

पेन देखें
बटन की तरह
आंद्रेई बालिकु द्वारा (@abaicus)
पर CodePen.

इसके माध्यम से जाने के लिए धन्यवाद!

वर्डप्रेस में माइक्रो-इंटरैक्शन जोड़ने के अन्य विकल्प

यदि मैन्युअल रूप से कोड लिखना पूरी तरह से आपकी बात नहीं है, तो वास्तव में काफी कुछ वर्डप्रेस प्लगइन्स हैं जो आप अपनी साइट पर माइक्रो-इंटरैक्शन प्राप्त करने के लिए उपयोग कर सकते हैं, बिना यह चिंता किए बिना कि यह कैसे काम करता है।.

सबसे पहले, आप का उपयोग कर सकते हैं इसे चेतन करें! CSS3 का उपयोग करके अपने पृष्ठों पर किसी भी तत्व को बहुत अधिक चेतन करने के लिए प्लगइन.

उदाहरण के लिए, आप एक बटन, या पाठ का एक टुकड़ा जोड़ सकते हैं, और फिर इसे एक निश्चित तरीके से क्लिक पर चेतन में सेट कर सकते हैं.

यहाँ एक उदाहरण है कि प्लगइन क्या कर सकता है – वीडियो ��.


इसे चेतन करें!

लेखक (ओं): ELEOPARD डिजाइन स्टूडियो


100% रेटिंग


40,000 + इंस्टॉल


4.7.0Requires

और जानकारी

animate-it.2.3.7.zip

वर्तमान संस्करण: 2.3.7

अंतिम अपडेट: 20 मार्च, 2020


100% रेटिंग


40,000 + इंस्टॉल


4.7.0Requires

WordPress.org Plugin Page


इसे चेतन करें!

एक और प्लगइन, और हमारे संपादक के पसंदीदा में से एक है शॉर्टकोड अल्टीमेट.

अलग-अलग शॉर्टकोड के पूरे ढेर में, साधारण एनिमेशन के लिए एक है। कुछ प्रीसेट हैं जैसे कि एनीमेशन को कैसे व्यवहार करना चाहिए, और आप ब्लॉक के अंदर बहुत कुछ डाल सकते हैं जो कि एनिमेटेड होने वाला है.

यहां एक एनिमेटेड बटन का उदाहरण है (ध्यान दें, एनीमेशन केवल पहली बार व्यूपोर्ट में स्क्रॉल किए जाने पर काम करता है; यदि आप इसे नहीं देखते हैं, तो पृष्ठ को ताज़ा करें):

मुझे क्लिक करें


वर्डप्रेस शॉर्टकोड प्लगइन – शॉर्टकोड अल्टीमेट

लेखक (ओं): व्लादिमीर अनोखिन


98% रेटिंग


800,000 + इंस्टॉल


WP 4.6 + की आवश्यकता है

और जानकारी

shortcodes-ultimate.5.9.0.zip

वर्तमान संस्करण: 5.9.0

अंतिम अपडेट: 24 मई, 2020


98% रेटिंग


800,000 + इंस्टॉल


WP 4.6 + की आवश्यकता है

WordPress.org Plugin Page


वर्डप्रेस शॉर्टकोड प्लगइन – शॉर्टकोड अल्टीमेट

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

आप माइक्रो-इंटरैक्शन के बारे में क्या सोचते हैं, क्या आप इस माइक्रो-इंटरैक्शन ट्यूटोरियल को अच्छे उपयोग और अपनी साइट पर कुछ जोड़ने के बारे में विचार कर रहे हैं? हमें टिप्पणियों में बताएं.

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector