दिलचस्प पोस्ट
यूनिक्स सॉर्ट के साथ कई चाबियाँ छंटनी सेनर्स और अस्थिर वस्तुओं के साथ शब्दकोश निर्माण। आश्चर्यजनक जावा: स्ट्रिंग "\ uFFFF" को चार में परिवर्तित करें आर में कंसोल को साफ़ करने के लिए फ़ंक्शन जावास्क्रिप्ट फ़ंक्शन बनाम (फ़ंक्शन () {…} ()); माता पिता के सापेक्ष बच्चे के रूप में तत्व का सूचक प्राप्त करें 2 sed कमांडों के संयोजन Cython एक EXE करने के लिए संकलन कर सकते हैं? NSMenuItem कस्टम दृश्य के ऊपर गैप आदेश में कई क्षेत्रों में कोणीय बहुत अधिक फ़ील्ड संदर्भ: 70613; मैक्स 65536 है एंड्रॉइड Google+ एकीकरण – दोहराया प्रयोक्ता पुनर्प्राप्ति योग्यअनुवाद एक्सएसएल सीएसवी कनवर्टर CKEditor में विशिष्ट स्थिति में कर्सर सेट करें मामला असंवेदनशील फ्लास्क- SQLAlchemy प्रश्न

सामग्री स्क्रॉल दृश्य में जब CSS3 एनीमेशन सक्रिय करें

मेरे पास एक बार चार्ट है जो CSS3 के साथ एनिमेट करता है और वर्तमान में पेज लोड के रूप में सक्रिय होने वाले एनीमेशन है।

मेरे पास समस्या यह है कि दिए गए बार चार्ट को बहुत सारी सामग्री के कारण स्क्रीन से बंद किया जाता है, जब तक कोई उपयोगकर्ता इसे नीचे स्क्रॉल करता है, एनीमेशन पहले से ही खत्म हो चुका है

मैं तरीकों के लिए CSS3 या jQuery के माध्यम से या तो बार चार्ट पर CSS3 एनीमेशन को सक्रिय करने के लिए देख रहा था जब दर्शक चार्ट को देखता है

<div>lots of content here, it fills the height of the screen and then some</div> <div>animating bar chat here</div> 

यदि आप पृष्ठ लोड के बाद वास्तव में तेजी से सही स्क्रॉल करते हैं, तो आप इसे एनिमेटिंग देख सकते हैं।

यहाँ मेरे कोड का एक जेएसफ़ील्ड है इसके अलावा, मुझे नहीं पता कि यह क्या मामला है, लेकिन मेरे पास पृष्ठ पर इस बार चार्ट के कई उदाहरण हैं।

मैं एक jQuery प्लग-इन में आया हूं जिस तरह से बुलाया गया है लेकिन मुझे बिल्कुल काम करने के लिए कोई भाग्य नहीं मिला।

अगर कोई मुझे सही दिशा में इंगित कर सकता है, तो यह वास्तव में सहायक होगा

धन्यवाद!

Solutions Collecting From Web of "सामग्री स्क्रॉल दृश्य में जब CSS3 एनीमेशन सक्रिय करें"

स्क्रॉल ईवेंट कैप्चर करें

यह स्क्रॉल ईवेंट को कैप्चर करने के लिए JavaScript या jQuery का उपयोग करने की आवश्यकता है, प्रत्येक बार एक स्क्रॉल इवेंट आग लगने के लिए जांचता है कि तत्व दृश्य में है या नहीं।

तत्व देखने के बाद, एनीमेशन शुरू करें नीचे दिए गए कोड में, यह तत्व के लिए "प्रारंभ" वर्ग जोड़कर किया जाता है, जो एनीमेशन को ट्रिगर करता है

अपडेट डेमो

एचटीएमएल

 <div class="bar"> <div class="level eighty">80%</div> </div> 

