जब कोई तत्व व्यूपोर्ट में होता है तो मैं एनीमेशन शुरू करने के लिए निम्न फ़ंक्शन का उपयोग कर रहा हूं। ऐनिमेशन तब शुरू होना चाहिए जब 1) तत्व पहले से ही पृष्ठ लोड होने पर दिखाई दे रहा हो, या 2) तत्व को पहली बार स्क्रॉल करके।

यह कोड काम करता है, स्क्रॉल फ़ंक्शन को छोड़कर केवल तत्व को नीचे स्क्रॉल करते समय काम करता है। यदि मैं पृष्ठ को नीचे तत्व लोड करता हूं, और ऊपर स्क्रॉल करता हूं, तो एनीमेशन प्रारंभ नहीं होता है:

$(window).on("load", myanimation);

$(window).one("scroll", myanimation); // this only works on downward scroll

इस प्रकार मैं जांच कर रहा हूं कि तत्व दिखाई दे रहा है या नहीं:

$.fn.isInViewport = function () {
    let elementTop = $(this).offset().top;
    let elementBottom = elementTop + $(this).outerHeight();

    let viewportTop = $(window).scrollTop();
    let viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

और यह मेरा कार्य है:

function myanimation(e){

    if ($('#welcome').isInViewport()) {  
        console.log('In view.')
    } else {
        console.log('Not in view.')
    }
};

मैं केवल यह चाहता हूं कि एनीमेशन केवल पहली स्क्रॉल पर ही प्रदर्शन करे, इसलिए मैं .one का उपयोग कर रहा हूं।

मैं एनीमेशन को किसी भी दिशा से कैसे शुरू कर सकता हूं?

2
LBF 15 सितंबर 2019, 20:44

1 उत्तर

सबसे बढ़िया उत्तर

यहाँ आपकी समस्या का समाधान है।

var once = false;
$(window).on("load", myAnim);
$(window).one("scroll", scollTopCheck);

$.fn.isInViewport = function () {

    let elementTop = $(this).offset().top;
    let elementBottom = elementTop + $(this).outerHeight();

    let viewportTop = $(window).scrollTop();
    let viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

function scollTopCheck(){

    if($(window).scrollTop()>0 && !once){
        once = true;
        $(window).one("scroll", myAnim);
    }else{
        myAnim();  
    }
};

function myAnim(){
    if ($('#welcome').isInViewport()) {  
        console.log('In view.')
    } else {
        console.log('Not in view.')
    }
}
0
Chetan Prakash 15 सितंबर 2019, 21:30