Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. SVG
Webdesign

कैसे एक विश्व मानसिक स्वास्थ्य दिवस SVG रिबन चेतन को

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Afiff Soebarkah (you can also view the original English article)

विश्व स्वास्थ्य संगठन के "विश्व मानसिक स्वास्थ्य दिवस" यहां है, २०१८ अक्टूबर की 10 वीं, मानसिक स्वास्थ्य के मुद्दों के आसपास जागरूकता बढ़ाने में मदद । इस साल ध्यान हम सभी को बढ़ावा देने के समर्थन पर है, और के साथ शामिल हो, कार्यक्रमों और सेवाओं है कि युवा लोगों तक पहुंच सकते हैं, आदर्श प्रभावी ढंग से जल्दी के रूप में मुद्दों के इलाज के रूप में संभव है ।

दिन के लिए हम सीएसएस का उपयोग करने के लिए एक हरे रिबन कई लोगों को मानसिक स्वास्थ्य जागरूकता का प्रतीक पहनने पर केंद्रित SVG चेतन जा रहे है निशान ।

हम दो हाथ मंच के बाएं और दाएं तरफ से एक साथ अकवार के लिए एक साथ आ रहा हूं, समर्थन लोगों को एक दूसरे को प्रदान कर सकते हैं, जिसके बाद हरी रिबन कुछ वर्णनात्मक पाठ के साथ दिखाई देगा ।

जब आप कर रहे हैं, आप इस एनीमेशन होगा (प्रेस फिर से दौड़ की जरूरत है अगर):

1. स्टार्टर कोड प्राप्त करें

मैं आप के लिए SVG और एचटीएमएल कोड तैयार किया है अग्रिम में तो तुम सिर्फ सीएसएस का उपयोग करने के लिए विभिंन तत्वों है कि चित्रण शामिल चेतन पर ध्यान केंद्रित कर सकते हैं ।

शुरू करने के लिए, एक खाली HTML फ़ाइल बनाने के लिए, तो कॉपी और आप नीचे देख कोड में पेस्ट करें:

सहेजें और एक ब्राउज़र में अपनी फ़ाइल का पूर्वावलोकन करें और आप सभी SVG तत्वों दिखाई, दूसरों के ऊपर कुछ खड़ी के साथ इस छवि को देखना चाहिए:

World Mental Health Day 2018 first image

चलो प्रत्येक तत्व के टूटने के साथ शुरू SVG में शामिल है ताकि आप जानते है कि हम क्या काम कर रहे हैं ।

सबसे पहले हम सामने हाथ है कि SVG के बाईं ओर से प्रवेश करेंगे है:

World Mental Health Day 2018 the hand

तो फिर हम सही से प्रवेश करेंगे कि रियर हाथ है:

World Mental Health Day 2018 right hand

दो खुले हाथ स्क्रीन के केंद्र में पार कर दिया है के बाद, हम उन्हें पकड़ लिया हाथों से बदल जाएगा:

World Mental Health Day 2018 clasped hands

हम तो हरे रंग की मानसिक स्वास्थ्य जागरूकता रिबन कि में फीका होगा:

World Mental Health Day 2018 green ribbon

मुख्य "विश्व मानसिक स्वास्थ्य दिवस" पाठ है कि बाद में फीका होगा:

World Mental Health Day 2018 text label

और तिथि पाठ, जो अंतिम तत्व में फीका करने के लिए किया जाएगा:

World Mental Health Day 2018 subtitle

2. सीएसएस जोड़ना शुरू

सब कुछ हम अपने एनीमेशन के लिए की जरूरत है SVG कोड में पहले से ही है, हम बस में पहुंचने और तत्वों को अपनी आईडी के माध्यम से शामिल लक्ष्य की जरूरत है ।

हम क्या करने की जरूरत है पहली बात तो हम बाद में उचित समय पर हर एक को दिखा सकते हैं सभी तत्वों को छिपाने है । <style></style>आप अभी बनाया HTML फ़ाइल में पहले से मौजूद टैग के बीच में निम्न कोड जोड़ें ।

3. सामने वाले हाथ को लेफ्ट से एंटर कर दें

हम अपने अनुक्रम के हर हिस्से के लिए @keyframes एनिमेशन का उपयोग करेंगे । पहले एनिमेशन हम बनाएंगे एक है कि SVG के बाएं किनारे के बाहर एक स्थान से एक तत्व केंद्र में अपनी मूल स्थिति के लिए कदम कर सकते हैं ।

