03 01
अलिकडील Atomic.io अद्यतनमध्ये स्क्रॉल करण्यायोग्य कंटेनर्स समाविष्ट आहेत
काही महिन्यांपूर्वी मी दाखविले की परमाणु मोशन करण्यासाठी प्रोटोकॉलचा वापर कसा केला जाऊ शकतो . क्लायंटच्या किंवा संघाची कल्पनाशक्तीला जाण्याऐवजी मी त्या तुकड्यात ठेवलेले एक महत्त्वाचे गुण "गति दर्शवित आहे" हे महत्वाचे आहे. खरेतर, हे इतके गंभीर बनले आहे की दृश्यामध्ये UX / UI साधनांचा संपूर्ण नवीन श्रेणी दिसणार आहे. त्यामध्ये - ऍपल कीनोट, Adobe चे Edge Animate, Effects आणि UXPin नंतर , काही नाव. ब्लॉक्स्चे नवीन मुल अणुक्रमांक आहे. जेव्हा मी पहिल्यांदा या उत्पादनावर लिहिले तेव्हा ते खुले बीटामध्ये होते.
खुल्या बीटासबद्दल सुबक गोष्ट म्हणजे ते सॉफ्टवेअर निर्मात्यास सुविधा संचवर वापरकर्ता अभिप्राय गोळा करण्याची, गहाळ वैशिष्ट्यांसह, आणि नंतर त्यांना अनुप्रयोगास जोडा आणि त्यांना वाणिज्यिक रिलीझच्या आधी तपासण्याची संधी देते. आण्विक बाबतीत, मी खरोखरच एक वैशिष्ट्य गमावलेली सामग्री अनुलंब किंवा क्षैतिज स्क्रॉल करण्याची क्षमता होती यामध्ये कार्ड, स्लाइड शो किंवा एखादी अॅप किंवा साइटच्या इंटरफेसच्या कंपाऊंडमध्ये स्वाइप किंवा ड्रॅग केल्यासारख्या गोष्टी समाविष्ट असू शकतात.
हा खूप उपयोगकर्त्याचा विषय असला पाहिजे कारण स्क्रोल करण्यायोग्य कंटेनर या महिन्यामध्ये केवळ अॅप्समध्ये सादर केले गेले होते आणि मला प्रोटोटाइपमध्ये स्क्रोल करण्यायोग्य सामग्री तयार करणे हे मोकळे सोपे आहे.
कसे ते येथे आहे ...
02 ते 03
अणू मध्ये अनुलंब स्क्रोलिंग सामग्री कसे तयार करावे
आपण प्रथम 30-दिवसांच्या विनामूल्य चाचणीसाठी साइन अप करणे आवश्यक आहे आणि, त्या कालावधीच्या शेवटी आपल्याला तीन मूल्य योजना आखल्या जातील.
आपल्याला माहित असणे आवश्यक असलेली पहिली गोष्ट म्हणजे आपण करत असलेले सर्व काम ब्राऊजरमध्ये आहे आणि Google Chrome वर अॅपचे लक्ष्य आहे. एकदा आपण लॉग इन केल्यानंतर, आपल्याला प्रोजेक्ट पेजवर नेले जाईल. अॅप उघडण्यासाठी, नवीन प्रोजेक्ट बटण क्लिक करा .
जेव्हा इंटरफेस दिसेल, तेव्हा आपल्याला दिसेल की मर्यादित साधने आहेत, पेजेसवर पेजेस जोडण्याची क्षमता आणि पृष्ठांवर लेयर्स, आर्टबोर्ड आणि, उजवीकडे, संदर्भ-संवेदनशील गुणधर्म पॅनेल.
या उदाहरणात, मी आयफोन 5 प्रीसेटसह सुरुवात केली जे 320 x 568 आहे. मग आपण स्क्रॉल केलेले फोटो असलेली फोल्डर उघडा आणि त्यांना कॅनव्हासवर ड्रॅग करा. ते आपोआप प्रोजेक्टमध्ये जोडले गेले होते आणि तुम्ही पाहू शकता की आपण लेयर टॅबवर क्लिक केल्यास ते वैयक्तिक स्तरांवर आहेत. मी नंतर एरो टूल (सिलेक्शन) निवडले, एक इमेज निवडली आणि त्यातील काही स्पेस जोडण्यासाठी त्यास एका नव्या स्थितीत ड्रॅग केले. मी नंतर सर्व प्रतिमा निवडली आणि टूलबारवर उभेरित्या वितरित करा बटण क्लिक केले. हे प्रतिमा समान रीतीने अंतरित केले
पुढील चरण आहे स्क्रोल करण्यासाठी सर्व सामग्री निवडणे आणि एकतर कंटेनर बटणावर क्लिक करा किंवा गट बटण क्लिक करुन स्क्रोल कंटेनर तयार करा निवडा . एकदा कांटेनर तयार झाला की - आपण त्याला स्तर पॅनेलमध्ये पहाल - कंटेनरवर क्लिक करा आणि कॅनव्हालच्या तळाशी तळ हँडल ड्रॅग करा . प्रॉपर्टीस पॅनेलच्या तळाशी असलेल्या ' Preview' चे बटण दाबा आणि हे ब्राऊजर विंडो उघडेल. सामग्री स्क्रॉल करण्यासाठी आपल्या माउसचा स्क्रोल व्हील वापरा आपल्या प्रोजेक्टवर परत जाण्यासाठी, ब्राउझर विंडोच्या उजवीकडे तळाशी असलेले संपादन बटण क्लिक करा .
03 03 03
अणू मध्ये क्षैतिज स्क्रोलिंग सामग्री कशी तयार करायची
क्षैतिज स्क्रोल करणे पूर्ण करणे अगदीच सोपे आहे.
या प्रकरणात, प्रतिमांची एक श्रृंखला कॅनव्हासवर ड्रॅग केली आणि एकमेकांविरोधात त्यांचे अपयशी ठरले. निवडलेल्या प्रतिमांसह, मी सर्वांसाठी एकमेकांशी जुळले असल्याची खात्री करण्यासाठी त्यानंतर मी सर्वात वर संरेखित बटणावर क्लिक करा.
मी नंतर Shift की दाबून ठेवली आणि लेयर पॅनलमधील प्रत्येक लेयर निवडली. निवडलेल्या प्रतिमासह, मी कंटेनर बटणावर क्लिक केले आणि , गुणधर्म पॅनेलमध्ये, Behaviours क्षेत्रामध्ये क्षैतिजतेने निवडले .
मी नंतर पूर्वावलोकन बटण क्लिक करून एका ब्राउझर विंडोमध्ये प्रकल्पाची चाचणी केली.
जरी आपण वर्गात आणि क्षैतिज स्क्रोलिंगच्या स्वतंत्र आवृत्त्या कसे तयार करायचे हे मी दाखवले असले तरी, जोपर्यंत आपण स्क्रॅबल सामग्री कंटेनरमध्ये ठेवता, आपण या कंटेनर स्क्रीनच्या वेगवेगळ्या भागात घेऊ शकता. उदाहरणार्थ, एका वेब पृष्ठात एका बाजूच्या मेनूमध्ये अनुलंब स्क्रोलिंग सामग्री आणि त्याच पृष्ठावर स्लाइड-शोमध्ये क्षैतिज स्क्रोलिंग सामग्री असू शकते. खरं तर, एका कंटेनरमध्ये डझन किंवा इतक्या लघुप्रतिमा असलेल्या प्रतिमा पिकर सारख्या आयटमसाठी वर्टिकल आणि क्षैतिज स्क्रोलिंग दोन्ही असू शकतात.
Atomic.io मध्ये या वैशिष्ट्याबद्दल अधिक जाणून घेण्यासाठी चेक आउट करा:
- ब्लॉग घोषणा
- स्क्रोलिंग कंटेनर ट्यूटोरियल
- कंटेनर्स वापरून मास्किंग
- समस्यानिवारण स्क्रोलिंग कंटेनर्स