रेस्पॉन्सिव Timeline पोर्टफोलियो पेज कैसे समाप्त करें।

पिछले ट्यूटोरियल से आगे बढ़ते हुए, आइए अपने निर्माण को थोड़ा बढ़ाए।

Loading Icon

हम CSS3 एनिमेशन में तल्लीन करने जा रहे हैं और हमारे लोडिंग आइकन के लिए एक सरल स्पिनिंग एनीमेशन बनाते हैं। हमारे पास पेज पर पहले से ही मार्कअप है जिसकी ज़रूरत है, तो CSS में सीधे आइये।

1

div.loading {

2

    color: darken($grey, 20%);

3

    position: absolute;

4

    width: 100px;

5

    bottom: 15px;

6

    left: 50%;

7

    margin-left: -50px;

8

9

    img {

10

        vertical-align: middle;

11

12

        &.rotate {

13

            -webkit-animation-name: rotate;

14

            -ms-animation-name: rotate;

15

            animation-name: rotate;

16

            -webkit-animation-duration: 1s;

17

            animation-duration: 1s;

18

            -webkit-animation-iteration-count: infinite;

19

            -ms-animation-iteration-count: infinite;

20

            animation-iteration-count: infinite;

21

            -webkit-animation-timing-function: linear;

22

            -ms-animation-timing-function: linear;

23

            animation-timing-function: linear;

24

        }

25

26

27

    }

28

}

हमारे Sass फ़ाइल में portfolio-item ब्लॉक के बाद यह कोड रखें। इसके साथ शुरू करने के लिए, यहां हम लोड करने वाले div के लिए कुछ स्टाइल स्थापित कर रहे हैं। हम इसे absolute पोजीशन कर रहे हैं और सुनिश्चित कर रहे हैं कि यह एक margin-left -50px का उपयोग करके केंद्रित होता है, जो एलिमेंट की चौड़ाई का आधा हिस्सा है। यह CSS पोसिशन्स के ऊपरी बाएं कोने से एलिमेंट्स के लिए तैयार करने के लिए है।

अगला सेक्शन और भी दिलचस्प होगा। जैसा कि आपने HTML में देखा होगा हमने लोडिंग <img> टैग पर rotate क्लास को असाइन किया है, जिसे हम CSS एनीमेशन प्रदर्शन करने के लिए हुक के रूप में उपयोग करेंगे। यहां स्टाइल्स हमारे एनीमेशन के लिए सेट की गई हैं।

हम मूल रूप से CSS को बता रहे हैं कि हमारे एनीमेशन फंक्शन को क्या कहा जाता है (हम इसे एक पल में बनाएंगे), कितनी देर तक एनीमेशन चलाना चाहिए, कितनी बार चलाना चाहिए और उपयोग करने के लिए timing या easing फंक्शन के प्रयोग करना है। हमारी परियोजना (project) के लिए हम एक अच्छा स्मूथ 360 डिग्री रोटेशन चाहते हैं जो कभी भी बंद न हो। उपरोक्त कोड ठीक वही प्राप्त करेगा।

नोट: हमें ब्राउज़र की प्रीफ़िक्स्ड डेक्लरेशंस को शामिल करना होगा ताकि कोई भी यह भूल ना जाए - और हम हमारे लिए भारी भार उठाने के लिए एक Sass mixin का उपयोग करके इसे बेहतर कर सकते हैं।

चलो ब्राउज़र में एक नज़र डालें।

ठीक है, यह वास्तव में अच्छा लग रहा है, लेकिन एक बात मिसिंग है। यह एनिमेट नहीं हो रहा! चलिए यह फिक्स करते हैं निम्न कोड के साथ:

1

@-webkit-keyframes rotate {

2

    100% {

3

        -webkit-transform: rotate(360deg);

4

        transform: rotate(360deg);

5

        -webkit-transform-origin: center center;

6

        transform-origin: center center;

7

    }

8

}

9

10

@keyframes rotate {

11

    100% {

12

        -webkit-transform: rotate(360deg);

13

        -ms-transform: rotate(360deg);

14

        transform: rotate(360deg);

15

        -webkit-transform-origin: center center;

16

        -ms-transform-origin: center center;

17

        transform-origin: center center;

18

    }

19

}

