काइनेटिक स्क्रॉल बार

काइनेटिक स्क्रॉलिंग का प्रभाव अब लगभग हर जगह पाया जा सकता है। माउस के साथ स्क्रॉल करने पर यह आपकी उंगलियों या स्टाइलस और बहुत मज़ेदार के प्रबंधन के लिए वास्तव में आसान है।

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

एल्गोरिथ्म

आरंभ करने के लिए, सामान्य एल्गोरिथ्म (स्लाइडर + "स्क्रॉलिंग" खींचकर) पर विचार करें। यह आश्चर्यजनक रूप से सरल है:

• माउस को पकड़ें ऑब्जेक्ट पर, क्लिक के निर्देशांक याद रखें।
• ट्रैक माउसव्यू। यदि एक क्लिक (बिंदु 1) था, तो ऑब्जेक्ट को एक नए स्थान पर ले जाएं, अन्यथा कुछ भी न करें।
• गति को मापें। बस dx को परिभाषित करें: एक माउसव्यू घटना में x- ऑब्जेक्ट के समन्वय को बदलना।
• माउसअप पकड़ो। अंतिम dx के आधार पर, आप कुछ गति की गणना कर सकते हैं और उस दूरी को पा सकते हैं, जिस पर आप ऑब्जेक्ट को स्थानांतरित करना चाहते हैं।
• क्षीणन सूत्रों का उपयोग करना, वांछित दूरी पर वस्तु की गति को चेतन करना।

जाहिर है, सब कुछ काफी सरल है। जाहिर है, इस तरह के एक एल्गोरिथ्म सार्वभौमिक और न केवल जेएस के लिए उपयुक्त है ...

कार्यान्वयन

सुविधा के लिए, आप jQuery यूआई से jQuery पुस्तकालय और सहजता प्रभाव का उपयोग कर सकते हैं।
HTML कोड इस प्रकार होगा:

<div id="track"> <div id="thumb"></div> </div> 

जहां ट्रैक वह क्षेत्र है जिसमें स्लाइडर चलता है, और अंगूठे ही स्लाइडर है।
सीएसएस:

 #track { width: 500px; position: relative; display: block; height: 22px; margin: 20px; border: solid 1px #000; overflow: hidden; } #track #thumb { width: 70px; height: 22px; position: absolute; background-color: gray; left: 200px; } 

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

1. $ ट्रैक (jQuery ऑब्जेक्ट) - स्क्रॉल बार क्षेत्र
2. $ अंगूठा (jQuery ऑब्जेक्ट) - स्लाइडर
3. isClicked (बूल) - एक वैरिएबल जो यह निर्धारित करता है कि स्लाइडर क्लिक किया गया है या नहीं।
4. clickPointX (int) - x ऑब्जेक्ट पर क्लिक का समन्वय
5. dx (int) - एक माउसमोव इवेंट में किसी ऑब्जेक्ट के x निर्देशांक को बदलना।

 var $track = $('#track'); var $thumb = $('#thumb'); var isClicked = false; var clickPointX = 0; var dx = 0; 

सबसे पहले, कुछ लाल सिर वाले ब्राउज़रों को हमारे स्लाइडर को खींचने की कोशिश करने से रोकें:

 $thumb.bind('dragstart', false); 

हम ऑब्जेक्ट पर माउसडाउन प्रोसेस करते हैं:

 $thumb.mousedown( function(e) { //     clickPointX = e.pageX - $(this).offset().left; isClicked = true; $thumb.stop(); //    }); 

हम MouseMove को संसाधित करते हैं, लेकिन ऑब्जेक्ट पर नहीं, बल्कि पूरे दस्तावेज़ पर

 $(document).mousemove( function(e) { if (isClicked) { //   ,     //   var x = (e.pageX - $track.offset().left - clickPointX); //       if (x < -maxBorderOut) { x = -maxBorderOut; } if ( (x + $thumb.width()) > ($track.width() + maxBorderOut)) { x = $track.width() - $thumb.width() + maxBorderOut; } //   var selfLeft = parseInt($thumb.css('left')); $thumb.css({'left': x + 'px' }); dx = x - selfLeft; } }); 

यहां हम एक अघोषित चर maxBorderOut से मिलते हैं , जो अधिकतम पिक्सेल की संख्या को इंगित करता है जिसके द्वारा आप स्लाइडर को क्षेत्र की सीमाओं से परे खींच सकते हैं।
और अंत में, माउसअप:

 $(document).mouseup( function(e) { if (isClicked) { if (Math.abs(dx) < lapse) { dx = 0; } var selfLeft = parseInt($thumb.css('left')); //    // "impulse * dx"    ,     var x = (selfLeft + impulse * dx); // ,        scroll box'a if (x < 0) { x = 0; } if ( (x + $thumb.width()) > $track.width() ) { x = $track.width() - $thumb.width(); } //    $thumb.stop().animate({'left': x + 'px'}, speed, 'easeOutQuart'); } isClicked = false; }); 

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

निष्कर्ष

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

UPD एक jQuery प्लगइन बनाया, आप इसे यहाँ डाउनलोड कर सकते हैं । यह कैसे काम करता है, आप एक सरल हिंडोला का एक उदाहरण देख सकते हैं ...

उपयोग बहुत सरल है:

 <div id="track"></div> 

 $('#track').kineticBar()