उपयोगकर्ता विचार पृष्ठ के बाद CSS3 संक्रमण शुरू करें?

Question

मेरे पास मेरे होमपेज के शीर्ष पर एक CSS3 एनीमेशन है जो पृष्ठ लोड होने पर ही शुरू होगा। समस्या यह है कि यदि उपयोगकर्ता उस पृष्ठ को एक नए टैब में खोलता है लेकिन उसे तुरंत नहीं देखता है तो एनीमेशन तब भी खेलेंगे जब तक वे उस पृष्ठ को नहीं देख रहे हों।

क्या उपयोगकर्ता के पास उस पृष्ठ को देखने के बाद केवल एनीमेशन प्राप्त करने का कोई तरीका है?

जैसे कि अगर आप किसी अन्य छिपे हुए टैब में यूट्यूब वीडियो खोलते हैं तो यह स्वचालित रूप से तब तक नहीं खेलेंगे जब तक आप उस टैब को नहीं खोलते। जब तक आप देखते हैं तब टैब

Answer 1

आप दृश्यता API का उपयोग करना चाहेंगे यदि आप एक नए टैब में एक कलम इसे शुरू नहीं होते खोलने के लिए और भी CodePen ही करता है: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API

विशेष रूप से, आप चाहता हूँ document.hidden संपत्ति और visibilitychange घटना। document.hidden संपत्ति गलत होने पर आप इन्हें गतिशील रूप से अपनी कक्षाओं में बदलने के लिए उपयोग कर सकते हैं।

Answer 2

mentioned there के रूप में, आप यह जांच सकते हैं कि विंडो कब केंद्रित है, यानी उपयोगकर्ता पर क्लिक किया गया (लेकिन हालांकि इसे देखा नहीं गया)। आप इसे कैसे कार्यान्वित करेंगे?

आप जो भी आईडी/कक्षा/टैग चुनते हैं, जो भी हो। एनीमेशन के साथ इसे स्टाइल करें। एक बार उस विंडो पर ध्यान केंद्रित करने के बाद, आप किसी तत्व को आईडी/कक्षा लागू करते हैं या टैग/आईडी/कक्षा के साथ एक नया तत्व बनाते हैं। कक्षा जोड़े जाने के बाद, आप या तो onfocus फ़ंक्शन को हटा दें, या इस उद्देश्य के लिए बनाए गए एक चर के माध्यम से जांचें।

उदाहरण:

window.onfocus=function(){ 
 
    window.onfocus=null; 
 
    document.getElementById("toBeAnimated").className="animatable"; 
 
}

#toBeAnimated{ 
 
    font-size:25px; 
 
} 
 
.animatable{ 
 
    transition: background-color 250ms linear; 
 
    background-color:black; 
 
    transition: color 250ms linear; 
 
    color:white; 
 
}

<div id="toBeAnimated">Focus on the snippet to animate me!</div>

एक अन्य विकल्प: जब उपयोगकर्ता अपने पृष्ठ स्क्रॉल करने के लिए शुरू होता है आप onscroll घटना भी है, यानी करने के लिए समारोह आवेदन कर सकते हैं।