सीएसएस

 .eighty.start { width: 0px; background: #aae0aa; -webkit-animation: eighty 2s ease-out forwards; -moz-animation: eighty 2s ease-out forwards; -ms-animation: eighty 2s ease-out forwards; -o-animation: eighty 2s ease-out forwards; animation: eighty 2s ease-out forwards; } 

jQuery

 function isElementInViewport(elem) { var $elem = $(elem); // Get the scroll position of the page. var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); var viewportTop = $(scrollElem).scrollTop(); var viewportBottom = viewportTop + $(window).height(); // Get the position of the element on the page. var elemTop = Math.round( $elem.offset().top ); var elemBottom = elemTop + $elem.height(); return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); } // Check if it's time to start the animation. function checkAnimation() { var $elem = $('.bar .level'); // If the animation has already been started if ($elem.hasClass('start')) return; if (isElementInViewport($elem)) { // Start the animation $elem.addClass('start'); } } // Capture scroll events $(window).scroll(function(){ checkAnimation(); }); 

कभी-कभी आपको हमेशा एनीमेशन की आवश्यकता होती है जब तत्व व्यूपोर्ट में होता है अगर यह आपका मामला है, तो मैं इसे बदलने के लिए मैट जेएसएफड कोड को थोड़ी सी

jQuery

 // Check if it's time to start the animation. function checkAnimation() { var $elem = $('.bar .level'); if (isElementInViewport($elem)) { // Start the animation $elem.addClass('start'); } else { $elem.removeClass('start'); } } 

एक सीएसएस एनीमेशन को सक्रिय करने के लिए, जब यह दृश्यमान हो जाता है तो एक क्लास को तत्व में जोड़ा जाना चाहिए जैसा कि अन्य उत्तरों में संकेत दिया गया है, इसके लिए जेएस आवश्यक है और वेपॉइंट एक जे एस स्क्रिप्ट है जिसका उपयोग किया जा सकता है।

जब आप एक तत्व तक स्क्रॉल करते हैं तो वेपॉइंट फ़ंक्शन ट्रिगर करने का सबसे आसान तरीका है।

वेपॉइंट संस्करण 2 तक, यह एक अपेक्षाकृत सरल jquery प्लगइन हुआ करता था। संस्करण 3 और ऊपर (इस गाइड संस्करण 3.1.1) में कई विशेषताएं पेश की गई हैं इसके बाद के संस्करण को पूरा करने के लिए, स्क्रिप्ट का 'इनव्यू शॉर्टकट' का इस्तेमाल किया जा सकता है:

  1. डाउनलोड करें और स्क्रिप्ट फाइलें इस लिंक से या गिटौब से (संस्करण 3 सीडीएनजेएस के माध्यम से अभी तक उपलब्ध नहीं है , हालांकि रॉगिट हमेशा एक विकल्प भी है)।

  2. अपनी एचटीएमएल के रूप में हमेशा की तरह स्क्रिप्ट जोड़ें

     <script src="/path/to/lib/jquery.waypoints.min.js"></script> <script src="/path/to/shortcuts/inview.min.js"></script> 
  3. उपयुक्त HTML तत्व jQuery चयनकर्ता के साथ #myelement को बदलने, निम्नलिखित JS कोड जोड़ें:

     $(window).load(function () { var in_view = new Waypoint.Inview({ element: $('#myelement')[0], enter: function() { $('#myelement').addClass('start'); }, exit: function() { // optionally $('#myelement').removeClass('start'); } }); }); 

हम यहां बताए गए कारणों के लिए $(window).load() करते हैं ।

मैट का बेला यहाँ अपडेट किया गया

इन उत्तरों के अलावा इन बातों पर विचार करें:

1- दृश्य में तत्व की जाँच में कई विचार हैं:
कैसे बताओ कि क्या वर्तमान व्यूपोर्ट में एक DOM तत्व दृश्यमान है?

2- यदि कोई एनीमेशन पर अधिक नियंत्रण रखना चाहता है (जैसे " एनीमेशन प्रकार " और " शुरुआत देरी " सेट करें) यहां इसके बारे में एक अच्छा लेख है:
http://blog.webbb.be/trigger-css-animation-scroll/

3- और यह भी ऐसा लगता है कि विलंब के बिना addClass को बुला रहा ( सेटटिमेउट का उपयोग करना) प्रभावी नहीं है