अपने सीएसएस के लिए निंनलिखित कोड जोड़ें ।

चलो हम इस कोड के साथ क्या कर रहे है के माध्यम से कदम ।

हमें केवल अपने तत्व को एक स्थिति से दूसरे स्थान पर ले जाने की आवश्यकता है, बल्कि यह अंतरिम पदों के माध्यम से वक्र होने से है । कि कारण के लिए हम बस से उपयोग कर सकते है और करने के बजाय प्रतिशत keyframes आधारित निर्दिष्ट करने की जरूरत है ।

keyframe से हम रूपांतरण संपत्ति का अनुवाद करने के लिए, अर्थात् स्थान का उपयोग करेगा, तत्व के लिए सभी तरह छोड़ दिया, एक स्थिति है जो के रूप में व्यक्त की है-१००% । keyframe में हम 0% के साथ तत्व की मूल स्थिति निर्दिष्ट करें । keyframe एनीमेशन स्वतः से और राज्यों के बीच तत्व चलती संभाल लेंगे ।

तुम भी अस्पष्टता नोटिस हूं दोनों keyframes में 1 के लिए सेट है । इसका मतलब यह तत्व एनीमेशन की शुरुआत में दिखाई देते हैं, अंत के लिए सभी तरह दिखाई रहने, तो 0 हम पहले सेट और एक बार फिर गायब हो डिफ़ॉल्ट अस्पष्टता को वापस बदल जाते हैं । हम इस की जरूरत के लिए रास्ता बना हाथ तत्व है कि बाद में दिखाई देगा के लिए करना होगा ।

अब हम हमारे SVG के सामने हाथ तत्व है, जो आईडी #fronthand का उपयोग करता है एनीमेशन लागू कर सकते हैं । अपने कोड के लिए निंनलिखित सीएसएस जोड़ें ।

यहां हम एनीमेशन नाम निर्दिष्ट कर रहे हैं, यानी infromleft, जो हमने अभी बनाया है एनीमेशन ट्रिगर करेगा। दूसरी पंक्ति में हम एनीमेशन को 1.5 सेकंड की अवधि में चलाने के लिए कह रहे हैं। और तीसरी पंक्ति में हम इसे आसानी से बाहर एनिमेशन समय समारोह का उपयोग करने के लिए कह रहे हैं, जो आंदोलन तेजी से शुरू तो अंत की ओर धीमा कर देगा.

जब आप सहेजें और अपने पृष्ठ को ताज़ा अब आप सामने हाथ से आते है और केंद्र में बंद करो, के रूप में नीचे चित्र के रूप में, एक संक्षिप्त क्षण के लिए गायब होने से पहले देखना चाहिए:

World Mental Health Day 2018 hand

4. दाईं ओर से रियर हाथ दर्ज करें

अब हम पहले के लिए एक और लगभग समान एनीमेशन बना देंगे, तत्व जा रहा है के बजाय बाएं से दाएं से में कदम होगा अंतर के साथ । अपनी शैली के लिए इस सीएसएस जोड़ें:

आप देखेंगे कि keyframe से में, हम १००% के बजाय-१००% है, जो एनीमेशन सही बढ़त पिछले बाहर बिंदु शुरू धक्का द्वारा अनुवाद । इस कोड में बाकी सब पिछले एनीमेशन के रूप में ही है ।

हम इस ऐनिमेशन को इस कोड को जोड़कर SVG में पीछे के हाथ के तत्व पर लागू करेंगे:

अब तुम दोनों को एक साथ आने के हाथ जब तक वे बीच में फिर से गायब होने से पहले पार देखना चाहिए ।

World Mental Health Day 2018 hands crossing over

5. हाथों को अकवार बनाएं

हम पहले से ही दो खुले हाथ गायब एक बार वे बढ़ समाप्त हो गया है । आगे, हम हाथ से पकड़ी तत्व तुरंत सही पल खुले हाथ गायब हो पर दिखाई बनाने की जरूरत है ।

ऐसा करने के लिए हम instantappear नाम का एक और keyframe एनीमेशन बनाएंगे । यह सब एनीमेशन एनीमेशन भर में 1 करने के लिए अस्पष्टता सेट करना होगा । अपनी फ़ाइल में इस सीएसएस जोड़ें:

