स्क्रैम्पडैम: मज़ेदार वेब डिज़ाइन

वेब डिज़ाइन में एक प्रवृत्ति उस शैली की तरह होती है जिसे उन साइटों की प्राप्ति के लिए अपनाया गया है जो उपयोगकर्ताओं द्वारा दृढ़ता से स्वीकार किए जाते हैं, आमतौर पर अस्थायी अवधि में। 2016 में अब तक के रुझानों का हिस्सा और, जाहिर है, 2017 में टोन सेट करना जारी रखेगा, बहुत सारे स्क्रॉल के साथ एनिमेशन और लंबे खंड हैं।

यह कोई रहस्य नहीं है कि यह शैली उपयोगकर्ता के लिए काफी आकर्षक और मजेदार है, एनिमेशन के साथ हम साइट को सहज और मनोरंजक बना सकते हैं जब तक कि वे अच्छी तरह से उपयोग किए जाते हैं। इस कारण से हमने jQuery स्क्रॉलमाजिक प्लगइन का उपयोग करके आपकी वेबसाइट पर एनिमेटेड स्क्रॉल को शामिल करने के लिए एक ट्यूटोरियल बनाया है।

स्क्रॉलमाजिक: फन वेब डिज़ाइन

स्क्रॉलमाजिक एक पुस्तकालय है जिसे जावास्क्रिप्ट में बनाया गया है ताकि वेबसाइटों को स्थानांतरित करने के दौरान बातचीत की जा सके। यह अपने पूर्ववर्ती सुपरकॉर्करोरमा का एक पूर्ण पुनर्लेखन है और इसकी वास्तुकला आसान अनुकूलन और विलुप्तता की पेशकश करने वाले प्लगइन्स पर आधारित है।

यदि हम निम्नलिखित चीजों में से कुछ को लागू करना चाहते हैं तो यह आदर्श है:

• साइट की स्थिति या विस्थापन के आधार पर एनिमेशन। एनीमेशन को ट्रिगर करें या स्क्रॉल के आंदोलन के साथ इसे सिंक्रनाइज़ करें। बहुत प्रयास के बिना लंबन प्रभाव जोड़ें। अनंत स्क्रॉल के साथ एक पृष्ठ बनाएं, अजाक्स के साथ सामग्री लोड करने से निपटने।

स्क्रॉलमाजिक सुविधाएँ

• ऑप्टिमाइज़्ड प्रदर्शन, यह हल्का, लचीला है और एक्स्टेंसिबिलिटी की अनुमति देता है। इवेंट मैनेजमेंट और ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग। यह अनुकूली वेब डिज़ाइन का समर्थन करता है। इसमें दोनों दिशाओं (क्षैतिज और ऊर्ध्वाधर) में आंदोलनों के लिए समर्थन है। इसमें कंटेनरों (div) के भीतर आंदोलनों के लिए समर्थन है। यहां तक ​​कि एक पृष्ठ पर कई। यह ब्राउज़रों के लिए पूरी तरह से काम करता है: फ़ायरफ़ॉक्स 26+, क्रोम 30+, सफारी 5.1+, ओपेरा 10+, IE 9+। अपने गिटहब रिपॉजिटरी में, इसके विस्तृत दस्तावेज और कई एप्लिकेशन उदाहरण हैं।

स्क्रॉलमॉजिक प्राप्त करें

यह इसे विभिन्न तरीकों से प्राप्त करने के लिए उपलब्ध है।

1: गिटहब

git क्लोन क्लोन git: //github.com/janpaepke/ScrollMagic.git

2: बोवर

स्क्रॉल स्थापित करने वाला

3: नोड पैकेज मैनेजर

npm स्थापित करें

4: सीडीएन

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

आप यह भी पढ़ सकते हैं कि आउटलुक में एक ईमेल के डिजाइन को कैसे अनुकूलित किया जाए

स्थापना और उपयोग

स्थापना काफी सरल है, हम केवल HTML फ़ाइलों में कर्नेल फ़ाइल को शामिल करते हैं जहां हम इसका उपयोग करना चाहते हैं।

;

उपयोग के लिए, प्लगइन एक नियंत्रक-उन्मुख डिज़ाइन पैटर्न प्रदान करता है, जिसमें एक या अधिक दृश्य जोड़े जाते हैं। इन दृश्यों को परिभाषित करने के लिए उपयोग किया जाता है कि कंटेनरों में क्या होता है जब वे किसी विशिष्ट बिंदु पर जाते हैं।

यह एक मूल उदाहरण होगा:

// init कंट्रोलर var कंट्रोलर = new ScrollMagic.Controller (); // एक दृश्य नया स्क्रोलमैजिक बनाएं। सीन ({अवधि: 100, // यह दृश्य 100px ऑफसेट की स्क्रॉल दूरी के लिए होना चाहिए: 50 // 50px के लिए स्क्रॉल करने के बाद इस दृश्य को शुरू करें)).setPin ("# my-sticky- तत्व ") // दृश्य की अवधि के लिए तत्व को पिन करता है.addTo (नियंत्रक); // नियंत्रक को दृश्य असाइन करें

एक और अधिक उन्नत उदाहरण होगा, कई ऑफ़सेट प्राप्त करना, इसका स्रोत कोड होगा:

$ (फ़ंक्शन () {// डॉक्यूमेंट के लिए तैयार रहें // init कंट्रोलर var कंट्रोलर = new स्क्रॉलमाजिक.कंट्रोलर (); // बिल्ड ट्विन var tween = TweenMax.to ("# चेतन", 0.5, {स्केल: 3, सहजता: Linear.easeNone}); // बिल्ड सीन दृश्य = नया स्क्रोलमैजिक सीन। ({ट्रिगरएमेंट: "# मॉल्टीडायरेक्ट", अवधि: 400, ऑफसेट: 250}).सेटटीन (ट्वीन) ।सेटपिन ("# चेतन")। addIndicators ({name: "resize"}) // इंडिकेटर्स जोड़ें (प्लगइन की आवश्यकता है).addTo (कंट्रोलर); // init कंट्रोलर क्षैतिज var नियंत्रक_h = new ScrollMagic.Controller ({वर्टिकल: झूठे}) // बिल्ड ट्विन क्षैतिज संस्करण; // सेटपिन ("# चेतन").addIndicators ({नाम: "रोटेट"}) // संकेतक जोड़ें (प्लगइन की आवश्यकता है).addTo (कंट्रोलर_एच);});

आप प्लगइन प्रलेखन में उनके स्रोत कोड के साथ कई और उदाहरण पा सकते हैं।

हम आपको USB स्टिक का उपयोग करके विंडोज 10 की एक साफ स्थापना करने के लिए तैयार करेंगे