तो यहाँ rotate फ़ंक्शन है। जिस तरह से यह काम करता है, वह एलिमेंट बदलने के लिए एनीमेशन में महत्वपूर्ण बिंदुओं को सेट कर रहा है। आप 0%, 25%, 50% और इसी तरह से, पर कुछ होने के लिए कुछ सेट कर सकते हैं। हमारा एनीमेशन बहुत सरल है, इसलिए हमें 100% पर एक डिक्लेरेशन की आवश्यकता है, जिसमें बताता है कि एलिमेंट 360 डिग्री तक घुमाया जाना चाहिए। इसका मतलब यह है कि हमारा एलिमेंट पूरे स्पिन का प्रदर्शन करेगा और वापस शुरू करेगा जहां वह शुरू होगा। हमारा पहला सेटअप सुनिश्चित करता है कि यह अनिश्चित काल तक जारी रहेगा। transform-origin प्रॉपर्टी CSS को कहती है की कहाँ एनीमेशन के लिए केंद्र बिंदु है। हम इसे केंद्र के शीर्ष बाएं कोने से स्पिन करने के लिए सेट कर सकते हैं (जो दिलचस्प लग सकता है!), लेकिन हम यहां हमारे एलिमेंट का सही केंद्र का उपयोग करना चाहते हैं। इस फाइल को सेव करें और ब्राउज़र में एक नज़र डालें!

यह उपरोक्त के समान दिखना चाहिए, लेकिन बहुत स्मूथ और तेज।

यह हमारे टाइमलाइन पोर्टफोलियो पेज को तैयार करता है, लेकिन एक बात हम इस ट्यूटोरियल के purposes के लिए जोड़ सकते हैं।

Loading Content

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

हम यहां jQuery के कुछ लाइनों के साथ इस बेहेवियर को अनुकरण (simulate) कर सकते हैं। ऊपर app.js खोलें और निम्नलिखित को जोड़कर शुरू करें, जहां ऊपर हमने हमारा मेनू शीर्षक क्लिक हैंडलर लिखा था।

1

var visibleHeight = $(document).height() - $(window).height();

2

var items;

सबसे पहले हमें दो वेरिएबल्स घोषित करने की जरूरत है जो हम बाद में उपयोग कर सकते हैं। दूसरा एक विशुद्ध रूप से एक डिक्लेरेशन है और उसे बाद में एक वैल्यू दी जायेगी। पहला, visibleHeight, window की हाइट को पकड़ लेते है और समग्र document की ऊंचाई से उसको घटा देता है। यह हमें उस क्षेत्र की ऊंचाई के साथ छोड़ देगा जो वर्तमान में यूजर के ब्राउज़र में दिखाई दे रहा है।

1

storeElements();

2

3

$(window).on('resize', function(e) {

4

    updateHeight();

5

});

6

7

$(window).on('scroll', function(e) {

8

    loadContent();

9

});

अगला, उपर्युक्त स्निपेट (snippet) जोड़ें। आप फ़ंक्शन के कुछ फ़ंक्शन कॉल्स देखेंगे जो अभी तक मौजूद नहीं हैं, जो ठीक है क्योंकि हम उन्हें अगले बना देंगे।

1

function storeElements() {

2

    items = $('.portfolio-item:lt(3)').clone();

3

    //Strip the first class from selection

4

    items.removeClass('first');

5

}

storeElements फ़ंक्शन हमारे DOM एलिमेंट्स के साथ हमारे items वैरिएबल को पॉप्युलेट करने का एक तरीका के रूप में कार्य करता है। हमारे मामले में हम पहले तीन portfolio-items को पकड़ना चाहते हैं। JQuery के lt() का उपयोग हमें चुनिंदा elements को चुनने देता है जो हम चाहते हैं। हमारे पास सिलेक्शन होने के बाद हमे उन्हें clone() करना चाहिए, इसलिए हम वास्तविक एलिमेंट्स का उपयोग नहीं कर रहे हैं, बल्कि इसके बजाय एक कॉपी का उपयोग कर रहे हैं। अंतिम चरण यह है कि first क्लास को रिमूव कर दें यदि पहले से मौजूद है, क्योंकि हमारे नए एलिमेंट्स में से कोई भी सूची में सबसे पहले नहीं है।

1

function updateHeight() {

2

    visibleHeight = $(document).height() - $(window).height();

3

}