इस कोड के साथ #claspedhands तत्व के लिए एनीमेशन लागू करें:

यहां, पहली दो पंक्तियों में हम अपने instantappear एनीमेशन फोन और 1 सेकंड के लिए अपनी अवधि निर्धारित किया है ।

तीसरी पंक्ति में हम एनीमेशन १.५ सेकंड है, जो हमारे पहले दो एनिमेशन की अवधि के साथ संगत द्वारा देरी करने के लिए कह रहे हैं । इस तरह जैसे ही वे समाप्त कर दिया है, इस एनीमेशन शुरू हो जाएगा ।

फिर चौथी पंक्ति में हम एनिमेशन-भरण-मोड गुण को अग्रेषित करने के लिए सेट कर रहे हैं । क्या यह करता है एनीमेशन बता अपने पिछले फ्रेम पर रोक और वहां रहने । यह अंत keyframe में 1 सेट की अस्पष्टता पर तत्व रखना होगा, बजाय 0 की डिफ़ॉल्ट अस्पष्टता वापस जाने की तरह हमारे सामने और पीछे हाथ किया था ।

अपने एनिमेशन का पूर्वावलोकन करें और जब यह समाप्त हो जाए तो आपको यह देखना चाहिए:

World Mental Health Day 2018 clasped hands

6. पुन: प्रयोज्य Keyframes के साथ शेष तत्वों में फीका

हम केवल तीन शेष तत्वों, एक है कि कुछ भी यह करने के लिए लागू किया जाता है में फीका होगा के लिए एक और एनीमेशन की जरूरत है । हम अपने अनुक्रम को पूरा करने के लिए विभिन्न सेटिंग्स के साथ प्रत्येक तत्व पर इसका इस्तेमाल कर सकते हैं ।

एक नया fadein नाम एनीमेशन बनाएं और यह अस्पष्टता से 0 अस्पष्टता 1 के लिए तो जैसे संक्रमण के लिए सेट:

हरे रिबन अगले तत्व हम प्रकट करना चाहते है, तो निंनलिखित सीएसएस के साथ यह करने के लिए हमारे नए fadein एनीमेशन लागू होते हैं:

यहां हम प्रभाव में फीका कर रहे है एक दूसरे के तीन तिमाहियों के लिए पिछले है, और हम इसे १.७५ सेकंड में शुरू करने के लिए सेट, पूर्ववर्ती एनिमेशन के बाद पूरा कर रहे हैं । फिर हम एनिमेशन-भरण-मोड: फारवर्ड का उपयोग करते हैं; को सुनिश्चित करने के तत्व अस्पष्टता 1 पर रहता है बजाय 0 को वापस बकायेदार ।

जब आपका अनुक्रम पूरा हो जाता है तो अब आपको यह देखना चाहिए:

World Mental Health Day 2018 final animation

अब हम मुख्य पाठ के रूप में अच्छी तरह से फीका कर देंगे । हम पहले से ही दस्तावेज़ में #wmhd शैली है, इसलिए इसे निंन पर अद्यतन करें:

हम एक ही कोड का उपयोग कर रहे है के रूप में हम #ribbon तत्व पर किया था, बस बाहर २.२५ सेकंड के लिए देरी धक्का तो हम मदों की उपस्थिति चौंका देने वाला ।

आपका एनिमेशन अब इस स्थिति में समाप्त करना चाहिए:

World Mental Health Day 2018 finish state

अंत में, हम तारीख को प्रकट करने की जरूरत है, इसलिए मौजूदा #date शैली को अद्यतन:

फिर, केवल परिवर्तन बाहर एनीमेशन के शुरू समय जोर दे रहा है ।

ऊपर लपेटकर

कोड की है कि पिछले टुकड़ा के साथ, अपने एनीमेशन अब पूरा हो गया है और जब यह चल रहा है यह इस तरह दिखना चाहिए खत्म:

World Mental Health Day 2018 complete clasping hands animation

विश्व मानसिक स्वास्थ्य दिवस के बारे में अधिक जानकारी के लिए जो वेबसाइट पर जाएं ।

सीएसएस एनीमेशन के बारे में सब जानें:

SVG एनीमेशन के बारे में और अधिक जानकारी प्राप्त:


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.