इस फंक्शन को storeElements से ऊपर रखें। यह संभवतः सरल कार्य है क्योंकि यह केवल document ready करने पर किया गया है। इसके कारण मैंने ऐसा करने के लिए फ़ंक्शन का उपयोग किया है, इसे पुन: reusable रखने के लिए।

अब हम उस फंक्शन में जाते हैं जो काम कर रहा है...

1

function loadContent() {

2

3

    if($(window).scrollTop() >= visibleHeight) {

4

5

        $(window).unbind('scroll');

6

7

        var loadingWrap = $('.loading-wrap');

8

9

        loadingWrap.fadeIn(function() {

10

            setTimeout(function() {

11

                loadingWrap.before(items);

12

                loadingWrap.hide(function() {

13

                    updateHeight();

14

                    storeElements();

15

                    $(window).on('scroll', function() { loadContent(); });

16

                });

17

            }, 500);

18

        });

19

20

    }

21

}

ठीक है, हम यहाँ क्या कर रहे हैं पर कदम से कदम देखते हैं:

• जांचें कि क्या स्क्रॉल की position (scrolled past) से अधिक है या (वर्तमान में) visibleHeight के बराबर है।
• यदि ऐसा है, तो window से स्क्रॉल ईवेंट हैंडलर निकालें ताकि हम कंटेंट को प्रोसेस कर सकें।
• बाद में उपयोग के लिए loading-wrap को Cache करें।
• loading-wrap fade in होता है और एक बार fade पूर्ण हो जाता है...
• ...कंटेंट लोड करने के लिए "loading" अनुकरण करने के लिए एक छोटा Timeout सेट करें।
• loading-wrap से पहले हमारे क्लोन items को अटैच करें। यह लोडिंग आइकन और वर्तमान portfolio-items के बीच अच्छी तरह से स्लॉट करेगा।
• loading-wrap को हाईड करें और एक बार चुप जाए तो updateHeight करें, storeElements करें और फिर स्क्रॉल ईवेंट को इस फ़ंक्शन को चलाने के लिए निर्देशों के साथ window में पुन: संलग्न करें।

ओह! ऐसा लगता है कि बहुत कुछ है, तो फिर इसे फिर से चलाएं अगर आप को जरूरत है। एक बात जो आप नोटिस कर सकते हैं, यदि आपकी आंखें चील की तरह तेज हैं, कि हम loading-wrap में fade हो रहे हैं जो वास्तव में पहले से ही हमारे HTML में दिखाई दे रहा है। उस एलिमेंट को एक इनलाइन स्टाइल जोड़कर ठीक करें...

1

<div class="portfolio-item group loading-wrap" style="display:none;">

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

1

$('.menus h3').on('click', function(e) {

2

    $(this).next('ul').toggleClass('open');

3

    updateHeight();

4

    e.preventDefault(); return false;

5

});

हम बिलकुल शुरूआत में किए गए h3 क्लिक हैंन्डलर के अंदर हमें कॉल updateHeight() में जोड़ना होगा, इस तरह जब हम एक मेनू खोलने के लिए क्लिक करेंगे तो डॉक्यूमेंट की ऊंचाई में बदलाव को दर्शाने के लिए वेरिएबल अपडेट किए जाते हैं। इसके बिना, यदि आप मोबाइल पर एक मेनू खोलते हैं तो "loading" functionality को तोड़ा जाएगा क्योंकि visibleHeight  वेरिएबल गलत होगा।

Conclusion

हम अंत तक पहुँच चुके हैं! हम शायद हमारे द्वारा लिखे गए जावास्क्रिप्ट को व्यवस्थित कर सकते हैं और, वास्तविक स्थिति में यह संभवतः एक AJAX कॉल या कुछ और में बदल जाएगी।

मुझे आशा है कि आपने इस ट्यूटोरियल के साथ कुछ अलग अलग तकनीकें सीख ली हैं। यह बनाना मज़ेदार था और मैं आपके साथ इस जीवन में बहुत अच्छी डिजाइन लाने की प्रक्रिया को साझा करने में प्रसन्न हूं। मुझे यकीन है कि इसमें सुधार करने के कई तरीके हैं, इसलिए यदि आपके पास कोई सुझाव हैं तो कृपया मुझे कमैंट्स में बताएं!